✏️Props

• counter.js

import React, { useState } from "react"; //상태를 사용하겠다!
import OddEvenResult from "./OddEvenResult";

const Counter = ({ initialValue }) => {
  // props로 받을수있따.

  console.log(initialValue); //undefined

  // console.log(props);
  const [count, setCount] = useState(initialValue); // props 값 가져와서 초기값 설정

  const onIncrease = () => {
    setCount(count + 1);
  };

  //누를때마다 1씩 감소
  const onDecrease = () => {
    setCount(count - 1);
  };
  return (
    <div>
      <h2>{count}</h2> {/* 동적으로 변화해야되는 값 */}
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
      ⭐<OddEvenResult count={count} />
    </div>
  );
};
⭐
Counter.defaultProps = {
  //여기서 프롭스값 정해줄수있음
  // props값을 못가져오는 오류를 해결할 수 있음
  initialValue: 0,
};

export default Counter;

• App.js

// import "./App.css";
import MyHeaders from "./MyHeader";
// import MyFooter from "./MyFooter";
import Counter from "./Counter";

function App() {
  let number = 5;

  ⭐const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
    initialValue: 5,
  };

  return (
    <div>
      <MyHeaders />
      <Counter ⭐{...counterProps} />
      {/* 스프레드 연산자(비구조 할당)로 프롭스 가져오기 (아래와 비교)*/}
      {/* <Counter a={1} b={2} c={3} d={4} e={5} initialValue={5} /> */}
      {/* 너무 props가 길다. */}
      {/* prop: 부모에서 자식으로 값을 넘길 때  */}
    </div>
  );
}

export default App;

• props를 객체에 담아서 비구조할당으로 보낼수있다.

• OddEvenResult.js

const OddEvenResult = ({ count }) => {
  //부모가 내려주는 props가 변경이되면 리랜더한다.
  console.log(count);
  //홀수짝수 구분
  return <>{count % 2 === 0 ? "짝수" : "홀수"}</>;
};

export default OddEvenResult;

🤔리-랜더는 언제되는 걸까?

• 본인이 가진 state가 바뀔 떄마다 리랜더가 된다.
• 나에게 내려오는 props가 바뀌면 리랜더가 된다.
• 부모가 리랜더되면 자식도 리랜더 된다.

Children

• 가장 큰 컨테이너 요소

const Container = ({ ⭐children }) => {
  return (
    <div style={{ margin: 20, padding: 20, border: "1px solid gray" }}>
      {children}
    </div>
  );
};

export default Container;

• Container안에를 children으로 넘겨준다.

  return (
    ⭐<Container>
      {" "}
      {/* ⭐Container안에를 children으로 넘겨준다. */}
      <div>
        <MyHeaders />
        <Counter {...counterProps} />
        {/* 스프레드 연산자(비구조 할당)로 프롭스 가져오기 (아래와 비교)*/}
        {/* <Counter a={1} b={2} c={3} d={4} e={5} initialValue={5} /> */}
        {/* 너무 props가 길다. */}
        {/* prop: 부모에서 자식으로 값을 넘길 때  */}
      </div>
    </Container>
  );
}