[React] Props(프롭스) 란?

프롭스

1. 프롭스의 정의
   - 만약 A,B,C 페이지에서, 각 페이지마다 'Header안에 들어있는 텍스트를 다르게' 보여주고 싶다면?
   - 프롭스는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값 입니다. 즉, props를 활용하면, 부모 컴포넌트 -> 자식 컴포넌트 로 값을 전달할 수 있습니다.
   - props는 객체입니다. 뭔가를 넘겨받을때, 자식 컴포넌트에서는 'props.이름' 으로 접근할 수 있습니다.

2. 프롭스의 특징
   - 자식 컴포넌트에서 props는 읽기 전용 입니다. 함수 컴포넌트, 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정할 수 없습니다.
   - 부모 컴포넌트의 props를 변경하면, 해당 props를 사용하고 있던 자식 컴포넌트는 리렌더링 됩니다.
   
   

프롭스 예시

1. props 기본 예시

// Header.jsx (자식 컴포넌트)

function Header(props) { // 2번) 매개변수로 props를 넣고
  return (
    <header className="App-header">
      <p>
        React, { props.title } // 3번) { props.상속받은이름 } 으로 사용한다
      </p>
    </header>
  );
}

export default Header;

// App.jsx (부모 컴포넌트)
import './App.css';
import Header from './components/Header';

function App() {
  return (
    <div className="App">
      <Header title={ "React A" } /> // 1번) 자식에게 상속하면
      <Header title={ "React B" } />
      <Header title={ "React C" } />
    </div>
  );
}

export default App;

2. props 구조분해할당 예시

// Header.jsx (자식 컴포넌트)
import React from 'react';
import logo from '../logo.svg';

function Header({ firstName, lastName }) { // 3번) props를 구조분해할당 해서
  return (
    <header className="App-header">
      <p>
        React, { firstName } // 4번) props.를 떼고, 상속받은이름만 사용한다.
      </p>
    </header>
  );
}

export default Header;

// App.jsx (부모 컴포넌트)
import './App.css';
import Header from './components/Header';

function App() {
  const info = { // 1번) 식별자에 넣고
    firstName: "chloe",
    lastName: "min"
  };

  return (
    <div className="App">
      <Header { ...info } /> // 2번) 자식에게 상속하면
    </div>
  );
}

export default App;