들어가기 프로젝트의 규모가 커지고 관리해야 할 상태가 더 많아진다면 여러 가지 문제가 생길 수 있다. 먼저 리듀서 함수의 액션 타입(식별자)에서 오타가 난다거나, 식별자의 이름이 충돌되는 경우가 그렇다. 또 데이터와 상태가 많아질수록 리듀서 함수의 길이가 점점 길어지면서 유지보수하기 어려워질 수 있다. const counterReducer = (state = initialState, action) => { if (action.type === 'plus') { return { counter: state.counter + 1, showCounter: state.showCounter, }; } if (action.type === 'minus') { return { counter: state.counter - ..
들어가기 이전 글에서 + 버튼과 - 버튼을 눌러 1씩 증감하는 카운터를 만들었다. 매우 단순하게 하나의 action을 다뤘는데, 지금부터는 아주 약간 더 다양한 것을 하려고 한다. 예를 들어 1가 아니라 5씩 증가하는 버튼이나, 카운터 버튼이 보였다/보이지 않는 토글 같은 것은 어떻게 만들 수 있을까? payload 먼저 5씩 증가하는 버튼을 만들고 싶다면 어떻게 해야 할까? if (action.type === '5 plus') { return { counter: state.counter + 5, }; } 물론 이렇게 해도 상관 없지만, 이는 확장성이 떨어진다. action에 원하는 속성을 추가하는 더 좋은 방법이 있다. action은 객체라는 점을 기억하고 가자. const morePlusHandler..
들어가기 지난 번 글에서 Redux에 대해 간단히 알아보았다. React에서는 Redux Store를 어떻게 만들고, 어떻게 제공하고 그 데이터를 어떻게 사용하는지 예제를 통해 알아보자. Store 만들기 만들기 전에 먼저 yarn add(또는 npm i) redux react-redux로 라이브러리를 설치한다. 이전에 적었는지 모르겠지만 Redux는 React에서만 사용할 수 있는 라이브러리가 아니기 때문에 react-redux도 설치해야 한다. store 폴더를 만들고 index.js를 생성한다. 꼭 폴더명을 store로 할 필요는 없지만 통상적으로 store라고 사용하니 절대다수를 따라주자. import { createStore } from 'redux'; const counterReducer = ..
Redux란 A state management system for cross-component or app-wide state 컴포넌트 간 상태 또는 앱 전역 상태를 위한 상태 관리 시스템 상태는 3가지로 나눌 수 있다. 1. 로컬 상태: 데이터가 변경되어 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 2. 컴포넌트 간 상태: 하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을 미치는 상태 (props drilling을 거치는) 3. 전역 상태: 애플리케이션의 모든 컴포넌트에 영향을 미치는 상태(사용자 인증 같은) 컴포넌트 간 상태나 전역 상태의 경우, 데이터를 넣고 전체 props 함수를 업데이트 하는 행위는 번거로울 수 있다. 그래서 React가 내부에서 지원하는 Context가 존재하고, 이를 ..
