REACT 공식 문서 정리 - 5. Component 와 Props

5. Component 와 Props

5.1 Component의 정의

컴포넌트의 제작 방법은 함수형과 클래스형으로 나누어져 있다.

컴포넌트를 쓰는 이유중 하나는 재사용을 편하게 하기 위함이다.

App 최상위 컴포넌트 아래에 여러 사용자 정의 컴포넌트가 존재한다.

클래스형 보다는 함수형이 간결하게 사용할 수 있다.

 

5.2 props의 정의

• React가 JSX 속성 또는 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이 객체를 Props라 한다.
• 주의사항 : props는 읽기 전용이므로 수정 X

ex) 함수 컴포넌트와 클래스 컴포넌트 예시

// 함수형
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// 클래스형
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

• 위의 함수와 클래스의 출력은 동일하다. 
• 데이터를 가진 하나의 “props” 객체 인자를 받은 후 React Element를 반환 한다.

5.3 컴포넌트의 재사용

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
function App(){
  return (
    <div>
     <Welcome name="Sara" />
     <Welcome name="Cahal" />
   </div>
  );
}

• 위처럼 App 안에 Welcome 컴포넌트의 내용을 재사용 할 수있다.

 

5.4 사용자 정의 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />; // 사용자 정의 컴포넌트 부분임.

주의사항 : 컴포넌트의 이름은 항상 대문자로 시작함.

• 컴포넌트 재사용은 객체 재사용 하는것과 비슷함. 재사용성 UP