Reducer
[ React ] 리액트 리덕스(Redux) 사용해보기
저번 게시글에선 리덕스의 정의에 대해서만 다루었고 이번 게시글에선 리덕스를 직접 사용해보자. 먼저 아래와 같이 CMD 에 입력해 프로젝트를 만든다. C:\> create-react-app react-redux C:\> cd react-redux 리덕스 모듈 redux 와 리덕스의 다양한 도구들이 들어있는 react-redux를 설치한다. C:\react-redux> yarn add redux react-redux react-redux 프로젝트를 열어보자. 디렉터리의 구조는 다음과 같이 만들었다. 소스를 흐름대로 살펴보도록 하겠다. src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './A..
[ React ] 리액트 리덕스(Redux)란?
Redux 에 대해 알아보기 전에 이해에 도움이 되기 위해 예시를 들어 설명해보자면, 만약 A 컴포넌트가 B 컴포넌트에, B 컴포넌트는 C 컴포넌트에.. 이렇게 D, E, F, G 컴포넌트 까지 이어진 루트가 있다고 가정했을 때 A 컴포넌트가 G 컴포넌트에 접근해 무언가 하려고 한다면 A ▶ B ▶ C ▶ D ▶ E ▶ F ▶ G 순서로 접근 후, 다시 G ▶ F ▶ E ▶ D ▶ C ▶ B ▶ A 루트를 통해 돌아와야한다. 얼마나 비효율적인 패턴인지는 굳이 설명을 안해도 알 것이다. 이 때 하나의 스토어 ( Store ) 라는 매체를 두면 위의 순서가 아니라, A ▶ Store ▶ G 식의 효율적인 접근이 가능하게 해준다. 이 Store 는 Redux 를 통해 사용할 수 있다. Red..