[부스터코스/웹 프론트엔드 시작하기 (리액트&리덕스)] wrapping
이전에 만든 어플리케이션에서 Add Number와 Display Number의 코드를 보면
둘 다 redux의 store를 사용하기 때문에 이 어플리케이션의 상태에 의존하고 있는 상황이다.
즉, 이 컴포넌트를 다른 프로젝트에서 사용하기 어렵다는 의미이다.
코드의 재사용성을 위해 새로운 컴포넌트를 만들어 감싸는 wrapping을 통해 이 문제를 해결할 수 있다.
기존의 addNumber와 displayNumber는 Presentational 컴포넌트로, 리덕스와는 관계없이 그저 보여주는 역할을 하는 컴포넌트로 수정하고 이 컴포넌트들을 감싸는 익명 컴포넌트들(Container 컴포넌트)이 리덕스의 store와 연결되도록 할 것이다.
src 디렉토리 아래에 containers라는 폴더를 만든다
이 폴더 안에 addNumber와 displayNumber와 같은 이름의 jsx파일을 만든다. 여기서 파일명을 같게하는 것에 큰 의미는 없다.
이렇게 만든 파일에 위 이미지와 같이 코드를 작성해준다.
각각의 Root 파일에서 컴포넌트의 파일 위치를 수정해준다.
이제 components의 addNumber와 displayNumber의 store와 관련된 코드들을 containers에 있는 같은 이름의 파일들로 옮겨준다.
containers에 있는 addNumber는 onClick 이벤트가 발생했을 때 인자로 전달받은 size와 'INCREMENT' type이 포함된 action을 reducer에게 전달한다.
displayNumber는 store의 state 값이 변하면 자신의 number 값을 변경시켜 components에 있는 DisplayNumber 컴포넌트에게 props로 전달한다.
components에 있는 컴포넌트들의 코드도 알맞게 수정해준다.
이렇게 Container 컴포넌트를 활용하면 코드의 재사용성이 올라간다.
components에 있는 컴포넌트들은 리덕스의 store와 직접적인 관련이 없기 때문에 다른 프로젝트에서 필요할 때 다시 사용할 수 있게 된다.
하지만 항상 모든 컴포넌트들이 리덕스의 store와 관련이 없어야 하는 것은 아니다.
코드의 재사용성을 위해서 Container 컴포넌트를 활용하는 것이기 때문에 코드 재사용이 필요없는 상황에서 굳이 이런식으로 코드를 수정하지 않아도 된다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/web231/lecture/1387466
웹 프론트엔드 시작하기 (리액트&리덕스)
부스트코스 무료 강의
www.boostcourse.org
'공부 > react&redux' 카테고리의 다른 글
| [리액트] 유튜브 영상 삽입 (0) | 2023.06.22 |
|---|---|
| [부스터코스/웹 프론트엔드 시작하기 (리액트&리덕스)] react-redux (0) | 2023.05.22 |
| [부스터코스/웹 프론트엔드 시작하기 (리액트&리덕스)] 리액트에 리덕스를 추가 (0) | 2023.05.19 |
| [부스터코스/웹 프론트엔드 시작하기 (리액트&리덕스)] 리덕스 시작하기 - state가 변할 때 UI 반영 (0) | 2023.05.16 |
| [부스터코스/웹 프론트엔드 시작하기 (리액트&리덕스)] 리덕스 시작하기 - 새로운 state 값 만들기 (0) | 2023.05.15 |
