폴더구조의 체계화에 대해 알아보자.
크게 3가지의 구조가 있는데
container/presentational 패턴,
Hooks 패턴,
아토믹 패턴이 있다.
요즘에는 최신 방식인 훅스패턴을 가장 많이 사용하지만 고전 방식이어도 유명한 container / presentational 패턴에 대해 먼저 알아보자!
container / presentational 패턴이란.
소스코드를 JS(기능)와 JSX(UI)로 나누는 방법이다.
이렇게 container와 presenter로 나누어주면 길었던 코드들이 나눠져 가독성이 좋아질 뿐만아니라 특정 부분에 오류가 있거나 수정이 필요할 때 보다 쉽게 해결할 수 있어 나누기 전보다 유지, 보수 측면에서 훨~씬 유리하다.
코드와 파일을 나눴지만 하나로 실행시키기 위해서는 부모컴포넌트에 자식컴포넌트를 불러와야한다.
그래서 위의 이미지처럼 presenter의 export값을 container에 import해주면 된다.
참고로 import되어 불려가는 컴포넌트를 자식컴포넌트라하고,
import하여 불러오는 컴포넌트를 부모컴포넌트라고 한다.
당연하게도 부모컴포넌트에 자식컴포넌트가 포함되는 구조이다.
하지만 import를 한다고 내부의 데이터까지 연결되는 것은 아니다.
부모컴포넌트에서 자식컴포넌트로 변수나 함수를 전달해 줄 수 있는데
이 때 props를 사용한다.
부모컴포넌트 container에서 변수나 함수를 선언하고,
자식컴포넌트 presenter에서 props로 가져와주면 된다.
직접 수정하면서 느낀점으로 처음엔 자식컴포넌트 presenter에 변수나 함수가 많으면 헷갈리고 오히려 불편할 것 같다고 생각이 들었었다.
근데 부모컴포넌트 container에서 return부분에 적은 변수명이나 함수명을 따라가면서 변경하니 불편하지도, 헷갈리지도 않았다.
가독성은 정말 편-안했다.
위의 내용들처럼 리액트의 데이터 흐름은 단방향 구조이다.
부모에서 자식으로는 데이터를 전달할 수 있지만, 자식에서 부모로는 데이터를 전달할 수 없다는 뜻이다.
ex) props는 부모가 자식에게만 줄 수 있다.
리액트의 데이터 흐름이 단방향 구조임에 따라 에러를 찾기 쉽고, 가독성이 좋은 것이다.
이렇게 container / presentational 패턴으로 나누어주다보면 의아한 점이 생긴다.
import로 가져올 때 중괄호를 쓰는 것과 안쓰는 것이 헷갈리게 된다.
한번 이해하면 그닥 어렵지도 않은 일인데, 이는 export와 export default로 구분지으면 쉽다.
export:
-중괄호를 사용해 import한다.
-한 컴포넌트 내에서 여러개를 내보낼 때 사용한다.
-import해올 때 export한 이름 그대로 불어와야만 한다.
-한번에 묶어서 import할 때에는 import * as S from '경로'를 사용한다.
export default:
-중괄호 없이 import한다.
-한 컴포넌트에서 한개만 export default했기 때문에 파일의 경로만 맞다면 이름은 막 적어도 상관없이 불러올 수 있다.
// 이해를 도울 아주 적절한 이미지 //
오늘은 container / presentational 패턴에 대해 배웠는데
강의 이해도 나름 잘 되었고, 실습도 어렵지 않게 완료했다.
요즘에는 훅스패턴을 자주 사용한다고 들었지만서도 오늘 배운 패턴을 알고 있는 사람과 모르는 사람에는 큰 차이가 있을 거라고 생각이 든다.
실제로 취업한 회사가 container / presentational 패턴을 사용하고 있다면 훅스패턴을 아무리 잘해도 소용 없을지도 모르니..
