Props

Props

• 부모 컴포넌트에서 자식 컴포넌트로 데이터에 이름을 붙여서 전달하는 방식
• 자식 컴포넌트에서는 매개변수를 통해 props를 받아서 사용할 수 있음

(1) 부모 컴포넌트에서 props 전달

• 자식 컴포넌트에 여러 값을 전달 가능함

import React from "react";
import "./App.css";
import Counter from "./Counter";
import MyHeader from "./MyHeader";

function App() {
  return (
    <div>
      <MyHeader />
      // 자식 컴포넌트에 데이터값 전달
      <Counter initialValue={5} num1={1} />
    </div>
  );
}

export default App;

(2) 자식 컴포넌트에서 props 받기

• 자식 컴포넌트에서 매개변수로 props를 받을 때는 객체에 담겨져서 받아짐
• 매개변수 이름은 상관 없음

// 매개변수(props)로 데이터를 받아서 사용
const Counter = (props) => {
  console.log(props);  // props 출력
  console.log(props.initialValue);  // props 객체 안에 있는 데이터 값을 사용하기 위해서 점 표기법 사용
  const [count, setCount] = useState(10);

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={ondecrease}>-</button>
    </div>
  );
};

export default Counter;

---

여러개의 prop 전달 방법

import React from "react";
import "./App.css";
import Counter from "./Counter";
import MyHeader from "./MyHeader";

function App() {
  // 여러 prop을 담은 객체 생성
  const propsObj = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
    initialValue: 10,
  };

  return (
    <div>
      <MyHeader />
      // props에 객체 자체를 전달
      <Counter obj={propsObj} />
	  // 객체를 spread 연산자를 이용해 펼쳐서 전달
      <Counter {...propsObj} />
    </div>
  );
}

export default App;

• 자식 컴포넌트에서 비구조화 할당을 통해 특정 값만 받는 것도 가능

const Counter = ({ initialValue }) => {
  console.log(initialValue);
	...
}

비구조화할당 필기 참고
https://velog.io/@sungwoncho94/9.-%EA%B5%AC%EC%A1%B0-%EB%B6%84%ED%95%B4-%ED%95%A0%EB%8B%B9

defaultPops

• 전달받지 못한 prop의 기본값을 설정하여 error 방지

function App() {
  const propsObj = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
    // initialValue: 10,
  };
  ...
}
// undefined 
// undefined에 숫자를 더하거나 뺄 수 없어서 NaN 값이 나오고 에러 발생

// Counter.js

const Counter = ({ initialValue }) => {

  const [count, setCount] = useState(initialValue);

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={ondecrease}>-</button>
    </div>
  );
};

// Counter 컴포넌트의 prop 기본값을 설정해줌
Counter.defaultProps = {
  initialValue: 10,
};

export default Counter;

• 부모 컴포넌트에서 Counter 컴포넌트에 initialValue라는 prop을 내려주지 않았더라도, Counter.defaltProps에 의해 Counter 컴포넌트의 initialValue 값은 10으로 지정됨
  

---

props로 동적 데이터 전달

• 동적 데이터(state)를 prop으로 받아 홀/짝 구분

// OddEvenResult.js
const OddEvenResult = ({ count }) => {
  // count 값은 Counter 컴포넌트가 가지고 있기 때문에, Counter로 부터 props를 통해 받아야함
  return (
    <div>
        {count % 2 === 0 ? <span>짝수</span> : <span>홀수</span>}
    </div>
  );
};

export default OddEvenResult;

// Counter.js
import React, { useState } from "react";
// OddEvenResult 컴포넌트 import
import OddEvenResult from "./OddEvenResult";

const Counter = ({ initialValue }) => {

  const [count, setCount] = useState(initialValue);

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={ondecrease}>-</button>
      {/* OddEvenResult 를 자식 컴포넌트로 불러온 후, count라는 이름으로 count prop을 넘겨줌 */}
      <OddEvenResult count={count} />
    </div>
  );
};

Counter.defaultProps = {
  initialValue: 10,
};

export default Counter;

react 컴포넌트가 re-render 되는 조건

• 자신의 props가 변경될때마다 re-render됨
• 부모로부터 받는 props가 변경되면 re-render됨
• 부모 컴포넌트가 변경되면 자식 컴포넌트로 re-render됨

---

props로는 컴포넌트 자체도 전달 가능

• 컴포넌트를 props로 전달해서 다른 컴포넌트 안에 넣기

// Container.js
const Container = ({ children }) => {
  // children 이라는 이름으로 컴포넌트 자체를 props로 받아옴
  console.log(children);
  return (
    <div style={{ margin: 20, padding: 20, border: "1px solid #ddd" }}>
      {children}
      {/* props로 받은 children 추가 */}
    </div>
  );
};

export default Container;

• console.log('children') 결과
  - react.element 자체를 props로 받아오고 있음
  

// App.js
import React from "react";
import "./App.css";
import Container from "./Container";
import Counter from "./Counter";
import MyHeader from "./MyHeader";

function App() {
  return (
    <Container>
      {/* Container 컴포넌트를 import하여 그 안에 나머지 컴포넌트들을 넣어줌 */}
      <MyHeader />
      <Counter />
      {/* Container 컴포넌트 안에 포함되어있는 Myheader와 Counter컴포넌트가 통째로 Container 컴포넌트의 {children} props로 전달됨 */}
    </Container>
  );
}

export default App;