값을 전달할때 Props를 사용한다.

정적인 값 전달

1. 전달 방법

import "./App.css";
import MyHearder from "./MyHeader";
import Counter from "./Counter";

function App() {
  let name = "shipjh";

  return (
    <div className="App">
      <MyHearder />
      **<Counter a={1} initalValue={5} />** // 자식에게 전달할 것들을 기술하면 자식에서 받을 수 있다.
    </div>
  );
}

export default App;

import React, { useState } from "react";

const Counter = (**props**) => { //  파라미터 변수를 지정하면 전달받을 수 있다.
  console.log(props); // 객체형태로 받아진다. {a: 1, initalValue: 5}

  //useState(0)  0에서 출발
  const [count, setCount] = useState(0);

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

  const mius = () => {
    setCount(count - 1);
  };

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

export default Counter;

2. 객체로 전달

객체형태로도 전달이 가능하다.

import "./App.css";
import MyHearder from "./MyHeader";
import Counter from "./Counter";

function App() {
  let name = "shipjh";

  **const countProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    initalValue: 5,
  };**

  return (
    <div className="App">
      <MyHearder />
      <Counter **{...countProps}** /> //{a: 1, b: 2, c: 3, d: 4, initalValue: 5}을 전달
    </div>
  );
}

export default App;

자식컴포넌트에서 중괄호 처리하면 객체내의 키값으로 그 값만 꺼낼 수도 있다.

import React, { useState } from "react";

const Counter = (**{ initalValue }**) => { **//5**
  console.log(initalValue); **//5**

  //useState(0)  0에서 출발
  const [count, setCount] = useState(0);

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

  const mius = () => {
    setCount(count - 1);
  };

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

export default Counter;

3. 전달하지 않은 값 default Value