React / Props

컴포넌트에 데이터를 전달하는 방법

⇒ 부모 컴포넌트에서 자식 컴포넌트에게 이름을 붙여서 값을 전달하는 것 : Props

prop = property

부모 컴포넌트에서 받아온 props를

자식 컴포넌트에서는 매개변수(파라미터)로 사용한다.

리액트는 부모 자식 사이에서만 props를 전달할 수 있다.

프로퍼티(property): 객체에 속한 변수를 의미. 예를 들어, 자동차라는 객체가 있다면 그 자동차의 색깔이나 브랜드, 최대속도 같은 것들이 프로퍼티.
비유를 들자면, 집에 있는 각종 물건들(텔레비전, 소파, 냉장고) 같은 것.
파라미터(parameter): 함수가 작동할 때 필요한 정보를 받기 위한 변수. 함수를 호출할 때 값을 넘겨주는데, 그 값을 받는 부분이 파라미터.
이건 친구한테 물건을 전달할 때, 너가 그 물건을 받을 손을 내밀면 그 손이 파라미터라고 생각하면 됨(?)

const Counter = (props) => {
	....

변화되는 값으로 사용하고 싶다면 useState() 옆에서 사용하면 된다.

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

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

function App() {
 

  const counterProps = {
    a : 1,
    b : 2,
    c : 3,
    d : 4,
    e : 5,
    initialValue : 5
  }
 
  return (
    <div >
      <MyHeader />
     <Counter {...counterProps} />
    </div>
  );
}

export default App;
//부모 컴포넌트에서 자식 컴포넌트에게 이름을 붙여서 값을 전달하는 것 = Props

Counter 태그 안에 너무 많은 Props를 전달하면 지저분하니까 저렇게 변수명을 걸어서 선언해줌.
그리고 나서 스프레드 연산자 {…counterProps}로 펼쳐주면
그대로 복사되니가 쉽게 사용 가능하다 !!

그 다음에 Counter 파일에서는

import React, {useState} from "react";

const Counter = ({initialValue}) => {

  
  //0에서 출발
  //1씩 증감하는
  //count 상태(state)

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

비구조화 할당으로 App.js 에서 객체로 선언된 initialValue를 Props 대신에 가져와서 사용해도 된다.

만약 부모 컴포넌트에서 깜박하고 props 값을 안 넣어줬다면?

자식 컴포넌트에서 defaultProps로 Props 값을 설정해주면 된다.

그러면 똑같이 Counter 에서 자식 컴포넌트에서만 설정해준 값이라도 화면에 잘 뜬다.

부모 컴포넌트에서 props안 넣어준 경우

function Page() {
  return <Button />;
}

자식 컴포넌트에서 defaultProps 설정

function Button(props) {
  return <button style={{ backgroundColor: props.color }}>클릭해봐!</button>;
}

Button.defaultProps = {
  color: 'blue'
};

부모 컴포에서 따로 설정안해줘도 자식 컴포에서 사용가능함!