반응형
컴포넌트를 정의하는 방법은 두 가지가 있다.
함수
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
이 함수는 데이터를 가진 하나의 "props"(properties, 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다.
이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 "함수 컴포넌트"라고 호칭한다.
클래스
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
React의 관점에서 볼 때 위 두 가지 유형의 컴포넌트는 동일하다.
컴포넌트 렌더링
이전까지는 DOM 태그만을 사용해 React 엘리먼트를 나타냈다.
const element = <div />;
React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있다.
const element = <Welcome name="Sara" />;
React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 개체로 전달한다.
이것을 "props"라고 한다.
다음은 페이지에 "Hello, Sara"를 렌더링하는 예시이다.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
이 예시에서는 다음과 같은 일들이 일어난다.
- <Welcom name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출한다.
(엘리먼트를 실행하면 render가 자동으로 호출되는건가?) - React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출한다.
- Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환한다.
- React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트한다.
(virtual DOM을 통해 변하는 값만 업데이트한다라는 뜻 같음.)
컴포넌트 합성
컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다. 이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미한다.
(컴포넌트를 어느 컴포넌트 안에서든 호출할 수 있다는 의미인듯)
React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현된다.
컴포넌트 추출
컴포넌트를 여러 개의 작은 컴포넌트로 나누는 것을 두려워하면 안된다.
props는 읽기 전용이다.
즉 불변성을 가진다. props의 값을 바꾸는 행위는 하지 않아야한다.
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.
반응형