useEffect 인트로

• useEffect는 componentDidMount, componentWillUpdate등의 기능을 가지고 있음

1. useEffect Example

import React, { useEffect, useState } from "react";
import "./styles.css";


const App = () =>{
 
  const sayHello = () => {
    console.log('❤️');
  }
  
  const [number, setNumber] = useState(1)
  const [anumber, setAnumber] = useState(0)
  useEffect(sayHello, [number])
  
  return (
    <div className="App">
    <div>example</div>
    <button onClick ={()=> setNumber(number +1)}>{ number }</button>    
    <button onClick ={()=> setAnumber(anumber +1)}>{ anumber }</button>
    </div>
  )
  
}


export default App;

1. 결과물

1-1. appendix

useState 같은 경우는

const [state, setState] = useState(default)

라는 식이 있다면, state자리에는 값, setState는 값을 변하게 하는 함수, default 파라미터 자리에는 기본값으로 설정할 값을 넣는 형태였다.

그러나 useEffect는 형태가 아래와 같다.

useEffect(적용할 함수, 적용범위)

그래서 위 예제에서는 하트를 콘솔에 찍는 함수를 작성한 것(결과물에서는 하트를 hello라는 문자열로 대체)이고, 그 적용범위는 useState에서 사용한 상태값인 number로 지정하였다.

useEffect같은 경우는 값이 업데이트되거나, 렌더가 되었을 경우 작동한다고 우선 이해하였다.

2. useEffect Example

react official document

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

export default Example;

2. 결과물

2-1. 공식문서 설명

useEffect가 하는 일은 무엇일까요?

useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말합니다. 리액트는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다) DOM 업데이트를 수행한 이후에 불러낼 것입니다. 위의 경우에는 effect를 통해 문서 타이틀을 지정하지만, 이 외에도 데이터를 가져오거나 다른 명령형(imperative) API를 불러내는 일도 할 수 있습니다.

useEffect를 컴포넌트 안에서 불러내는 이유는 무엇일까요?

useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 count state 변수(또는 그 어떤 prop에도)에 접근할 수 있게 됩니다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있는 것입니다. Hook은 자바스크립트의 클로저를 이용하여 리액트에 한정된 API를 고안하는 것보다 자바스크립트가 이미 가지고 있는 방법을 이용하여 문제를 해결합니다.

useEffect는 렌더링 이후에 매번 수행되는 걸까요?

네, 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행됩니다.(나중에 effect를 필요에 맞게 수정하는 방법에 대해 다룰 것입니다.) 마운팅과 업데이트라는 방식으로 생각하는 대신 effect를 렌더링 이후에 발생하는 것으로 생각하는 것이 더 쉬울 것입니다. 리액트는 effect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장합니다.