Components와 Props

https://ko.reactjs.org/docs/components-and-props.html를 읽고 정리한 글입니다.

 

• Component
  • JavaScript 함수와 요사
  • props(임의의 입력)을 받고, React Element(화면에 어떻게 표시되는지 기술) 반환
  • 함수형 컴포넌트, 클래스형 컴포넌트(함수형 컴포넌트보다 몇 가지 추가 기능 존재)
  • 사용자 정의 컴포넌트는 대문자로 시작
  • 다른 컴포넌트 참조 가능 ⇒ 버튼, 폼, 다이얼로그 등이 모두 컴포넌트
    • Button, Panel 등 여러 번 사용될 때는 재사용 가능한 컴포넌트를 만들고 App, Comment처럼 복잡한 경우도 컴포넌트 추출하기
• 컴포넌트 랜더링

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

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

• • 실행 순서
    1. <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출
    2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출
    3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환
    4. React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트

•  Props
  • 속성을 나타내는 데이터
  • 읽기 전용
  • React 컴포넌트는 자신의 Props를 다룰 때 순수 함수처럼 동작해야 한다
• 클래스형 컴포넌트
  • render()는 React.Component의 하위 class에서 반드시 정의해야하는 메서드

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