useEffect()
useEffect()함수는 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.
- 컴포넌트가 mount 됐을 때
- 컴포넌트가 unmount 됐을 때
- 컴포넌트가 update 됐을 때
특정 작업을 처리할 수 있다.
🔊 페이지가 처음 렌더링 되고 난 후 useEffect는 무조건 한 번 실행된다.
🔊 useEffect에 배열로 지정한 useState의 값이 변경되면 실행되게 된다.
즉, useEffect는 렌더링 or 변수의 값 or 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트 해주는 함수이다.
useEffect는 콜백 함수를 부르게 되며, 렌더링 or 값, 오브젝트의 변경에 따라 어떤 함수 or 여러 개의 함수들을 동작시킬 수 있다.
useEffect() 사용법
기본 형태 : useEffect( function, deps )
- function : 수행하고자 하는 작업
- deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열을 집어 넣는다.
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;
터미널에서 npm start 를 하면 브라우저가 자동으로 켜진다 😼
-
click 버튼을 누르면 아래의 숫자가 올라간다
-
change Name 버튼을 누르면 이름이 변경된다
-
렌더링이 끝난 후 hello라는 문자가 출력된 것을 알 수 있다.
렌더링이 끝나면 무조건 한 번은 useEffect가 실행된다.
click 버튼을 눌러보자 (1)
현재 useEffect() 코드는 다음과 같다.
# useEffect( () => {}) 사용
useEffect(() => {
console.log('hello');
})어떤 값이든 변하게되면 useEffect는 실행될 것이다.
click 버튼을 눌렀을 때, console창에 hello가 한 번 더 출력 되었다.
Dependency와 상관없이 어떤 값이든 변화하기만 하면 useEffect()가 실행된다.
click 버튼을 눌러보자 (2)
어떤 값이든 변화하기만 하면 useEffect()가 실행됐던 1번의 경우는, 불필요한 사용이 너무 많아지게 되어 거의 사용되지 않는다.
# useEffect( () => {} , [] ); 사용
useEffect(() => {
console.log('hello');
},[])
click 버튼을 선택했을 때, hello는 1번 밖에 출력되지 않았다.
useEffect에 대괄호[] 를 사용하면, 렌더링 후 무조건 단 한 번만 실행된 후
더 이상 실행되지 않는다.
click 버튼을 눌러보자 (3)
# useEffect( () => {} , [name] ); 사용, Dependency가 들어간 경우
useEffect(() => {
console.log('hello');
},[name])- 렌더링 후 무조건 한 번은 useEffect()가 실행된다
- 즉, 렌더링 후 무조건 한 번은 hello가 출력된다.
✅ click 버튼을 눌렀을 때 ?
현재 Dependency는 name이라는 변수로 지정되어있다.
-
이론상 number의 상태(state)가 변하더라도 useEffect는 실행되지 않는다.
-
즉, click 버튼을 눌러 number의 state가 변하더라도 useEffect()가 실행되지 않으므로 hello는 출력되지 않는다.
✅ change Name 버튼을 눌렀을 때 ?
useEffect의 Dependency인 name의 값이 Josh에서 Mike로 변경되자 useEffect가 실행되었다.
즉, hello가 한 번 더 출력되었다.
Dependency 안에 변수(들)을 지정하게 되면,
다른 값들과 상관 없이 지정된 값이 변해야만 useEffect()가 실행된다.
Dependency는 배열로 이루어져 여러 변수를 Dependency로 사용할 수 있다.
💚 useEffect() 정리
-
useEffect는 어떤 값의 변화가 감지되면,
실행되어 특정 함수나 작업을 실행하는 함수이다. -
useEffect는 콜백 함수를 가지며, Dependency는 있을 수도 없을 수도 있다.
-
useEffect는 무조건 렌더링 후 한 번 실행된다.
-
Dependency가 없는 방법
:useEffect( () => {} ) -
대괄호를 이용하는 방법
:useEffect( () => {} , [] ) -
대괄호 안에 특정 변수(들)을 지정하는 방법
:useEffect( () => {} , [특정 변수 or 오브젝트] )
🎁 useState() 정리
const [state, setState] = useState([]);
1) state 값 변경은, 자동적으로 생성되는 setState() 함수 를 사용해야만 가능하다.
2) state 값을 변경할 때, setState()함수 내에 들어갈 수 있는 데이터는
useState(데이터)의 데이터와 자료형을 맞춰서 (array, object 등) 변경해야한다
3) state 데이터를 직접적으로 변경할 수 없기 때문에, deep copy : [...] 를 사용해서 데이터 값을 변경한다
copy 할 때 [...]을 사용하지 않으면 그냥 '값 공유'를 하는 것이다.
