c 받기 잘하는 진겸입니다. [[Tableofcontents]] == 함수형 í”„ë¡œê·¸ëž˜ë° == * ì–¸ì–´ë„ ì¤‘ìš”í•˜ì§€ë§Œ, ê·¸ 언어를 통해 ë¬´ì—‡ì„ í• ìˆ˜ 있는가가 중요 * 기존 시ê°ê³¼ëŠ” 조금 다른 js를 통해 함수형 í”„ë¡œê·¸ëž˜ë° * React와 Redux * js로 만들었지만 함수형 프로그래ë°ì˜ ê°œë…ì„ ì‚¬ìš©í•˜ëŠ” í”„ë ˆìž„ì›Œí¬ * 함수형 í”„ë¡œê·¸ëž˜ë° on Web?? * ì˜›ë‚ -> ì •ë³´ê°€ ì„œë²„ì— ì§‘ì¤‘ * 현재 -> 브ë¼ìš°ì €ì—서 ì •ë³´ë¥¼ 다룸 * ì´ ë³€í™”ë¥¼ 완화시켜줌 * 5가지 ì¡°ê±´ 1. pure function * 함수형 프로그래ë°ì˜ 기본 * deterministic - ì–¸ì œ ì–´ë””ì„œë“ ê°™ì€ ê²°ê³¼ê°’ * predictable - 예측 가능 * test code - 테스트 코드 * 스코프 외ì˜ë‹¤ë¥¸ 변수나 ë©”ì„œë“œì— ì˜ì¡´ì ì´ì§€ ì•Šê³ , 변수 ë˜í•œ 변경하지 않는다. * ì–´ë–¤ ìž…ë ¥ì— ëŒ€í•´ ê°™ì€ ì¶œë ¥ * ì´ í•¨ìˆ˜ë¡œ ì¸í•œ side effectê°€ 없다 1. input -> ouputì˜ mapping 2. ~~여러 ëª…ë ¹ì˜ ì§‘í•©ì²´~~ 3. ~~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 == 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해진다. * 성능ìƒì˜ ë¬¸ì œë„ í•´ê²°í•´ì¤€ë‹¤.