리덕스 사용 (1)

리덕스의 필요성

소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만
프로젝트의 규모가 커짐에 따라 상태 관리가 번거로워질 수 있다

1. 리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 대한 로직을 모듈로 따로 분리하여 → 컴포넌트 파일과 별개로 관리할 수 있으므로 → 코드를 유지 보수하는 데 도움이 된다
2. 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하다
3. 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해줄 수 있다

리덕스를 사용할 때의 함수

• 바닐라JS에서 리덕스를 사용할 때 : 스토어의 내장함수 store.subscribe 사용
• 리액트 애플리케이션에서 리덕스를 사용할 때 : react-redux 라이브러리에서 제공하는 유틸함수 connect & 컴포넌트 Provider 사용

리액트 프로젝트에서 리덕스 사용하기

프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 분리하는게 가장 많이 사용되는 패턴이지만
리덕스를 사용하는 데 필수 사항은 아니다
다만 이렇게 사용하면 코드의 재사용성이 높아지고, 관심사의 분리가 이루어져 UI를 작성할 때 좀 더 집중할 수 있게 된다

프레젠테이셔널 컴포넌트

• 상태 관리가 이루어지 않는다
• props를 받아와서 화면에 UI를 보여주기만 한다
• src/components 경로에 저장

컨테이너 컴포넌트

• 리덕스와 연동되어있는 컴포넌트
• 리덕스로부터 상태를 받아 온다
  = 리덕스 스토어에 액션을 디스패치한다
• src/containers 경로에 저장