- 컴포넌트
- 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
- 공식 홈페이지에서는 함수형 컴포넌트를 사용하기를 권장하고 있다.
- Props
-
컴포넌트 끼리의 정보교환 방식이다.
부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터. 다시 말해, 컴포넌트 간의 정보 교류 방법이다.2-1. props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향).
2-2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.
- prop drilling
- [부모] → [자식] 컴포넌트간 데이터 전달이 이루어지는 방법이 props다.
[부모] → [자식] → [그 자식] → [그 자식의 자식] 이 데이터를 받기 위해선 무려 3번이나 데이터를 내려줘야 해요. 이걸 바로 prop drilling, props가 아래로 뚫고 내려간다. 라고 한다.
이와 같은 패턴은 피해야한다.
- Props Children
- 자식 컴포넌트로 정보를 전달하는 또 다른 방법이다.
- Layout 컴포넌트를 만들 때 자주 사용
Layout컴포넌트 안에는header라는 컴포넌트가 있고,header아래에{props.children}를 통해서 props를 받아 렌더링 하고 있다. 즉,Layout컴포넌트가 쓰여지는 모든 곳에서<Layout>…</Layout>안에 있는 정보를 받아서 가져올 수 있는 것이다.
도전을 즐기는 자