React 공식문서 뜯어보기-Components and Props

ShallWeDance·2021년 7월 5일

목록 보기

3/6

함수 / 클래스 컴포넌트

컴포넌트를 정의하는 방법은 두가지가 있습니다.

함수 컴포넌트

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

이 함수는 데이터를 가진 하나의 props 객체를 인자로 받은 후 React element를 반환하므로 유효한 React component 입니다.

클래스 컴포넌트

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

또한, ES6 class를 사용하여 component를 정의할 수 있습니다. React의 관점에서 볼 때 두가지 유형의 컴포넌트는 동일합니다.

컴포넌트 렌더링

React element는 DOM 태그로 나타낼 뿐만 아니라 사용자 정의 컴포넌트로도 나타낼 수 있습니다.

const myElement = <Hello name="Tom" />;

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX attribute와 children을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체가 바로 props 입니다.

예를 들자면, 다음과 같은 예시를 확인 해보겠습니다.

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

const myElement = <Hello name="Tom" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

이 예시에서는 아래와 같은 순서로 렌더링이 됩니다.

<Hello name="Tom" />엘리먼트로 ReactDOM.render()를 호출합니다.
React는 {name: 'Tom'}을 props로 하여 Hello 컴포넌트를 호출합니다.
Hello 컴포넌트는 결과적으로 <h1>Hello, Tom</h1> 엘리먼트를 반환합니다.
ReactDOM은 <h1>Hello, Tom</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트 합니다.

🚧 주의사항🚧

컴포넌트의 이름은 항상 대문자로 시작해야 합니다.

React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리하기 때문에 컴포넌트를 나타내고 싶다면 대문자로 시작해야 합니다.

컴포넌트 합성

컴포넌트는 자신의 output에 다른 컴포넌트를 참조할 수 있습니다. 이는 모든 세부 단계에서 동일한 level의 컴포넌트를 사용할 수 있음을 의마합니다. React 앱에서는 button, form, dialog, screen 등의 모든 것들을 대부분 컴포넌트로 표현됩니다.

예를 들얼 Hello를 여러번 렌더링하는 App 컴포넌트를 만들 수 있습니다.

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

function App(){
  return (
  <div>
    <Hello name="Tom" />
    <Hello name="Kim" />
    <Hello name="Ahn" />
  </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);