[TIL] 2주차 - 1. 실무적인 폴더구조 Container/ Presenter

목차

• 폴더구조 체계화

폴더구조 체계화

Container / Presenter 패턴 : 

js(JSX)와 html을 나누는 방식 (-> 기존에 가장 많이 사용되는 방식)

 

파일은 두개로 나누지만 하나로 실행시키는 것입니다.

Presenter는 화면에 보여지는 부분입니다.

container 측에서 presenter를 import 받아와서 사용합니다.

 

container/presenter 패턴 외에도 
파일과 폴더를 잘게 쪼개는 방식의 atomic 패턴이 있습니다.

 

container 는 javascript 부분 / presenter 는 html 부분을 맡는다.

 

presenter 인 BoardWriteUI를 container로 import 받아왔습니다.

return() 안에 <BoardWriteUI/> 태그로 presenter를 표현합니다.

 

 

그런데 container와 presenter 두개의 파일은 합쳐지지만

writer 변수와 handleChangeWriter 함수 등등과 같은 요소(변수, 함수)들은

합쳐지지 않아서  에러가 발생합니다.

 

 

이런 경우, props(properties)를 사용하여

컴포넌트에 값 전달을 할 수 있습니다.

(어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용합니다.)

 

import 받아온 presenter는 자식 컴포넌트가 되고

import 받은 입장인 container는 부모 컴포넌트가 되는데

(자식과 부모의 관계는 페이지마다 상황마다 다릅니다.)

이 때,

부모 컴포넌트의 요소(변수, 함수)를 자식 컴포넌트에게 물려 줄 수 있습니다.

(직접적으로 자식이 부모에게 주는 방법은 없습니다.)

 

 

return () 안의 <BoardWriteUI /> 태그 안에

aaa = {handleChangeWriter}

라고 입력하면 

 

{handleChangeWriter}함수가

aaa 라는 이름으로 props에 담겨지게 됩니다.

 

함수가 담겨진 props가 자식 컴포넌트인 presenter 컴포넌트로 가서

{props.handleChangeWriter} 형식으로 함수를 꺼내 사용할 수 있게 됩니다.

 

props 내부적으로 처리되는 과정

 

마찬가지로 return() 안의 <BoardWriteUI /> 태그 안에

bbb={writer}

라고 입력하면 presenter 컴포넌트로 가서 

writer 변수를 사용할 수 있게 됩니다. 

 

최종적으로 props는

자식 컴포넌트로 가서

함수 aaa와 변수 bbb를 뱉어내게 됩니다.

 

즉 props란

부모 컴포넌트가 자식 컴포넌트에게

물려주는 변수와 함수가 됩니다.

 

이런 흐름으로,

리액트는 데이터의 흐름이 단방향 구조라고 합니다.

(에러 잡기 더 쉬움.)

(앵귤러는 데이터의 흐름이 양방향 구조.)

 

컴포넌트의 부모, 자식 관계는 페이지 별로 상황 별로 다르다.

 

 

---

 

프로젝트 전체 구조에서

public과 pages는 이름 바꾸면 안됩니다.

 

src 폴더와 styles 폴더는 이름 바꿔도 됩니다.

 

 

src 폴더 밑에 commons 폴더가 있는데

src/components 폴더 밑에 또 commons 폴더가 있다.

 

 

src/commons는 공통으로 사용되는 기능들 넣는 곳이고

src/components/commons는

기능들을 나눠 넣는 곳인데

여러 페이지에서 사용되는 공통 컴포넌트를 넣습니다.

---

 

예를 들어 한 웹 페이지안에

게시물 등록 컴포넌트,

검색 컴포넌트,

배너 컴포넌트

등등 이렇게 나뉠 수 있는데

 

검색 컴포넌트는 게시글 조회와 같은

다른 페이지에서도 import 하여 사용합니다.

이 때 검색 컴포넌트는 common component에 해당합니다.

 

등록하기 페이지 에서만 쓰이는 것은

그냥 '컴포넌트'라고 하는데

편의상  '단위 컴포넌트(unit component)'라고 부르겠습니다.