[React] 공식문서 공부 - Components 와 Props

리액트에서 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눌 수 있습니다.

자바스크립트 함수와 유사하고, props라는 입력을 받은 후 화면에 표시를 해줍니다.

| Components, Props

1. 컴포넌트 만들기

함수 컴포넌트

function Sayhi(props) {
  return <h1>안녕하세요, 저는 {props.name} 입니다.</h1>;
}

클래스 컴포넌트

class Sayhi extends React.Component {
  render() {
    return <h1>안녕하세요, 저는 {this.props.name} 입니다.</h1>;
  }
}

이런 식으로 컴포넌트를 만들 수 있습니다.

2. 컴포넌트 렌더링

리액트 엘리먼트에 사용자 지정 컴포넌트를 사용할 수 있습니다.

const element = <Sayhi name="David" />;

렌더링 하려면

function Sayhi(props) {
  return <h1>안녕하세요, 저는 {props.name} 입니다.</h1>;
}

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

이런 식으로 사용하면 됩니다.

이때 리액트는 { name: "Lee" }를 props로 Sayhi컴포넌트를 호출합니다.

그럼 결과적으로 <h1>안녕하세요, 저는 David 입니다.</h1> 엘리먼트를 반환해 줍니다.

3. 컴포넌트 합성

리액트에서는 컴포넌트 안에 다른 컴포넌트를 참조할 수 있습니다.

일반적으로 새로운 리액트앱의 최상위에는 App 컴포넌트를 가지고 있습니다.

function Sayhi(props) {
  return <h1>안녕하세요, 저는 {props.name} 입니다.</h1>;
}

function App() {
  return (
    <div>
      <Sayhi name="David" />
      <Sayhi name="Luke" />
      <Sayhi name="Lee" />
    </div>
  );
}

이런 식으로 Sayhi를 여러 번 렌더링 하는 다른 컴포넌트를 만들 수 있습니다.