React의 상태 유지 및 재설정

eeensu·2023년 8월 6일

React 기본

목록 보기

18/22

상태는 컴포넌트간에 격리된다. react는 UI 트리에서의 위치에 따라 어떤 상태가 어떤 컴포넌트에 속하는지 추적한다. state를 보존할 시기와 리렌더링 되는 사이에 state를 재설정할 시점을 제어할 수 있다.

UI 트리

브라우저는 많은 트리 구조를 사용하여 UI를 모델링한다. react는 또한 트리 구조를 사용하여 만든 UI를 관리하고 모델링합니다. react는 JSX에서 UI 트리를 만들며 그런 다음 React DOM은 해당 UI 트리와 일치하도록 브라우저 DOM 요소를 업데이트한다.

상태는 트리의 위치에 연결

컴포넌트 state를 제공할 때 상태가 구성 요소 내부에 "존재"한다고 생각할 수 있다. 그러나 state 실제로 컴포넌트보다 더 큰 react의 내부에 있다. react는 해당 컴포넌트가 UI 트리에 있는 위치에 따라 보유하고 있는 각 state 조각을 올바른 컴포넌트와 연결한다.

같은 컴포넌트의 state 동작법

그렇다면 똑같은 컴포넌트의 state는 서로 어떻게 동작할까? 같은 컴포넌트이기에 상태를 공유할까? 아니면 독립적일까?

import { useState } from 'react';

export default function App() {
  const counter = <Counter />;
  return (
    <div>
      {counter}
      {counter}
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  
  return (
    <div >    
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

결과는 위와 같이 독립적인 컴포넌트로 동작한다. 왜냐하면 이 두 <Counter /> 컴포넌트는 같은 레벨의 위치에서 렌더링되기 때문이다.

일반적으로 react를 사용하기 위해 이러한 위치에 대해 생각할 필요는 없지만 작동 방식을 이해하는 것이 향후의 추가적인 응용에 유용할 수 있다. 두 컴포넌트는 아래의 사진과 같이 운영된다.

그렇다면 만약 컴포넌트가 파괴되면 해당 state는 어떻게 될까? 같이 운영하는 컴포넌트의 state는 안전할까? 다음의 예제를 통해 살펴보자.

export default function Ex() {
    const counter = <Counter />;
    const [rightShow, setRightShow] = useState<boolean>(false);

    return (
      <div style={{ margin: 30 }}>
        <p>
            <label>
                <input type='checkbox' onChange={() => setRightShow(prev => !prev)}/>
                두번째 카운터를 삭제하려면 체크하세요!               
            </label>            
        </p>
        {counter}
        {!rightShow && counter}     
      </div>
    );
}
  
function Counter() {
    const [score, setScore] = useState(0);

    return (
        <div >    
            <h1>{score}</h1>
            <button onClick={() => setScore(score + 1)}>
                Add one
            </button>
        </div>
    );
}