폴더 구조 체계화
하나의 파일에 너무 긴 코드가 작성되어있으면 유지보수 및 관리가 어려울 수 있다.
상대방이 코드를 어렵지 않게 해석하기 위해 기능별로 파일들을 정리할 필요가 있다.
1. 컨테이너 (js) / 프리젠테이셔널 패턴(html)
-JS 부분 : container component
-HTML(JSX) 부분 : presentational component, 줄여서 presenter
2. 훅스 패턴 (함수)
3. 아토믹 패턴 (파일하나에 기능하나씩)
컨테이너/프리젠테이셔널 방식보다는 훅스패턴 방식을 많이 사용하고 있지만,
아직 컨테이너 / 프리젠테이셔널 방식을 사용하는 회사가 있을 수 있으니 모두 익혀 놓는 것이 중요하다.
1. 컨테이너(js) / 프리젠테이셔널 패턴(html)
이전에 제작한 포트폴리오 파일을 위 방식으로 나눠서 저장하였다.
1. index.js : return <불러올함수> 작성
2. 파일명.container.js : js와 html에 적용되는 함수 작성
3. 파일명.presenter.js : html 작성
4. 파일명.queries.js : gql 작성
5. 파일명.styled.js : css 작성
또한 import를 두가지 방식으로 정리했는데 차이를 알았다.
import { 변수 } from "경로" : 경로에 선언 가능한 함수가 여러가지일 때 {} 사용
import 변수 from "경로" : 경로에 선언 가능한 함수가 한가지일 때 {} 미사용
파일을 옮길때 헷갈린것은 파일명.container.js 위치의 html 부분이였다.
import를 한다고 내부에 있는 데이터까지 연결되는 것이 아니였다.
그래서 두 컴포넌트 간 데이터를 연결하려면, props를 사용해야 했다.
( 단방향 : 부모에서 자식으로만 전달 가능합니다) -자식에게 작성
해당 파일에는 prestenter의 함수를 가져와 사용하지만 HTML에서 함수가 사용된다면
container 파일에서 미리 선언해줘야 사용할 수 있다.
이때는 props를 사용할 수 있다. (이름 변경가능)
이때 가장 큰 차이점은 저장된 데이터를 불러오는 query의 경우
useQuery가 할당되어있는 const {data}가 있으므로,
container에서는 한번만 선언해주고 presenter에서 동일한 이름으로 사용할 수 있다는 점이다.
(같은곳에 정보가 저장되어있기때문에 이렇게 쓸 수 있는 것 같다)
Mutation에서는 함수의 기능이 모두 다르므로 (input 별로) 하나씩 변경해줘야한다.
