[TIL] Day6

1. 실무적인 폴더구조
   container (기능) / presenter (보여주는) 패턴

주소 정리
게시글 등록 : /boards/new
게시글 상세 : /boards/13248237-34302-ddf2-423
게시글 목록 : /boards
게시글 수정 : /boards/13248237-34302-ddf2-423/edit

상품 등록 : /products/new
상품 상세 : /products/29472-34234-134dfsa
상품 목록 : /products
상품 수정 : /products/29472-34234-134dfsa/edit

하나의 페이지(페이지 컴포넌트 - pages/ 안의 파일들) 는 여러 컴포넌트들을 조립하여 만든다.

코드가 점차 길어지고 있다.
파일을 어떻게 나눌까?
가급적이면 코드는 100줄이 넘지 않게 파일을 관리하자.
에러를 찾고 수정하는 유지보수에 도움이 되기 때문에 사용한다.

1. 자바스크립트 영역 (기능) <---> html 영역 (화면) 구분하기
   Ex. BoardWriteContainer.js
   Ex. BoardWritePresenter.js

2. 하나의 컴포넌트를 2개의 컴포넌트로 분리
   최초에는 기능 혹은 화면만 담당했었지만 분리 된 이후, 자바스크립트 영역 - html 영역을 모두 갖게 된다.

3. 실행할 때는 2개가 하나로 합쳐져서 실행된다.

4. 컴포넌트 간에는 부모와 자식이 존재한다.
   presenter (자식) 이 container (부모) 에 import 된 후,
   contanier 의 리턴 이후로 합쳐져서 실행되기 때문에 하나의 소스코드로 작동한다.

5. 파일이 나눠져서 한 파일 안에서 컨퍼넌트 간 데이터 이동하던 것이 불가능해졌다.
   하지만! 부모 컨퍼넌트가 자식 컴퍼넌트에게 함수나 변수 등을 전달해 줄 수 있다. (Props)

2. 컴포넌트 분리 및 데이터 전달 : props

props : 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수, 함수

1. Container의 return 속에 입력

return ( 
	<BoardWriteUI {handleChangeWriter> />)

이 때 , props = { handleChangeWriter : handleChangeWriter }
key와 value를 가지는 객체가 된다. (실무에서는 같은 값으로 해라)!

2. presenterdml Export function 에서 props 호출

3. 필요한 부분에 {props.handelChangeWriter } 넣어주기
   -> 객체로 넘어오기 때문에 객체속성 꺼내는 방식으로 사용할 것.

export default function BoardWriteUI(props) {
return (
		..
	onChange = {props.handleChangeWriter} //props를 안쓰려면 상단 js영역에서 만들어야함.
)

자식이 부모에게는 넘겨줄 수 없음
부모만 자식에게 함수, 변수, state 등을 넘겨줄 수 있음
=> 리액트에서 데이터의 흐름은 단방향 구조이다.

오늘 공부를 돌아보며

2주차의 시작.
하나의 파일에서 3~4개의 파일로 분리해서 간단하게 만드는 작업을 하고 있다.
그러다가 포트폴리오 파일 하나를 잘못건든건지 로딩이 안된다............ ㅎ ㅏ.....