한 입 크기로 잘라먹는 리액트 6장: 라이프 사이클과 리액트 개발자 도구

1. 리액트 컴포넌트와 라이프 사이클

리액트 컴포넌트의 라이프 사이클 3단계

리액트 컴포넌트의 라이프 사이클은 크게 세 단계로 나뉩니다: 마운트(Mount), 업데이트(Update), 언마운트(Unmount).

1. 마운트 (Mount, 탄생)

마운트는 컴포넌트가 처음으로 페이지에 렌더링될 때 발생합니다. 이 단계에서 컴포넌트는 초기 설정을 수행하고, 필요한 초기 데이터를 가져오는 등의 작업을 할 수 있습니다.

• constructor: 컴포넌트가 생성될 때 호출됩니다. 초기 상태를 설정하거나 인스턴스 변수들을 초기화할 수 있습니다.
• componentDidMount: 컴포넌트가 첫 번째 렌더링을 마친 후 호출됩니다. 이 시점에서 DOM 요소들이 모두 준비되어 있기 때문에, 초기화 작업이나 외부 데이터 가져오기 등을 수행할 수 있습니다.

2. 업데이트 (Update, 갱신)

업데이트는 컴포넌트의 상태(state)나 속성(props)이 변경될 때 발생합니다. 이 단계에서는 컴포넌트가 새로운 상태나 속성에 맞게 다시 렌더링됩니다.

• shouldComponentUpdate: 컴포넌트가 리렌더링될지 말지를 결정합니다. 성능 최적화를 위해 사용됩니다.
• componentDidUpdate: 컴포넌트가 업데이트를 마친 후 호출됩니다. 상태가 변경된 후에 어떤 작업을 해야 할 때 사용됩니다.

3. 언마운트 (Unmount, 사망)

언마운트는 더 이상 컴포넌트를 페이지에 표시하지 않을 때 발생합니다. 이 단계에서는 컴포넌트가 메모리에서 제거되기 전에 필요한 정리 작업을 수행할 수 있습니다.

• componentWillUnmount: 컴포넌트가 언마운트되기 직전에 호출됩니다. 타이머를 해제하거나, 구독을 취소하는 등 정리 작업을 수행할 수 있습니다.

리액트 훅으로 라이프 사이클 제어하기

리액트 훅을 사용하면 함수형 컴포넌트에서도 클래스형 컴포넌트의 라이프 사이클 메서드와 동일한 기능을 구현할 수 있습니다. useEffect 훅을 사용하면 컴포넌트의 라이프 사이클을 쉽게 제어할 수 있습니다.

 

 

2. useEffect

리액트 기본 개념: useEffect와 useState

리액트는 웹사이트를 쉽게 만들 수 있는 도구예요. 이 도구를 사용하면 복잡한 웹사이트도 쉽게 만들 수 있다.

리액트에는 useEffect와 useState라는 중요한 도구가 있다

 

1. useState란?

useState는 웹사이트의 상태(변하는 값)를 관리하는 도구이다.

예를 들어, 버튼을 클릭할 때마다 숫자가 증가하는 기능을 만들고 싶다면 useState를 사용한다.

 

useState 사용 예시:

import React, { useState } from 'react';

function App() {
  // count라는 변수를 만들고, 이 변수를 바꿀 수 있는 setCount라는 함수를 만들어요.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 숫자: {count}</p>
      {/* 버튼을 클릭하면 count 변수가 1씩 증가해요. */}
      <button onClick={() => setCount(count + 1)}>숫자 증가</button>
    </div>
  );
}

export default App;

위 코드에서 useState(0)는 count라는 변수를 만들고, 처음 값(초기 값)을 0으로 설정한다.

setCount라는 함수는 count 변수를 바꿀 때 사용한다.

 

2. useEffect란?

useEffect는 웹사이트에서 특정 값이 변할 때마다 어떤 일을 할 수 있게 도와주는 도구이다.

예를 들어, 버튼을 클릭해서 숫자가 바뀔 때마다 콘솔에 메시지를 출력하고 싶다면 useEffect를 사용한다.

 

useEffect 사용 예시:

import React, { useState, useEffect } from 'react';

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

  // count 변수가 바뀔 때마다 이 함수가 실행돼요.
  useEffect(() => {
    console.log('count 업데이트:', count);
  }, [count]);

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={() => setCount(count + 1)}>숫자 증가</button>
    </div>
  );
}

export default App;

useEffect는 count 변수가 바뀔 때마다 콘솔에 'count 업데이트:'라는 메시지와 함께 새로운 count 값을 출력

 

useState와 useEffect의 차이

• useState: 웹사이트에서 변하는 값을 관리한다. (예를 들어, 버튼을 클릭해서 숫자가 증가하는 기능을 만들 때 사용)
• useEffect: 특정 값이 변할 때마다 어떤 일을 할 수 있게 도와준다. (예를 들어, 숫자가 바뀔 때마다 콘솔에 메시지를 출력하는 기능을 만들 때 사용)

언제 사용하나요?

• useState: 웹사이트에서 사용자 입력이나 버튼 클릭 등으로 값이 변할 때 사용
• useEffect: 값이 변할 때마다 특정 작업(예: 데이터 가져오기, 콘솔 로그 출력)을 하고 싶을 때 사용.

---

 

 

리액트 useEffect와 컴포넌트 라이프 사이클

1. 페이지 새로고침과 프로젝트 초기화

먼저, 페이지에서 새로고침(F5 키)을 누르면 프로젝트 페이지와 콘솔이 모두 초기화된다

실습을 하다 보면 기존에 쌓인 작업을 제거하고 싶을 때 새로고침을 사용하면 편리하다

 

2. 컴포넌트 마운트 제어하기

컴포넌트가 처음 화면에 나타날 때 어떤 작업을 하고 싶다면, 이를 '컴포넌트 마운트 제어'라고한다.

예를 들어, App 컴포넌트를 다음과 같이 수정해보자

import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("컴포넌트 마운트됨");
  }, []);

  return <div>안녕하세요!</div>;
}

export default App;

여기서 useEffect 훅을 사용하면, App 컴포넌트가 처음 화면에 나타날 때마다 "컴포넌트 마운트됨"이라는 메시지가 콘솔에 출력된다.

 

3. 컴포넌트 언마운트 제어하기

컴포넌트가 화면에서 사라질 때, 즉 '언마운트'될 때 어떤 작업을 하고 싶을 때도 있다.

이를 위해 '클린업(Cleanup)' 기능을 사용한다.

클린업은 '청소'라는 의미로, 컴포넌트가 사라질 때 정리 작업을 하는 것이다.

예를 들어, App 컴포넌트에 간단한 인터벌(interval)을 추가해보자.

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const intervalID = setInterval(() => {
      console.log("깜빡");
    }, 1000);

    return () => {
      console.log("클린업");
      clearInterval(intervalID);
    };
  }, []);

  return <div>안녕하세요!</div>;
}

export default App;

여기서 setInterval은 1초마다 "깜빡"이라는 메시지를 콘솔에 출력한다.

하지만, 컴포넌트가 사라질 때 clearInterval을 사용해 인터벌을 종료한다.

이를 통해 불필요한 작업이 계속되지 않도록 한다.

 

4. 조건부 렌더링과 컴포넌트 언마운트

이제 새로운 컴포넌트를 만들어보자

Even이라는 컴포넌트를 만들고, count 값이 짝수일 때만 이 컴포넌트를 렌더링하도록 해보자

// Even.js
function Even() {
  return <div>현재 카운트는 짝수입니다</div>;
}

export default Even;

// App.js
import { useState } from "react";
import Even from "./Even";

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <div>현재 카운트: {count}</div>
      {count % 2 === 0 && <Even />}
    </div>
  );
}

export default App;

이제 count 값이 짝수일 때만 Even 컴포넌트가 화면에 나타난다.

그리고 Even 컴포넌트가 언마운트될 때 콘솔에 메시지를 출력하도록 수정한다.

 

// Even.js
import { useEffect } from "react";

function Even() {
  useEffect(() => {
    return () => {
      console.log("Even 컴포넌트 언마운트");
    };
  }, []);

  return <div>현재 카운트는 짝수입니다</div>;
}

export default Even;

이제 페이지를 새로고침하고, <+1> 버튼을 클릭하면

count 값이 홀수로 바뀌면서 Even 컴포넌트가 사라질 때 "Even 컴포넌트 언마운트" 메시지가 콘솔에 출력된다.

 

정리

지금까지 useEffect 훅을 이용해 컴포넌트의 마운트와 언마운트를 제어하는 방법을 알아보았다.

useEffect는 리액트에서 컴포넌트 라이프 사이클을 제어하는 데 매우 유용한 훅이다.

 

 

UseRef

useRef는 React에서 제공하는 Hook 중 하나로, 주로 DOM 요소에 직접 접근하거나 컴포넌트의 상태 변화를 추적하지 않고도 값을 저장할 때 사용됩니다. useRef는 다음과 같은 상황에서 유용합니다:

1. DOM 요소 접근: useRef는 React에서 생성된 DOM 요소에 접근할 때 사용됩니다. 예를 들어, 포커스를 설정하거나 스크롤 위치를 조정할 때 유용합니다.
2. 값 저장: 컴포넌트가 다시 렌더링 되더라도 값이 초기화되지 않도록 값을 저장할 수 있습니다. 일반적인 상태 변수와 달리, useRef로 저장된 값이 바뀌어도 컴포넌트는 다시 렌더링되지 않습니다.

다음은 useRef를 사용하는 간단한 예입니다:

import React, { useRef, useEffect } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    // 컴포넌트가 마운트될 때 input 요소에 포커스를 설정합니다.
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
}

export default FocusInput;

이 예제에서는 useRef를 사용하여 input 요소에 접근하고, 컴포넌트가 마운트될 때 해당 요소에 포커스를 설정합니다. inputRef.current는 DOM 요소를 가리키며, 이를 통해 직접 DOM 조작이 가능합니다.

useRef는 이러한 상황 외에도 다양한 용도로 활용될 수 있으며, 특히 상태 변화와 관계없이 특정 값을 참조할 필요가 있을 때 매우 유용합니다.

 

 

요약

• useRef: DOM 요소 접근 및 값 저장 (렌더링에 영향 없음).
• useState: 상태 관리 (상태 변경 시 렌더링).
• useEffect: 부수 효과 처리 (렌더링 후 실행).

각각의 Hook은 특정한 목적과 상황에 맞게 사용되어, React 컴포넌트를 더욱 강력하고 유연하게 만들어 줍니다.