✍️ 컴포넌트 분리

• 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리한다.
• 프레젠테이셔널 컴포넌트
  👉 상태관리가 이루어지지 않고 Props 를 받아와 UI 를 보여주기만 하는 컴포넌트
• 컨테이너 컴포넌트
  👉 리덕스로부터 상태를 받아오고 액션을 디스패치하는 리덕스와 연동된 컴포넌트

✍️ Ducks 패턴

• 일반적인 구조는 actions, constants, reducer 세가지 디렉토리를 만들어 그 안에서 기능별로 파일을 하나씩 만들어 관리한다.
• 하지만 새로운 액션을 만들 때마다 세 종류의 파일을 모두 수정해야하는 번거로움이 발생한다.
• Ducks 패턴은 액션타입, 생성함수, 리듀서 함수를 기능별로 파일 하나에 몰아서 작성하는 방식을 말한다.

📌 모듈 생성

✅ 액션 타입 정의

• 모듈이름/액션이름 형식으로 액션 타입을 정의한다.
• as 키워드와 const 를 통해 해당 문자열 자체를 타입으로 지정할 수 있다.

✅ 액션 생성 함수

• type 필드로 정의된 액션 타입이 들어가고 파라미터로 받은 값은 추가 필드로 들어간다.

• redux-actions 라이브러리로 액션함수를 쉽게 작성할 수 있고 타입스크립의 경우 해당 라이브러리에 타입 정의 문제가 있어 typesafe-actions 라이브러리로 대체한다.
• 액션함수는 액션에 필요한 추가 데이터를 모두 payload 라는 이름으로 사용한다.
• 제네릭으로 payload 의 타입을 지정할 수 있다.

✅ 리듀서 함수

• redux-actions 에서는 handleActions 함수를 이용해 리듀서 함수를 만들수 있다.
• typesafe-actions 에서는 createReducer 함수를 이용해 리듀서 함수를 만들수 있다.
• 함수 안에 인자로 초기 상태값과 각 액션에 대한 업데이트 함수를 전달한다.
• 모두 payload 라는 공통된 이름을 사용하기 때문에 가독성을 위해 비구조화 할당 후 이름을 설정하여 어떤 값을 의미하는지 알 수 있도록 한다.

• 메서드 체이닝을 이용하면 객체 형태로 전달하지 않고 액션함수와, 업데이트 함수를 전달하면 된다.
• 메서드 체이닝의 장점은 액션함수를 바로 전달하기 때문에 액션 타입을 따로 선언하지 않아도 된다.