11.25.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-5 챕터리뷰

[ 새롭게 알게된 것 ]

---

1. 프리젠테이셔널 컴포넌트란 리덕스에 직접 접근 없이 필요한 값을 접근할 수 있는 컴포넌트다

---

프리젠테이셔널 컴포넌트에선 주로 UI를 선언하는 것에 집중한다.

필요한 값들이나 함수는 props 로 받아와서 사용하는 형태로 구현하는 것이 특징이다.

 

---

 

2. 컨테이너 컴포넌트란 리덕스 상태 조회 및 액션 디스패치 할 수 있는 컴포넌트다

---

HTML 태그를 사용하지 않고 다른 컴포넌트를 import해서 사용한다.

---

 

3. 책대로 분리 한다고 했는데 문제가 발생했지만 이유를 알 수 없다

---

이유를 추후 찾아봐야 겠다.

값은 넘겨주고 받는게 명확한데.. 왜 컨테이너에서만 에러가 뜨는건지 이유를 모르겠다..

리덕스를 사용할때 프리젠테이셔널 컴포넌트와 컨데이너를 분리시켰는데 에러가 발생했다..

원인을 분석해보니 아래와 같은 문제점을 발견했고, 해결했다.

modules라는 디렉토리도 안만들어져 있었고 counter.js 리덕스 모듈도 설정 안되어 있었던 문제
redux와 redux-router 라이브러리가 설치되어 있지 않은 레포지터리에 작업했던 문제
App 컴포넌트에 스토어를 선언하지 않았고, 해당 스토어를 Provider 컴포넌트 store={store} props로 넘기지 않은 문제
그리고 App 컴포넌트를 Provider로 감싸지 않았던 문제 

위 문제들을 해결한후 아래와 같이 counter가 잘 작동하는 것을 확인했다.

결국 프리젠테이셔널 컴포넌트와 컨테인너 컴포넌트는 반드시 redux와 redux-router 라이브러리가 필수항목임을 알게 되었다.

우측에 보면 시뻘건 버그들을 다 해결했다. 왕왕 뿌듯.

 

위 패턴은 Dan Abramov가 창시한 패턴이라고 한다.

해당 글을 참고하면 좋을 지도 모르겠다.

위 패턴을 현재 작업하고 있는 프로젝트에서 봤던 코드스타일이라 더욱 반가운 패턴이었다.

이제야 왜 그렇게 코드를 작성했는지 패턴을 통해 이해 할 수 있어서 좋았다.

---