React에서 마운트와 언마운트란?

| 서론

안녕하세요, 팡일입니다.

React를 공부하다 보면 마운트(Mount)와 언마운트(Unmount)라는 표현을 자주 접하게 됩니다. 단어만 보면 어렵게 느껴질 수 있지만, 간단히 말하면 컴포넌트가 화면에 나타나고 사라지는 과정을 의미합니다.

이번 글에서는 React 컴포넌트의 마운트와 언마운트가 무엇인지 간단하게 알아보겠습니다.

| 마운트란?

마운트는 React 컴포넌트가 처음 생성되어 화면에 나타나는 것을 의미합니다.

예를 들어 버튼을 눌렀을 때 모달이 화면에 나타난다면, 모달 컴포넌트가 마운트된 것입니다.

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        모달 열기
      </button>

      {isOpen && <Modal />}
    </>
  );
}

처음에는 isOpen이 false이므로 Modal 컴포넌트가 존재하지 않습니다.

버튼을 눌러 isOpen이 true가 되면 Modal 컴포넌트가 생성되어 화면에 나타납니다. 이 과정을 마운트라고 합니다.

| 언마운트란?

언마운트는 반대로 화면에 있던 컴포넌트가 제거되는 것을 의미합니다.

function App() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <>
      <button onClick={() => setIsOpen(false)}>
        모달 닫기
      </button>

      {isOpen && <Modal />}
    </>
  );
}

버튼을 눌러 isOpen이 false가 되면 Modal 컴포넌트가 화면에서 제거됩니다. 이 과정을 언마운트라고 합니다.

정리하면 다음과 같습니다.

• 모달을 열면 Modal 컴포넌트가 마운트됩니다.

• 모달을 닫으면 Modal 컴포넌트가 언마운트됩니다.

| useEffect로 확인하기

React에서는 useEffect를 사용하여 컴포넌트의 마운트와 언마운트 시점에 필요한 작업을 처리할 수 있습니다.

function Modal() {
  useEffect(() => {
    console.log('모달이 마운트되었습니다.');

    return () => {
      console.log('모달이 언마운트되었습니다.');
    };
  }, []);

  return <div>모달입니다.</div>;
}

빈 배열 []을 전달한 useEffect의 내부 코드는 컴포넌트가 마운트될 때 실행됩니다.

그리고 useEffect가 반환하는 함수는 컴포넌트가 언마운트될 때 실행됩니다. 이를 정리 함수(Cleanup Function)라고 합니다.

| 언마운트할 때 정리가 필요한 이유

컴포넌트가 사라져도 해당 컴포넌트에서 등록한 타이머나 이벤트가 계속 동작할 수 있습니다.

따라서 언마운트될 때 다음과 같은 작업을 정리해야 합니다.

• setInterval, setTimeout과 같은 타이머

• addEventListener로 등록한 이벤트

• WebSocket 등의 연결

• 외부 데이터나 상태에 대한 구독

useEffect(() => {
  const timer = setInterval(() => {
    console.log('실행 중');
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

위 코드에서는 컴포넌트가 마운트될 때 타이머를 시작하고, 언마운트될 때 clearInterval로 타이머를 종료합니다.

이러한 정리 작업은 컴포넌트가 사라진 뒤에도 불필요한 코드가 계속 실행되는 것을 방지합니다.

| 리렌더링과는 무엇이 다를까?

마운트와 리렌더링은 서로 다른 개념입니다.

마운트는 컴포넌트가 처음 화면에 나타나는 것이고, 리렌더링은 이미 화면에 있는 컴포넌트가 상태나 속성의 변화로 다시 그려지는 것입니다.

const [count, setCount] = useState(0);

count가 변경되어 컴포넌트가 다시 그려지는 것은 리렌더링입니다. 컴포넌트가 화면에서 제거되었다가 다시 생성된 것이 아니므로 새로운 마운트는 아닙니다.

| 결론

React에서 마운트는 컴포넌트가 생성되어 화면에 나타나는 것, 언마운트는 화면에 있던 컴포넌트가 제거되는 것을 의미합니다.

컴포넌트가 마운트될 때는 필요한 작업을 시작하고, 언마운트될 때는 타이머, 이벤트, 구독 등을 정리해야 합니다.

처음에는 낯선 용어처럼 느껴질 수 있지만, 다음과 같이 기억하면 간단합니다.

마운트는 화면에 등장하는 것, 언마운트는 화면에서 퇴장하는 것입니다.