React
useEffect란?
🕵️♀️ useEffect
React Hook 중에는 useEffect라는 Hook이 존재한다. useEffect란 리액트에서 기본적으로 제공해주는 함수이다.
페이지가 처음 렌더링되고 난 후 useEffect는 무조건 한번 실행된다.
useEffect에 배열로 지정한 useState의 값이 변경되면 실행되게 된다. 즉 useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수이다. useEffect는 콜백 함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러개의 함수들을 동작시킬 수 있다.
useEffect를 사용하는 방법은 총 3가지 정도로, 압축해 볼 수 있다.
1번 예제: useEffect(()=>{};
2번 예제: useEffect(()=>{},[]);
3번 예제: const [name, setName]=useState();
useEffect(()=>{},[name]);- 1번 예제 : useEffect의 가장 기본 형태이지만, 이러한 형태를 거의 사용하지는 않는다. Dependency가 없기 때문에 렌더링 할 때 한번 그리고 어떠한 작은요소라도 변화한다면 계속 실행되어 불필요한 실행이 많아진다.
- 2번 예제 : useEffect를 렌더링 후 단 한번만 실행하고 싶을때 사용하는 방법이다. 콜백함수 뒤에 배열을 나타내는 대괄호가 붙어있다. 이곳에 Dependency를 지정한다. 하지만 아무변수나 값 없이 대괄호만 있다면, 이 useEffect는 렌더링 후 단 한번만 실행되고 다시는 실행되지 않는다.
- 3번 예제 : useEffect를 렌더링 후 한번, 그리고 배열 안 변수의 값이 변할 때 마다 실행하는 코드이다. 이렇게 Dependency를 지정해주어 지정된 변수의 값이 변했을 때만 실행되게 된다.
useState 와 useEffect 사용법
1번 예제
useEffect(()=>{})로 사용한 경우
간단한 예시를 통해 useEffect가 어떻게 동작하는지 보자.
import React, {useEffect, useState} from 'react';
const Number = () => {
const [number, setNumber] = useState(0);
const [name, setName] = useState('김사과')
useEffect(()=>{
console.log('hello');
});
const counter = () => setNumber(number + 1);
const nameChanger = () => setName('박자몽')
return(
<div>
<button onClick={counter}>클릭</button>
<button onClick={nameChanger}>이름 변경</button>
<div>{number}</div>
<div>{name}</div>
</div>
);
}
export default Number;버튼을 누르면 숫자가 1씩 올라가고 이름이 바뀌는 페이지이다.
렌더링이 끝나면 hello라는 문자가 출력되고 (Dependency가 있고 없고의 여부와 상관없이 렌더링이 끝나면 무조건 한번은 useEffect가 실행된다.)
다음 클릭 버튼을 눌러본다. 지금의 useEffect는 아래와 같은 형태로 작성돼있다. 즉 Dependency와 상관없이, 어떠한 값이든 변하게 되면 useEffect는 실행될 것이다.
useEffect(()=>{}); 👈 기본 From
useEffect(()=>{console.log("hello")}) 👈 전체 코드안의 useEffet Form예상과 같이 클릭버튼을 눌러 숫자를 증가시키자 hello라는 문자가 한번 더 출력된다. 이는 클릭버튼을 여러번 누를 때 마다 hello가 출력된다.
이번에는 F5를 눌러 페이지를 새로고침 한 뒤, 이름변경버튼을 눌러본다. 이번에도 hello가 한번 더 출력이 된다. 이는 Dependency와 상관없이 어떠한 값이든, 변하기만 하면 useEffect는 계속 실행이 된다. 그래서 잘 사용되지는 않는다.
2번 예제
useEffect(()=>{},[])로 사용한 경우
useEffect(()=>{
console.log('hello');
},[]);1번 예제로 한 코드에서 } 옆에 ,[name] 가 더 붙여졌다.
이렇게 한 후에 실행을 하면 렌더링 후 한번실행되고, 더 이상 실행이 되지 않는 것을 볼 수 있다.
클릭 버튼을 클릭하면 0에서 8로 변화는 되었지만 useEffect는 실행이 되지 않았다.
다음 이름변경 버튼도 클릭해보자.
김사과에서 박자몽으로 변경이 되었고 hello 도 그대로 즉, useEffect는 실행되지 않았다.
여기서
useEffect(()=>{
console.log('hello');
},[name]);Dependency를 name이라는 변수로 지정하고 눌러보자
클릭 버튼을 클릭하면 화면에 11로 카운팅은 되지만 useEffect는 실행되지 않았다.
그렇다면 변수 [name]을 지정하고 이름변경을 눌러보면?
이름변경을 누르자 김사과에서 박자몽으로 변경이 되었고 useEffect가 실행되어 hello가 나타났다.
정리하자면
useEffect는 어떠한 값의 변화를 감지하면 실행되어 특정 함수나 작업을 실행하는 함수이다.useEffect는 콜백 함수를 가지며,Dependency는 있을 수도 있고 없을 수도 있다.
ex)useEffect(()=>{},[])또는useEffect(()=>{},[name])useEffect는 무조건 렌더링 후 한번 실행된다.
useEffect는 3가지 방법으로 사용된다.
- Dependency가 없는 방법
useEffect(()=>{}) - 대괄호를 이용하는 방법
useEffect(()=>{},[]) - 대괄호 안에 특정 변수를 지정하는 방법
useEffect(()=>{},[특정변수 혹은 오브젝트]
🕵️♀️Dependency가 있던 없던, 대골화만 있던 렌더링 후 useEffect는 무조건 한번 실행된다.
[출처] https://ko-de-dev-green.tistory.com/18
출처를 기반으로 예제를 따라만들며 공부했습니다. 감사합니다.
