썸네일 [생활코딩] 4. Redux가 없다면 4. Redux가 없다면? 코드 작성 다른 부품을 변화시키는 한 줄의 코드가 매우 복잡한 코드 (단순X) 위 코드를 구현하기위해 코드의 중복성 多 여러 코드의 관계에 의해 고유한 특성을 가지는 코드가 존재! ex. document.querySelector('#component_green').style.backgroundColor='red'; 우리의 컴포넌트가 많아지면(100개, 1만개, 1억개 이상...), 신경써야 할 코드는 기하급수적으로 늘어남 => Redux가 필요한 이유!
[생활코딩] 3. Redux가 좋은 가장 중요한 이유: 로직의 단순화 3. Redux가 좋은 가장 중요한 이유 ex. 부품이 2개라면, 총 4개의 로직이 필요 부품이 늘어날수록 (부품 수^2) 의 로직이 필요 -> CRUD가 복잡해짐 한 버튼 클릭 (버튼의 상태가 바뀜) -> 버튼이 redux의 store에 data가 달라짐을 알려주는 코드 (로직 1) store은 자신을 구독하는 모든 버튼에게 state를 update하라고 알림 (로직 2) 즉, (총 부품 * 2)의 로직이 필요 => 로직의 개수가 줄어듦 (redux의 효과 -> 애플리케이션의 단순화) 출처: https://www.youtube.com/watch?v=ijdFixuK1nI&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=5&t=2s
썸네일 [생활코딩] 2. 리덕스 여행의 지도 (소개, state와 render의 관계, action과 reducer) 2-1. 리덕스 여행의 지도: 소개 최종 목표: 읽기, 생성, 삭제 구현된 웹 애플리케이션을 html, css, redux로 구현 2-2. 리덕스 여행의 지도 : state와 render의 관계 redux의 핵심 : store (정보가 저장되는 곳) store > state : 실제 정보가 저장. state에 직접 접속은 불가, 금지 => 누군가를 통해서만 가능 reducer 함수: store를 생성 시, redux함수를 생성하여 공급해야 함 render : redux와 상관없는 우리의 코드 (store 밖에 존재), UI를 만들어주는 역할 dispatch, subscribe, getState함수: 우리와 함께 일 할 함수 getState: state값 가져오기 render -> getState -> s..
[생활코딩] 1. Redux란? 1. Redux란? Redux: 자바스크립트로 만든 애플리케이션을 위한 예측가능한 상태의 저장소 예측 가능한? => 눈에 보이지 않는 복잡성을 획기적으로 낮추어 코드의 결과를 예측 가능하게 만듦 단 하나의 진실의 원천 하나의 상태를 갖는다 상태 = {} (객체) 하나의 객체 안에 애플리케이션에 필요한 모든 데이터를 넣는다 -> 복잡성 낮추기 (중앙집중적 관리) 단 하나의 state 유지 -> 복잡성 낮춤 외부로부터 철저한 차단 데이터 읽고 쓰기: 담당자(함수)만을 통해 가능 dispatcher, reducer 를 통해 데이터 수정 데이터 가져가기: getState 함수를 통해서만 가능 외부에서 데이터를 직접적으로 제어할 수 없도록 -> 예기치 않게 state 값이 바뀌는 문제를 사전에 차단 -> 애플리케..