5. 리액트와 함께 사용하기

리덕스를 리액트와 함께 사용하는 방법을 알아봅시다. 우리는, 이러한 프로젝트를 만들어볼겁니다.

상단에는 알록달록한 카운터가 있습니다. 이 카운터에서는 팔레트에서 색상을 고를 수 있고, 여기서 고른 색상이 숫자의 색상으로 지정됩니다. 그리고 버튼을 누르면 값이 바뀌죠.

하단에는 대기자 명단이 있습니다. 폼에서 이름을 등록을 추가하면 하단에 추가되고, 리스트에서 입장을 누르면 줄이 그어지고, 나감을 누르면 제거됩니다.

시간을 효율적으로 활용하기 위하여, 컴포넌트 구성 및 스타일링은 생략하고, 껍데기만 이미 만들어진 프로젝트에서 진행하겠습니다.

다음 명령어를 입력하시거나,

$ git clone https://github.com/vlpt-playground/learn-redux.git

이미 만들어둔 코드샌드박스 템플릿에서 진행하세요.

프로젝트를 열어서 내부에 어떤 컴포넌트들이 있는지 하나하나 살펴보세요. 상태관리는 아직 구현이 되어있지 않기 떄문에 버튼들을 클릭해도 작동하지는 않을겁니다.

리액트 프로젝트에서 리덕스를 사용하려면 다음 라이브러리들이 설치되어야 합니다. (위 템플릿 프로젝트에는 이미 설치가 된 상태입니다.)

준비가 다 되셨으면 하나하나 차근차근히 구현해봅시다!

results matching ""