Container-Presentation

< Container / Presentational 패턴 >

• 소스코드를 자바스크립트(기능)와 JSX(UI)로 나누는 방법을 의미한다.
• Container는 자바스크립트(기능) 부분을 의미한다.
• Presentational은 JSX(UI) 부분을 의미한다.
• 부모 / 자식 컴포넌트의 형태를 가진다.

< 부모 컴포넌트 / 자식 컴포넌트 >

• 부모 컴포넌트: import하여 불러오는 컴포넌트.
• 자식 컴포넌트: import되어 불려가는 컴포넌트.
• 구조: 부모 컴포넌트 안에 자식컴포넌트가 포함되는 구조!
• 부모, 자식을 연결해주는 요소는?!

< props >

• 부모 / 자식 컴포넌트를 연결해주는 연결고리이다.
• props는 부모가 가지고 있는 변수, 함수를 자식한테 물려주는 것이다.
• 리액트는 데이터 흐름이 단방향 구조이다.
• 그렇기에, props가 부모에서 자식으로만 흐른다!!
• 그렇다면, 어떻게 받아오는 것인가?!

< export vs. export default >

• 낱개로 export를 하게되면 여러가지의 export중 필요한 것만 골라서 받는다.
• 한번에 모두 받아오는 방법:

* as Anyname

• 여기서 Anyname은 말 그래로 아무 이름이나 상관없다.
• 컴포넌트 처럼 한 파일 내에서 고를게 없는 것들은 default를 적는다.
• 예제들로 살펴보자!

=========================================================

1. 디폴트 안해준 애들은 중괄호를 사용해서 가지고 와야한다.
   ex)

import { useMutation, useQuery } from "@apollo/client";

2. export default가 된 파일을 import 시킬경우
   ex)

import BoardDetailUI from "./BoardDetail.presenter"