01 10 리액트 props 는 뭘까

import './App.css';
import Number from './Number';

function App() {
  return (
<Number value = {10}/> // 1번
  );
}

export default App;

//1번.  상위 컴포넌트에서 하위 컴포넌트에게 어떤 값을 이름을 붙여 전달하는 방식 -> props
//-> App 컴포넌트에서 Number 컴포넌트로 10이란 값을 전달 
// JSX에서 props를 전달할 때는 {}를 사용하여 값을 감싸고, props의 이름을 명시
//props 는 properties의 줄임말

 

export default function Number(props) { // 1번 
  console.log(props) //2번

  const [number, setNumber] = useState(0)

  const add = () =>{
    setNumber(number+1) 
    console.log(number)
  }

  const minus = () => {
    setNumber(number - 1)
    console.log(number)
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={add}>+</button>
      <button onClick={minus}>-</button>
    </div>
  )
}

// 1번. 파라미터 값으로 prop를 설정하고
// 2번. console.log(props)룰 출력하면 정상적으로 App에서 props로 전달한 값 10을 받아온것을 확인할 수 있다.

 

결과 -> 

-> 객체 안에 담겨서 10 전달 

 

export default function Number(props) {
  console.log(props)

  const [number, setNumber] = useState(props.value) // 1번
  
  //1번. props가 객체로 전달이 되었으니 .표기법을 통해서 접근

 

많은 props를 자식컴포넌트에 한번에 전달해야 되는 경우에는 객체를 만들어 한번에 전달 

 

function App() {

  const numberProps = {
    value: 10,
    a: 1,
    b: 2,
    c: 3,
    d: 4,
  };
  
  return <Number {...numberProps} />; // 1번
}

export default App;

// 1번. App컴포넌트에서 스프레드 문법을 통해 객체를 펼쳐서 전달
//객체를 전개할 때는 {...numberProps}와 같이 중괄호 안에 사용

 

export default function Number({b}) {

  const [number, setNumber] = useState(b)

  const add = () =>{
    setNumber(number+1) // set
    console.log(number)
  }

  const minus = () => {
    setNumber(number - 1)
    console.log(number)
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={add}>+</button>
      <button onClick={minus}>-</button>
    </div>
  )
}
//Number컴포넌트에는 객체 {b} 를 넘겨주면 nubmer 초기값 2로 설정