U E D R , A S I H C RSS

데블스캠프2017/React와Redux로배워보는함수형프로그래밍페러다임

c 받기 잘하는 진겸입니다.



1. 함수형 프로그래밍

  • 언어도 중요하지만, 그 언어를 통해 무엇을 할 수 있는가가 중요
  • 기존 시각과는 조금 다른 js를 통해 함수형 프로그래밍
  • React와 Redux
    • js로 만들었지만 함수형 프로그래밍의 개념을 사용하는 프레임워크
  • 함수형 프로그래밍 on Web??
    • 옛날 -> 정보가 서버에 집중
    • 현재 -> 브라우저에서 정보를 다룸
    • 이 변화를 완화시켜줌

  • 5가지 조건
    1. pure function
      • 함수형 프로그래밍의 기본
      • deterministic - 언제 어디서든 같은 결과값
      • predictable - 예측 가능
      • test code - 테스트 코드
      • 스코프 외의다른 변수나 메서드에 의존적이지 않고, 변수 또한 변경하지 않는다.
        • 어떤 입력에 대해 같은 출력
        • 이 함수로 인한 side effect가 없다
      • input -> ouput의 mapping
      • 여러 명령의 집합체
      • I/O 관련 함수
      • referential transparency
        • 자기 할 일만 함 ex) multiply
        • 같은 형태로 표현 가능함
        • 보장되지 않는 경우 - increase(1), hello word
      • 순수하지 않은 함수들
        1. current time
        2. random
        3. io
        4. user input, network request

    2. avoiding shared state
      • 구글의 자동완성
      • state를 공유하는 순간, io 또는 변수를 추적하기 어려워짐
      • 즉, 예측 불가능해짐
    3. avoid side effects
      • side effect와 logic의 분리
      • 다만 side effect가 없다면 기능을 할 수 없으므로
      • 이를 정리하자
    4. avoid mutable data, mutating state
    5. declarative rather than imperative

2. React & Redux

  • React
    • facebook에서 만든 프론트엔드용 프레임워크
    • View만 설계해주는 라이브러리
    • unidirectional data flow
    • virtual DOM
      • 바꿔야될 부분만 바꾸게 됨
      • 성능상의 이점
  • Redux
    • react와 같은 단방향
    • deterministic
      • 앱의 모든 상태와 view를 예측 가능하도록
    • MVC: 커질 수록 view와 model 사이의 관계가 비대
    • state를 store하는데에 사용
    • 앱내의 모든 state를 저장
    • user event -> Action -(dispatch)> store -> new state -> React가 렌더링
    • 같은 state에 대해 항상 일정한 view를 보여줌
    • 기존의 state를 변형시키지 않음
    • 3 laws
      • single source of truth
      • state is read-only
      • changes are made with pure function
  • 장점
    • 앱의 구조가 깔끔해진다.
    • 앱 전체가 predictable해진다.
    • 성능상의 문제도 해결해준다.
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:29:18
Processing time 0.0166 sec