React에서 key 속성이란?

React에서 key속성이란?

• React는 컴포넌트를 구별하기 위해 key를 사용한다.
• key가 바뀌면 기존 컴포넌트를 삭제하고 새 컴포넌트를 생성한다.

key를 사용한 렌더링 제어 예시

key를 조건적으로 변경해 렌더링을 강제로 초기화하거나, 막는 방식이다.

const App = () => {
  const [isVisible, setIsVisible] = React.useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Component
      </button>
      <ChildComponent key={isVisible ? "show" : "hide"} />
    </div>
  );
};

const ChildComponent = () => {
  console.log("렌더링 발생!");
  return <p>Child Component</p>;
};

 

동작방식

1. isVisible이 true 일 때 key="show"

2. isVisible이 false로 바뀌면 key="hide"

3. key가 변경되면 React는 기존 컴포넌트를 제거하고 새 컴포넌트를 생성 → 렌더링 발생

 

---

 

렌더링 강제 초기화 활용

1. 컴포넌트 상태 초기화

특정 상태를 재설정하고 싶을 때, key를 변경하여 초기화 효과를 줄 수 있다.

const ResettableComponent = ({ resetKey }) => {
  React.useEffect(() => {
    console.log("초기화 발생!");
  }, []);

  return <p>컴포넌트 초기화됨!</p>;
};

function App() {
  const [key, setKey] = React.useState(0);

  return (
    <div>
      <button onClick={() => setKey(key + 1)}>초기화</button>
      <ResettableComponent resetKey={key} />
    </div>
  );
}

 

2. 조건적 렌더링에서 변경

조건에 따라 key를 변경해 렌더링을 막거나 초기화할 수 있다.

const App = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count +1</button>
      <ChildComponent key={count > 3 ? "visible" : "hidden"} />
    </div>
  );
};