본문 바로가기
개발/웹 개발

Day 21: React Hooks (useState와 useEffect)

$ecu_Log 2024. 8. 24.

1. 오늘의 학습 목표

학습 목표: 기존의 클래스형 컴포넌트에서만 가능했던 상태(State) 관리와 생명주기(Lifecycle) 기능을 함수형 컴포넌트에서 사용할 수 있게 해주는 React Hooks의 개념을 이해합니다. 가장 핵심적인 Hook인 useState와 useEffect의 사용법을 익혀 동적인 컴포넌트를 만듭니다.

핵심 요약: Hooks는 함수형 컴포넌트를 React의 모든 기능을 갖춘 일등 시민으로 만들어준 혁신적인 기능입니다. useState로 컴포넌트의 기억(상태)을 만들고, useEffect로 특정 시점의 동작을 제어할 수 있습니다.

2. 핵심 개념 파헤치기

2.1. React Hooks란 무엇인가?

Hook은 React 버전 16.8부터 도입된 기능으로, 함수형 컴포넌트 안에서 React의 상태 관리 및 생명주기 관련 기능에 "갈고리를 걸어" 연동할 수 있게 해주는 특별한 함수들입니다. use로 시작하는 이름을 가지며(예: useState), 컴포넌트의 최상위 레벨에서만 호출해야 하는 등의 규칙이 있습니다.

 

2.2. useState: 상태(State)를 관리하는 Hook

useState는 함수형 컴포넌트가 자신만의 상태를 가질 수 있게 해주는 Hook입니다. 상태란 컴포넌트가 기억해야 할 값으로, 이 상태가 변경되면 React는 컴포넌트를 자동으로 다시 렌더링하여 화면을 업데이트합니다.

기본 문법: const [state, setState] = useState(initialState);

  • state: 현재 상태 값.
  • setState: 상태를 업데이트하는 함수. 이 함수를 호출해야만 React가 변화를 감지하고 리렌더링합니다.
  • initialState: 상태의 초기값.

2.3. useEffect: 사이드 이펙트를 처리하는 Hook

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업(Side Effect)을 수행하도록 설정하는 Hook입니다. 여기서 사이드 이펙트란, 데이터 가져오기(fetching), 구독(subscription) 설정, 수동으로 DOM 조작하기 등 렌더링 자체와는 무관한 부가적인 작업을 의미합니다.

기본 문법: useEffect(() => { /* 실행할 작업 */ }, [dependencies]);

() => { ... }: 수행할 작업을 담는 콜백 함수.

[dependencies]: 의존성 배열. 이 배열 안의 값이 변경될 때만 콜백 함수가 실행됩니다.

  • 배열을 생략하면: 매 렌더링마다 실행됩니다.
  • [] (빈 배열): 컴포넌트가 처음 마운트될 때 한 번만 실행됩니다. (componentDidMount와 유사)
  • [value]: value가 변경될 때마다 실행됩니다. (componentDidUpdate와 유사)

3. 코드로 배우기

3.1. 구현 목표

버튼을 누르면 숫자가 1씩 증가하는 카운터 컴포넌트를 만듭니다. 숫자가 바뀔 때마다 문서의 타이틀도 함께 변경되도록 useState와 useEffect를 사용합니다.

 

3.2. [1단계: HTML 환경 설정 및 컴포넌트 준비]

Day 20과 동일한 CDN 환경을 사용합니다. Counter라는 이름의 함수형 컴포넌트를 만듭니다.

<!-- ... (Day 20과 동일한 head, body, script 태그) ... -->
<script type="text/babel">
  function Counter() {
    // 여기에 Hook을 사용합니다.
    return (
      <div>
        <p>You clicked 0 times</p>
        <button>Click me</button>
      </div>
    );
  }
  ReactDOM.render(<Counter />, document.getElementById('root'));
</script>

 

3.3. [2단계: useState로 카운터 상태 추가하기]

useState를 호출하여 count라는 상태와 setCount라는 업데이트 함수를 만듭니다. 버튼의 onClick 이벤트 핸들러에서 setCount를 호출하여 count를 1 증가시킵니다.

//<script type="text/babel"> 태그 안에 작성
function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

3.4. [3단계: useEffect로 문서 타이틀 변경하기]

useEffect를 사용하여 count 상태가 변경될 때마다 문서의 타이틀을 업데이트합니다. 의존성 배열에 [count]를 넣어 count가 바뀔 때만 이 효과가 실행되도록 합니다.

//<script type="text/babel"> 태그 안에 작성
function Counter() {
  const [count, setCount] = React.useState(0);

           //count가 변경될 때마다 실행됩니다.
  React.useEffect(() => {
    document.title = `You clicked ${count} times`;
    console.log(`${count}로 타이틀이 변경되었습니다.`);
  }, [count]);

  return (
    //... (이전 JSX와 동일)
  );
}

4. 전체 코드

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>React Hooks</title>
  <script crossorigin src="[https://unpkg.com/react@17/umd/react.development.js](https://unpkg.com/react@17/umd/react.development.js)"></script>
  <script crossorigin src="[https://unpkg.com/react-dom@17/umd/react-dom.development.js](https://unpkg.com/react-dom@17/umd/react-dom.development.js)"></script>
  <script src="[https://unpkg.com/@babel/standalone/babel.min.js](https://unpkg.com/@babel/standalone/babel.min.js)"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    function Counter() {
         //1. useState: 'count'라는 상태를 만들고 초기값을 0으로 설정
      const [count, setCount] = React.useState(0);

          //2. useEffect: 'count' 상태가 변경될 때마다 부수 효과를 실행
     //의존성 배열에 [count]가 있으므로, count가 바뀔 때만 함수가 실행됨
      React.useEffect(() => {
        document.title = `You clicked ${count} times`;
      }, [count]);
      
        //의존성 배열이 빈 배열[]이므로, 최초 렌더링 시 한 번만 실행됨
      React.useEffect(() => {
        console.log("컴포넌트가 처음 렌더링되었습니다.");
      }, []);

      return (
        <div>
          <p>You clicked {count} times</p>
          {/* 버튼 클릭 시 setCount 함수를 호출하여 count 상태를 업데이트 */}
          <button onClick={() => setCount(prevCount => prevCount + 1)}>
            Click me
          </button>
        </div>
      );
    }

    ReactDOM.render(<Counter />, document.getElementById('root'));
  </script>
</body>
</html>
 

    function Counter() {
      // 1. useState: 'count'라는 상태를 만들고 초기값을 0으로 설정
      const [count, setCount] = React.useState(0);

      // 2. useEffect: 'count' 상태가 변경될 때마다 부수 효과를 실행
      // 의존성 배열에 [count]가 있으므로, count가 바뀔 때만 함수가 실행됨
      React.useEffect(() => {
        document.title = `You clicked ${count} times`;
      }, [count]);
      
      // 의존성 배열이 빈 배열[]이므로, 최초 렌더링 시 한 번만 실행됨
      React.useEffect(() => {
        console.log("컴포넌트가 처음 렌더링되었습니다.");
      }, []);

      return (
        <div>
          <p>You clicked {count} times</p>
          {/* 버튼 클릭 시 setCount 함수를 호출하여 count 상태를 업데이트 */}
          <button onClick={() => setCount(prevCount => prevCount + 1)}>
            Click me
          </button>
        </div>
      );
    }

    ReactDOM.render(<Counter />, document.getElementById('root'));
저작자표시 비영리 변경금지 (새창열림)

'개발 > 웹 개발' 카테고리의 다른 글

Day 24: 백엔드의 역할과 책임  (1) 2024.08.28
Day 22-23: 클라이언트 사이드 라우팅과 전역 상태 관리  (1) 2024.08.27
Day 20: React 기초 (JSX와 생명주기)  (1) 2024.08.24
Day 19: 컴포넌트 기반 아키텍처 (CBA)  (2) 2024.08.22
Day 18: ES6+ 필수 문법  (0) 2024.08.21

'개발/웹 개발' 관련글

티스토리툴바