컴포넌트

컴포넌트를 통해 재사용 가능한 여러 조각으로 UI를 구성, 각 조각을 개별적으로 관리한다
개념적으로는 자바스크립트의 함수와 유사하다
화면을 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다

함수 컴포넌트와 클래스 컴포넌트

컴포넌트를 정의하는 가장 간단한 방법은 자바스크립트 함수를 정의하는 것

사용자 정의 컴포넌트는 식별자의 첫 시작을 무조건 대문자로 한다

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

이 함수는 props 객체 인자를 받은 후 React 엘리먼트를 반환하는 유효한 React 컴포넌트
이러한 유형의 컴포넌트는 자바스크립트 함수로 구성되어 있기 때문에 함수 컴포넌트라고 부른다

ES6 class 문법을 통해 클래스 컴포넌트를 구성할 수도 있다
클래스 컴포넌트는 React 에러 바운더리를 제외하고는 이제 사용되지 않는다

리액트 화면을 구성하는 관점에서 두 방식은 다르지 않다

컴포넌트 렌더링

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있다

const element = <Welcome name="Sara" />;

사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 React는 JSX어트리뷰트와
자식을 해당 컴포넌트에 단일 객체로 전달한다
이 객체를 props 라고 한다

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

렌더링 순서

1. 엘리먼트로 root.render()를 호출
2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출
3. Welcome 컴포넌트는 결과적으로

   Hello, Sara

   엘리먼트를 반환
4. React DOM은

   Hello, Sara

   엘리먼트와 일치하도록 DOM을 효율적으로 업데이트

컴포넌트 합성

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다
이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미한다 (재사용)

일반적인 리액트 앱은 최상위에 단일 App 컴포넌트를 가지고 있다
기존 앱에 리액트를 통합하는 경우 Button과 같이 작은 컴포넌트부터 뷰 계층 상단으로 가는
점진적인 작업이 필요할 수 있다

컴포넌트 추출

컴포넌트를 여러 개의 작은 컴포넌트로 나누는 것을 즐기자
아마도 컴포넌트 분리와 같은 의미로 생각하면 될 것 같다

처음에는 컴포넌트를 추출하는 작업이 지루해 보일 수 있습니다. 
하지만 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타냅니다. 
UI 일부가 여러 번 사용되거나 (Button, Panel, Avatar), 
UI 일부가 자체적으로 복잡한 (App, FeedStory, Comment) 경우에는 
별도의 컴포넌트로 만드는 게 좋습니다

props

props 는 읽기 전용이다
props 로 받아온 값을 수정하면 안된다

입력 값을 바꾸지 않고 동일한 입력에 대해 항상 같은 값을 반환하는 함수를
순수 함수라고 한다 React 컴포넌트는 자신의 props 를 다룰 때 순수 함수처럼 동작해야 한다