React-redux

이번에는 redux를 배우고 생활코딩과 벨로퍼트님의 실습을 보면서 개념을 익히고 따라해봤다.

그래서 내 다름대로 실습한 코드를 분석하면서 정리하려고 하는데 잘못이해하고 있는 부분이 있을 수 있다.

 

 

1.서비스 화면

우선 실습한 서비스는 아래와 같다.

색깔을 고르면 카운트숫자에 색깔이 바뀌게 되고, 버튼으로 카운트를 1씩 올릴 수 있다.

그리고 밑에는 인풋창에다가 입력해서 대기자명단을 작성할 수 있고 입장이 밑줄이 쳐지고 나감을 누르면 명단에서 지워진다.

 

2.counter 만들기

아래 사진을 설명하면 다음과 같다.

1. 액션과, 액션 생성함수, state의 초기상태를 설정해주고 dispatch에게 전달 받을 리듀서가 들어가 있는 모듈을 만들어준다.

2.combineReducers로 리듀서를 넣어준다.(리듀서가 계속 추가된다고 가정)

3.container를 만들어준다.

실제 counter컴포넌트에 props를 전달해주기 위한 컨테이너 컴포넌트를 만들어준다.

connect라는 react-redux에 도구로 연결을 해주고 mapStateToProps로 store에 state를 가져오고,

mapDispatch로 액션생성함수를 전달한다.

이후 컨테이너 컴포넌트에서 함수를 생성후 넘겨준다.

4.counter 컴포넌트는 props를 받아 렌더를 해주고 액션을 받아서 올려준다.

 

 

3.waiting 만들기

waiting도 counter와 거의 비슷한 방식으로 간다.

그러나 react-redux에서 제공해주는 도구를 사용해서 좀 더 편한 방식으로 코드를 작성할 수 있다.

원래 액션함수생성을 할 때 type를 명시하고 두번째 인자로 통일된 규칙인 payload를 넣어야 한다.

그래서 아래와 같은 코드가 일반적인 작성법이다.

export const changeInput = text => ({ type: CHANGE_INPUT, payload: text });
export const create = text => ({ type: CREATE, payload: text });
export const enter = id => ({ type: ENTER, payload: id });
export const leave = id => ({ type: LEAVE, payload: id });

그리고 리듀서를 작성할때도 handleAction을 이용해서 switch 구문을 사용하지 않고 작성할 수가 있다.

그리고 배열에 불변성을 지키기 위해 배열 내장method를 이용했다.

그 다음 방식은 거의 위와 유사하다.

 

 

4.마무리

팔레트와 관련된 컴포넌트도 있지만 내용이 너무 중복되는 것이 많아서 따로 설명하지는 않았다.

공부를 하면서 아직 완벽히 이해하지는 못했지만 어떤 흐름으로 가는 건지 알 수가 있었다.

다음에는 redux에서 hooks도 같이 사용해서 만들어보고 그 다음에는 react testing library를 적용해보려고 한다.