[React] Hook : useEffect

useEffect()

React component가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 리액트 Hook

 

 

 

0. 기본 형태

useEffect(function, deps)

• function : 실행하고자 하는 함수
• deps : 배열 형태, function을 실행시킬 조건 -> 해당 조건에 맞는 값이 업데이트(=mount) 될 때 useEffect를 실행한다.

 

+)
컴포넌트가
- 마운트 됐다 = 처음 나타났다.
- 언마운트 됐다 = 사라졌다.
- 업데이트 됐다 = 특정 props가 바꼈다.

 

 

 

1. Component가 Mount 되었을 때(나타날 때)

useEffect(() => {
	console.log("렌더링 될 때마다 실행");
    });

deps 부분을 생략했다. 어떤 빈 배열도 들어가지 않은 상탠데, 이러면 해당 컴포넌트가 렌더링 될 때마다

useEffect가 실행되게 된다.

 

 

useEffect(() => {
	console.log("맨 처음 렌더링될 때 한번만 실행");
    },[]);

만약 맨 처음 렌더링 될 때 한번만 실행하고 싶다면 다음과 같이 deps 위치에 빈 배열을 넣어주면 된다.

 

 

 

 

2. Component가 update 되었을 때 (props, state 변경)

useEffect(() => {
	console.log(name);
    console.log("name이라는 값이 업데이트 될 때만 실행");
},[name]);

deps에 들어간 name은 실행 조건이므로 name이라는 특정 값이 업데이트 될 때만 실행된다.

 

 

 

 

 

 

 

 

 

https://cocoon1787.tistory.com/796