폴더구조 체계화
협업을 하는 개발자의 입장에선 하나의 파일의 길이가 길어지면
여러 사람들이 사용할 경우 필요한 부분을 찾기 힘들고 읽기가 힘들어진다.
그렇게 때문에 폴더구조를 바꿔주어 이를 해결한다.
컴포넌트분리 및 데이터전달
Container/Presenter
폴더구조중 하나로
와 같은 형식으로 import와 export를 사용하여 이를 나누며
Javascript 부분의 내용은 Container에
return문 안의 HTML내용은 Presenter에 넣어서 나눈 모습이다.
여기서 Container 부분은 부모컴포넌트에 속하며
import를 통해 불려오는 Presenter부분(=BoardWriteUI)은 자식 컴포넌트에 속한다.
Props
-부모컴포넌트가 자식컴포넌트에게 물려주는 변수/함수-
Container 부분의 변수와 함수들을 Presenter로 넘겨주는 부분이다.
Container 부분에서 제작된 aaa = {handleChangeWriter} 은
Presenter에 선언된 props에 의해 onChange={props.aaa}에 담긴다.
-현재 페이지- 기준
자식(Presenter)이 부모(Container)에게 주는방향은 불가능하며 이를
"데이터의 흐름이 단방향"이다 라고하다.
또한 이는 상대적인 부분이기에 Presenter이 부모컴포넌트가 되고 그 안의 emotion부분이 자식컴포넌트가 될 수도 있다.
export default는 페이지당 하나만 작성할 수 있다.
default로 임폴트 한경우 이름설정이 자유로우며 설정한 이름에 맞춰주면된다
일반적(export const ~~)으로 import 한 경우엔 내용중 선택해야하며 import 부분에 {}가 필요하다.
