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를 적는다.