React - app 3 (useEffect)

useEffect

useEffect의 구조

useEffect(function, deps)

useEffect React에서 중요한 Hook중의 하나 이다.
useEffect 는 코드가 딱 한번만 실행될 수 있도록 보호 해주는 역할이다.

import 코드

import { useEffect,useState } from "react";

예시 코드를 작성하여 알아 보도록 하자

console.log("i run all the time")

이 코드는 컴포넌트의 변화가 일어날 때마다 계속해서 re-render 될 것이다.

useEffect(() => {
    console.log("i run only one")
  }, [])

위 예시는 useEffect의 deps(dependencies)를 비어 놓음으로써 React가 지켜볼 대상이 없어 변화가 생기지 않으므로 단 한번만 실행된다.

 useEffect(() => {
    if(keyword !== "" && keyword.length > 5){
    console.log("i run when keyword changes");
  }
}, [keyword])

keyword = state이며 조건문을 주었다.
deps에는 keyword를 넣어 계속 주시하며 조건에 해당되거나 변화가 생기면 re-render시킨다.

useEffect(() => {
  console.log("i run when counter changes");
}, [counter])

counter = state 이며 위와 마찬가지로 변화가 생기면 실행시킨다.

useEffect(() => {
  console.log("i run when counter changes");
}, [counter,keyword])

deps는 배열이다. 즉 여러개를 넣어서 하나라도 변화한다면 render 되게 할 수 있다.

React는 state를 변화시킬 때 모든 코드가 재실행(re-render)된다.