[ReactJS로 영화 웹 서비스 만들기 실습] React - Hook & useEffect

IRISH·2024년 4월 18일

React 리액트

ReactJS-Movie-Web-Service

목록 보기

14/23

실습일자 : 2024.04.18

Hook이란?

React에서 Hook은 기능적 구성 요소 내에서 React 기능을 "연결"할 수 있게 해주는 특수 기능입니다.

Hooks는 클래스를 작성하지 않고 상태 및 기타 React 기능을 사용하는 방법으로 React 16.8에 도입되었습니다.

이를 통해 개발자는 보다 재사용 가능한 방식으로 논리를 구성하여 더 읽기 쉽고 유지 관리하기 쉬운 구성 요소를 작성할 수 있습니다.

useEffect란?

정의

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook
리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.
- 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었다.
- 즉, 라이프사이클 훅을 대체할 수 있게 되었다. (componentDidMount, componentDidUpdate, componentWillUnmount)

선언 및 사용법

import react, { useEffect } from "react";
useEffect(effect, [, deps]);

effect
- 렌더링 이후 실행할 함수(리액트는 이 함수를 기억 했다가 DOM 업데이트 후 불러낸다.)
- effect함수에서 함수를 return 할 경우 그 함수가 컴포넌트가 Unmount 될 때 정리의 개념으로 한 번 실행된다.
deps
- 배열의 형태로, 특정한 값이 변경될 때 effect함수를 실행 하고 싶을 경우 배열 안에 그 값을 넣어준다.
- 빈 배열을 입력할 경우 컴포넌트가 Mount 될 때에만 실행 된다.

코드

import { useEffect, useState } from "react";

function App() {
  const [number, setNumber] = useState(0);
  const onHandleClick = () => {
    setNumber((bef) => bef + 1);
  };
  console.log("Click Button Render!");
  useEffect(() => console.log("Render First Time Only..."), []);

  return (
    <div>
      <h3>This is irishNoah Web Page!</h3>
      <h1>{number}</h1>
      <button onClick={onHandleClick}>Click Here!</button>
    </div>
  );
}

export default App;

useEffect로 감싸지 않은 것
- console.log("Click Button Render!");
useEffect로 감싼 것
- console.log("Render First Time Only...")

화면

useEffect로 감싸지 않은 console.log("Click Button Render!");는 버튼을 클릭할 때마다 계속 콘솔에 찍히는 것을 알 수 있다(즉, rerender가 된다).
반면, useEffect로 감싼 console.log("Render First Time Only...");는 버튼을 클릭해도 콘솔에 찍히지 않는 것을 알 수 있다(즉, rerender가 되지 않는다).