기존의 개인 포트폴리오를 리팩토링하려고 했으나
전체적인 UI도 변경하기위해 새로 만들기로 하였다.
중고 마켓과 자유게시판이 함께 있는 중고 마켓 커뮤니티를 만드려고 한다.
자유게시판 관련 파일은 container/presentational 패턴을 사용하고,
중고 마켓 관련 파일은 Hooks 패턴을 사용하여 만들 예정이다.
위의 이미지와 같은 container / presentational 패턴의 방식은 소스코드(기능)과 JSX(UI)로 나누는 방법이다.
가독성이 좋아지면서 오류 발견시 수정이 필요할 때 보다 쉽게 해결할 수 있어 유지, 보수 측면에서 유리하다.
특이사항으로는
파일이 나누어져있어 부모 컴포넌트에 자식 컴포넌트를 import 해줘야하며,
내부의 데이터는 props를 통해 변수나 함수를 전달해준다.
리액트의 데이터 흐름은 단방향 구조이기때문에 props는 부모가 자식에게만 줄 수 있다.
위의 이미지는 hooks 패턴을 활용한 폴더들이다.
container / presentational 패턴의 방식에서 기능(container) 부분에 작성되어있던 코드들을 따로 빼주면서 코드의 중복, 양을 줄이고 여러 컴포넌트에서 재사용할 수 있게 해주는 방식이다.
<리액트 공식문서>
개발을 하다 보면 가끔 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, higher-order components와 render props가 바로 그것입니다. Custom Hook은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줍니다.
커스텀 훅을 사용하면 폴더는 많이 생길 수 있어도 한 파일에 있는 코드 양은 많이 줄어든다. 폴더가 많으면 불편하다고 생각할 수 있으나 오류를 발견했을 때 한 파일에 긴 코드에서 찾고 수정하는 것보다 하나의 폴더에서 짧은 코드를 수정하는 것이 훨씬 편하다.
