Props란?

리액트에서는 부모가 자식 컴포넌트에 단일 객체 형태로 값을 전달할 수 있다. 이 객체를 리액트에서는 props라 한다. 리액트에서는 보통 내용은 다르지만 구조가 같은 요소들을 재사용하기 위해 컴포넌트로 만든다. 이 요소들을 페이지에 표시할 때는 이 컴포넌트를 반복해 렌더링하고, 게시물 각각의 내용을 props로 전달한다.

Props로 값 전달하기

부모만이 자식 컴포넌트에 props를 전달할 수 있다는 것에 주의한다. 그 역은 성립하지 않는다.

Props로 하나의 값 전달하기

function App() {
  const name = "민나";
  return (
    <div className="App">
      <Header />
      <Body name={name} /> ①
      <Footer />
    </div>
  );
}

export default App;

---------------------------------------------- 
자식 컴포넌트 코드
function Body(props) { 
  console.log(props); 
  return <div className="body">{props.name}</div>; 
}
export default Body;

Props를 전달하려는 부모 컴포넌트 태그에서 이름={값} 형식으로 작성하면 된다.

전달하는 Props는 단일 객체이다.

Props로 여러 개의 값 전달하기

function App() {
  const name = "이정환";
  return (
    <div className="App">
      <Header />
      <Body name={name} location={"부천시"} /> ①
      <Footer />
    </div>
  );
}

export default App;

----------------------------
자식 컴포넌트 코드

function Body(props) {
  console.log(props);
  return (
    <div className="body">
      {props.name}은 {props.location}에 거주합니다
    </div>
  );
}
export default Body;

변수를 미리 선언하지 않아도 객체 Props에 프로퍼티를 추가하여 전달할 수 있다.

구조 분해 할당으로 여러 개의 값 사용하기

Props로 전달된 값이 많으면, 이 값을 사용할 때마다 객체의 점 표기법을 사용해야 해서 불편하다. 그런데 Props는 객체이므로 구조 분해 할당을 이용할 수 있어 간편하다.

// 자식 컴포넌트 
function Body(props) {
  const { name, location } = props; // 매개변수 props에 있는 name과 location
																	 // 두 프로퍼티를 구조 분해 할당!!
  console.log(name, location); 
  return (
    <div className="body">
      {name}은 {location}에 거주합니다 // 구조 분해 할당한 name과 location 이용
    </div>
  );
}
export default Body;

// 자식 컴포넌트의 매개변수에서 그냥 구조 분해 할당 가능... (실무 추천)
function Body({ name, location }) {
  console.log(name, location);
  return (
    <div className="body">
      {name}은 {location}에 거주합니다
    </div>
  );
}
export default Body;

스프레드 연산자로 여러 개의 값 쉽게 전달하기

반대로 부모 컴포넌트에서 자식 컴포넌트로 props에 전달할 값이 많으면 값을 일일히 명시해야 하므로 복잡하다. 이때 Props를 하나의 객체로 만든 다음, 스프레드 연산자를 이용하면 훨씬 간결하게 코드를 작성할 수 있다.
```
// 부모 컴포넌트

function App() {
  const BodyProps = { 
    name: "이정환",
    location: "부천시",
  };

  return (
    <div className="App">
      <Header />
      <Body {...BodyProps} /> 
      <Footer />
    </div>
  );
}
export default App;
```
기본값 설정하기

만약 부모 컴포넌트에서 자식 컴포넌트로 전달할 값 중 하나를 빼먹게 되는 경우를 가정한다. 이는 오류를 발생시킬 위험이 있으므로 자식 컴포넌트에서 기본값을 미리 설정해 두어 오류를 사전에 방지해 본다.

자식 컴포넌트의 매개변수에서 구조 분해 할당을 이용한다. 매개변수로 받을 값을 미리 작성해 두고, 기본값도 설정해 두면 된다.
```
import React from "react";

const Button = ({children, text, color="black"}) =>{
    return <button style={{color: color}}>
      {text} - {color}
      {children}
      </button>;
};

export default Button;
```

Props로 컴포넌트 전달하기

지금까지는 컴포넌트 간에 Props로 문자열이나 숫자 같은 자바스크립트 값들을 전달했지만, 사실 Props로 자바스크립트 값뿐만 아니라 컴포넌트도 전달할 수 있다.


function ChildComp() { // 새로운 컴포넌트!
  return <div>child component</div>;
}

// 부모 컴포넌트
function App() {
  return (
    <div className="App">
      <Header />
      <Body>
        <ChildComp /> // 배치된 컴포넌트는 자동으로 Props의 children 프로퍼티에 저장
      </Body>
      <Footer />
    </div>
  );
}

export default App;

리액트에서는 자식 컴포넌트에 또 다른 컴포넌트를 배치하면, 이 배치된 컴포넌트는 Props의 children이라는 프로퍼티에 저장되어 전달된다. 사용 방법은 다음과 같다.

// 자식 컴포넌트

function Body({ children }) { 
  console.log(children); 
  return <div className="body">{children}</div>; 
}
export default Body;

Props의 children 프로퍼티로 전달되는 자식 컴포넌트는 값으로 취급되므로, JSX의 자바스크립트 표현식을 사용할 수 있다. children에는 컴포넌트 ChildComp가 저장되어 있기 때문에 해당 컴포넌트를 렌더링한다.