리액트

[컴포넌트와 상태] Props와 State, State와 자식 컴포넌트

지지잉잉 2023. 6. 23. 18:45

# Props와 State

동적으로 변하는 값인 리액트의 State 역시 일종의 값이므로 Props로 전달할 수 있습니다. 이번에는 Body에 자식 컴포넌트를 만들고, Body의 State를 Props로 전달합니다.

import { useState } from "react";

function Viewer({ number }) {
  return <div>{number % 2 === 0 ? <h3>짝수</h3> : <h3>홀수</h3>}</div>;
}

function Body() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    setNumber(number + 1);
  };
  const onDecrease = () => {
    setNumber(number - 1);
  };

  return (
    <div>
      <h2>{number}</h2>
      <Viewer number={number} />

      <div>
        <button onClick={onDecrease}>-</button>
        <button onClick={onIncrease}>+</button>
      </div>
    </div>
  );
}

export default Body;

(왼) State 값이 1일 때 (오) State 값이 2일 때

여기서 알 수 있는 중요한 사실이 있습니다. 자식 컴포넌트는 Props로 전달된 State 값이 변하면 자신도 리렌더된다는 사실입니다. 즉, 부모에 속해 있는 State(number) 값이 변하면 Viewer 컴포넌트에서 구현한 '짝수', '홀수' 값도 따라서 변합니다.

# State와 자식 컴포넌트

부모의 State 값이 변하면 해당 State를 Props로 받은 자식 컴포넌트 역시 리렌더된다는 걸 알았습니다. 그렇다면 부모 컴포넌트가 자식에게 State를 Props로 전달하지 않는 경우는 어떻게 될까요? 그래도 부모 컴포넌트의 State가 변하면 자식 컴포넌트도 리렌더될까요?

import { useState } from "react";

function Viewer() {
  console.log("viewer component update!");
  return <div>Viewer</div>;
}

function Body() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    setNumber(number + 1);
  };
  const onDecrease = () => {
    setNumber(number - 1);
  };

  return (
    <div>
      <h2>{number}</h2>
      <Viewer />
      <div>
        <button onClick={onDecrease}>-</button>
        <button onClick={onIncrease}>+</button>
      </div>
    </div>
  );
}

export default Body;

콘솔에서 4번의 viewer component update!가 출력되었습니다. 첫 번째 출력은 Viewer 컴포넌트를 페이지에 처음 렌더링할 때 출력된 것입니다. 나머지 5번은 부모인 Body 컴포넌트의 State가 변할 때마다 출력되었습니다. 리액트에서는 부모 컴포넌트가 리렌더되면 자식도 함께 리렌더됩니다. 사실 지금의 Viewer는 Body 컴포넌트의 State가 변한다고 해서 리렌더될 이유가 없습니다. Viewer 컴포넌트의 내용에는 변한 게 없기 때문입니다. 

 

참조 | 한입 크기로 잘라먹는 리액트