[React] props.children, 상태 끌어올리기, state의 기준과 위치

suno·2022년 12월 7일

커스텀 컴포넌트의 children

<MyComponent></MyComponent>
커스텀 컴포넌트 사이의 JSX 요소들이 props.children으로 전달된다.

<MyComponent>텍스트</MyComponent>
위와 같이 사용하는 경우 MyComponent의 props.children === '텍스트'가 된다.

Passing Props to a Component

상태 끌어올리기 (lifting state up)

React는 단방향 데이터 흐름이라는 원칙에 따라 상위 컴포넌트 → 하위 컴포넌트로 데이터가 전달되어야 함.
하위 컴포넌트에서는 상위 컴포넌트의 데이터를 변경할 수 없음.

하위 컴포넌트에서 상위 컴포넌트 값을 변경하고 싶다면? 상태 끌어올리기를 사용하자.

상태 끌어올리기란? 상위 컴포넌트에 useState로 상태를 설정해주고 하위 컴포넌트에는 setState 함수를 전달해주는 것이다.
이렇게 하면 하위 컴포넌트에서는 데이터에 직접 접근하지 않고도 setState 함수를 통해 상위 컴포넌트의 데이터를 변경할 수 있다.

위와 같이 상위 컴포넌트 AppCounter에 Counter라는 하위 컴포넌트 두개가 있는 경우를 생각해보자.
각각 버튼을 클릭하면 AppCounter 내부의 count 값이 증가되고, 상위 컴포넌트는 totalCount 값을 가지고 있다.

하위 → 상위 컴포넌트로 데이터가 변경되는 흐름은 단방향 흐름에 맞지 않다.
Counter 컴포넌트의 props로 setTotalCount를 직접 넘겨주어서, 하위 컴포넌트에서 totalCount 상태를 변경할 수 있게 한다.

import { useState } from 'react';
import './App.css';
import Counter from './components/Counter';

export default function AppCounter() {
  const [totalCount, setTotalCount] = useState(0);

  return (
    <div className='container'>
      <div className='banner'>
        Total Count: {totalCount} {totalCount > 10 ? '🔥' : '❄️'}
      </div>
      <div className='counters'>
        <Counter total={totalCount} setTotalCount={setTotalCount} />
        <Counter total={totalCount} setTotalCount={setTotalCount} />
      </div>
    </div>
  );
}