container/presenter pattern 관련 간단한 정리

contaier/presenter로 구조를 나누는 방법

1.

app.js에서 최종적으로 모든 파일이 합쳐져서 보인다. 

pages/../index.js 에  container 컴포넌트를 import 하여 주소로 찾아간다. 

 

2. 

폴더는 크게 4가지로 나눈다.

container.js  - 기능 구현 파트

presenter.js - UI (return) 파트

styles.js - style 파트

queries.js - 쿼리 파트 

 

import를 통해 하나로 합친다. 

 

 

export? export default? 언제 사용해야 하는가? 

1. export로 내보내는 함수, 변수 : 하나만 지정하여 import가능.
2. export default 사용 중인 컴포넌트 함수 : 한 파일에 하나만 사용 가능. default는 하나만 가능하다.
   import 시 default 함수는 파일 당  하나만 존재하기에 { }가 필요없다. 또 기존의 이름 대신 다른 이름으로 import가 가능하다. 
3. 한 파일에 같이 존재하는 export default와 export는,
   import A, {B} from "../.." 형식으로 작성 가능
4. 혹은 한 파일 내의 export들을 다 들고 오는것도 가능한데,
   import* as S from "../.." 로 가져오며, 사용 시 S. .. 로 사용. 
   
   ㅤ

props의 이용

바인딩이 필요한 함수를 다른 파일로 넘겨야 할 때, 

props(부모->자식 단방향)을 이용하자. 

 

A : container.js
B : presentation.js

--A FILE--
import B from "..."
export default function page(){

return (<B   바인딩네임={바인딩함수} />)}


---B FILE---
export default function page(props){
return (<btn onclick={props.바인딩네임}>)}

 

c/p 패턴&props 적용 예시

 

 

 

라우터 사용 시 주의 

import시 하나로 합쳐지기에 router을 쓰지 않는 부모 컴포넌트에 import 할 경우 undifined API를 가져오기에 조심하자.

board/new 에서 boards/boardid 의 주소를 가져올 수 없다. 주소 또한 하나로 다 합쳐진다.

  

 

 

페이지 권한 분기

router로 동적 페이지를 생성하는 boardId 파일이 있다. (사용자가 작성한 글에 id를 부여하여 파일의 주소로 사용) 

이때 pages/boardId/index.js에서 container.js를 impoert하며 사용자의 로그인 여부에 따라 페이지 접근 권한을 다르게 줄 수 있다.