한입 크기로 잘라 먹는 리액트 - props

Props

<Counter initialValue={5}/>

부모 컴포넌트에서 자식 컴포넌트 (Counter)에게 어떤 값을 이름을 붙여 전달하는 것은 Props라 한다. 

 

Counter.js

import React, { useState } from "react"; //상태를 사용하겠다고 메소드를 추가하기
import OddEvenResult from "./OddEvenResult";

//부모에서 받아온 이름을 매개변수로 사용
const Counter = ({ initialValue }) => {
  //비구조화 할당, initialValue만 꺼내서 씀
  const [count, setCount] = useState(initialValue);
  //배열을 반환하고 배열의 비구조화 할당을 통해서 0번째 인덱스 카운트, 1번째 인덱스 카운트 해서 받아옴
  //userState 0으로 초기화됨

  const onIncrease = () => {
    setCount(count + 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 = {
  initialValue: 0,
};
//부모 컴포넌트에서 안가져와도 이렇게 고정 가능
//전달받지 못한 props를 기본값을 설정하여 에러 방지가능
export default Counter;

 

App.js

import React from "react";
import Counter from "./Counter";
import MyHeader from "./MyHeader";
import Countainer from "./Countainer";

function App() {
  const number = 5;

  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    //자식 컴포넌트에게 전달해야하는 Prop을 객체로 전달
  };
  return (
    <Countainer>
      <div>
        <MyHeader />
        <Counter {...counterProps} />
        {/* 객체 spread 연산자로 전달하기 */}
      </div>
    </Countainer>
  );
}

export default App;

객체를 한꺼번에 전달하기 위해서 위에 만들고 spread 연산자로 전달하면 편하다

 

 

OddEvenResult.js

const OddEvenResult = ({count}) =>{
    // console.log(count);
    console.log("render");
    return <>{count % 2 === 0? "짝수" : "홀수"}</>;
    // 부모가 내려주는 props를 변경하면 다시 랜더함, 
    //1. 본인이 관리하고 본인이 가진 state가 바뀔때마다 rerender가 됨
    //2. 나에게 내려오는 props가 바뀔때마다 rerender됨
    //3. 내부모가 rerender가 되면 나도 rerender됨
};

export default OddEvenResult;

 

 

Countainer.js

const Countainer = ({children}) =>{
    console.log(children);
    return (
        <div style={{margin:20, padding:20, border:"1px solid gray"}}>
            {children}
        </div>
        );
};
export default Countainer;

 

완성본

+를 누르면 +1이 되고 -를 누르면 -1이 된다.  짝수면 짝수라고 글자가 나오고 홀수면 홀수라고 나온다.