React

React | React Hooks => useEffect()에 대해 알아보기

안녕하세요! NekoNyangYee입니다!
오늘 소개할 것은 바로 React Hooks 중 하나죠. 바로 useEffect에 대해 알아보도록 하겠습니다!

useEffect()

• 리액트 컴포넌트가 렌더링이 될 때마다 특정 작업을 실행할 수 있도록 하는 Hooks입니다.

• 컴포넌트가 mount 됐을 때

• 컴포넌트가 unmount 됐을 때

• 컴포넌트가 update 됐을 때 특정 처리가 가능합니다.

페이지가 처음 렌더링 되고 난 후 useEffect는 무조건 한번만 실행된다.
useEffect에 배열로 저장한 useState의 값이 변경되면 실행하게 된다.

• 즉 렌더링 혹은 변수의 값 또는 오브젝트가 달라지게 되면 그것을 감지하고 업데이트 해주는 함수입니다.

• useEffect는 콜백함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떤 함수 혹은 여러개의 함수들을 동작시킬 수 있습니다.

useEffect() 사용법

useEffect( function, deps )

기본 형태

• fumction: 수행하고자 하는 작업

• deps 배열 형태이며, 배열 안에는 검사하고자하는 특정 값 혹은 빈 배열을 집어넣는다.

import React, { useEffect } from "react";
 
useEffect(() => {
  console.log("마운트 될 때만 실행된다");
}, []);

간단한 예시

import "./App.css";
import React, { useEffect, useState } from "react";
 
const App = () => {
  // useState로 number 변수 값을 0으로 초기화
  const [number, setNumber] = useState(0);
 
  // useState로 name 변수 값을 'Josh'으로 초기화
  const [name, setName] = useState("josh");
 
  useEffect(() => {
    console.log("hello");
  });
 
  const counter = () => setNumber(number + 1);
  const nameChanger = () => {
    setName("Mike");
  };
 
  return (
    <div>
      <button onClick={counter}>click</button>
      <button onClick={nameChanger}>change Name</button>
      <div>{number}</div>
      <div>{name}</div>
    </div>
  );
};
 
export default App;

• click 버튼을 누르면 아래의 숫자가 올라간다.

• change Name 버튼을 누르면 이름이 변경된다.

• 렌더링이 끝난 후 hello라는 문자가 콘솔에 출력된 것을 알 수 있다.

click 버튼을 눌러보자 (1)

# useEffect( () => {}) 사용
 
  useEffect(() => {
    console.log('hello');
  })

어떤 값이든 변하게 되면 useEffect는 실행될 것이다.

click 버튼을 눌렀을 때, console창에 hello가 한번 더 출력 되었다.

그렇다. Dependency와 상관없이 어떤 값이든 변화하기만 하면 useEffect()가 실행된다.

click 버튼을 눌러보자 (2)

# useEffect( () => {} , [] ); 사용
 
  useEffect(() => {
    console.log('hello');
  },[])

deps 추가

useEffect에 대괄호[]를 사용하면, 렌더링 후 무조건 한번만 실행된 후 브라우저가 재렌더링이 되기전까지 더 이상 실행되지 않는다.

click 버튼을 눌러보자 (3)

# useEffect( () => {} , [name] ); 사용, Dependency가 들어간 경우
 
  useEffect(() => {
    console.log('hello');
  },[name])

렌더링 후 무조건 한 번은 useEffect()가 실행된다
즉, 렌더링 후 무조건 한 번은 hello가 출력된다.

✅ click 버튼을 눌렀을 때 ?

• 이론상 number의 상태(state)가 변하더라도 useEffect는 실행되지 않는다.

• 즉, click 버튼을 눌러 number의 state가 변하더라도 useEffect가 실행되지 않으므로 hello는 출력되지 않는다.

✅ change Name 버튼을 눌렀을 때 ?

Dependency 안에 변수들을 지정하게 되면 다른값들과 상관없이 지정된 값이 변해야만 useEffect()가 실행된다.
Dependency는 배열로 이루어져 여러 변수를 Dependency로 사용할 수 있다.

다음 포스트

Apple Store 명동 다녀온 후기 (2022/07/17)

작년에 다녀왔지만 블로그 만든 기념으로 올려보아요ㅎㅎ

이전 포스트

(JavaScript) reduce메서드에 대해 이해하기

자바스크립트의 reduce메서드에 대해 설명합니다.