늘 겸손하게

목차 React에 Redux 설치 1. 프로젝트에 Redux Toolkit과 React Redux를 설치 2. React Store 생성 3. React에 Redux Store를 제공 4. Redux State Slice 생성 5. Store에 slice reducer 담기 6. React 컴포넌트 내부에서 Redux State, Action 사용하기 마무리 React에 Redux 설치 React를 활용한 토이 프로젝트를 개발하다 Redux를 설치할 일이 생겼다. Redux를 설치하고 초기 설정을 해보자. 출처 : https://react-redux.js.org/tutorials/quick-start Quick Start | React Redux react-redux.js.org 1. 프로젝트에 Redu..

[ React Prop drilling 이슈 ] React에서 자식 컴포넌트에 데이터를 전달하고 싶은 경우 props를 통해 데이터를 간편하게 전달할 수 있습니다. 하지만 깊이 중첩된 자식 컴포넌트에 데이터를 전달하려는 경우에 문제가 생깁니다. 그 문제란, 데이터를 전달하려는 조상 컴포넌트와 데이터를 받으려는 자식 컴포넌트 중간의 많은 컴포넌트들이 모두 props로 데이터를 받고 다시 자식 컴포넌트에 props로 데이터를 전달해야하는 prop drilling을 해야합니다. 만약 전달하려는 데이터가 state라면 어떨까요? 현재 가지고 있는 state값과 다른 state값을 전달받은 컴포넌트는 리렌더링이 일어납니다. 또한 컴포넌트는 변경된 state값을 부모 컴포넌트에 전달하기도합니다. 위와 같은 stat..

[ Redux란? ] 자바스크립트를 위한 예측 가능한 state 컨테이너 https://besforyou.tistory.com/233 Redux - 왜 Redux를 사용하나요? Redux란? 공식 페이지에서는 Redux를 "자바스크립트를 위한 예측가능한 state 컨테이너"로 정의합니다. Redux는 한 마디로 자바스크립트 상태(state) 관리 라이브러리입니다. Redux는 state 관리 라이브러 besforyou.tistory.com [ Redux의 장점 ] 장점 1. 버그 예측이 쉬워진다 Redux는 데이터가 단방향으로 흐르고 Action에 의해서만 state가 변경되어 어디서 오류가 발생했는지 찾기가 매우 수월하다. 모든 Action의 dispatch는 history에 기록이 남아 버그 찾기에 ..

Redux란? 공식 페이지에서는 Redux를 "자바스크립트를 위한 예측가능한 state 컨테이너"로 정의합니다. Redux는 한 마디로 자바스크립트 상태(state) 관리 라이브러리입니다. Redux는 state 관리 라이브러리로 React를 포함한 다양한 자바스크립트 라이브러리와 같이 사용가능합니다. 하지만 React의 기능적 성격 때문에 React와 잘맞아 일반적으로 Redux는 React와 같이 사용됩니다. 왜 Redux를 사용하나요? 컴포넌트의 state는 컴포넌트가 언제 렌더링될지, 어떤 행동을 할지를 결정합니다. 이 state를 props를 통해 자식 컴포넌트로 전달하는것도 가능합니다. 이러한 state을 컴포넌트 내부에 저장하는 일은 컴포넌트 개수가 적고 깊이도 얖은 작은 앱을 개발할때는 큰..