[React] 13. 리액트 컴포넌트의 Lifecycle와 useEffect Kassid

class Page extends React.Component {
  componentDidMount(){
    //mount 시
  }
  componentDidUpdate(){
    //update 시
  }
  componentWillUnmount(){
    //unmount 전
  }
  ...
}

2) 최근의 방식

최근에는 useEffect 훅을 이용해 기능을 구현한다.

import {useState, useEffect} from 'react';

function Pages(){
  useEffect(()=>{
    //mount, update 시 코드 실행
  })
  ...
  
  return(
    ...
  ) 
}

예시 (mount 시)

import {useState, useEffect} from 'react';

function Pages(){
  useEffect(()=>{
    console.log("HELLO!");
  })
  
  return(
    ...
  ) 
}

이처럼 컴포넌트가 로드될 때 내부의 코드를 실행하는 것을 알 수 있다. (위의 예시는 페이지 컴포넌트)

※ useEffect 내부 코드가 2번 실행되는 이유

위의 예시에서도 확인되듯 useEffect 내부의 코드는 기본적으로 2회 실행이 된다.
이는 react가 자체적으로 개발 시 디버깅을 위해 사전설정한 것이다. (StrictMode)
따라서 배포를 위한 빌드 파일에서는 정상적으로 1회 실행한다.

이를 개발환경에서도 동일하게 1회 실행하고 싶다면
index.js에서 <React.StrictMode> 태그를 삭제하면 된다.

예시 2 update 시(재렌더링)

import {useState, useEffect} from 'react';

function Pages(){
  useEffect(()=>{
    console.log("HELLO!");
  })
  
  let [count, setCount] = useState(0);
  
  return(
    ...
    <button onClick={()=>{setCount(count+1)}} />
  ) 
}

버튼을 눌러 재렌더링이 될 때 useEffect 내부의 코드가 재 실행되는 것을 확인할 수 있다.

3. useEffect를 사용하는 경우?

1) useEffect의 동작원리

useEffect 내부의 코드는 html이 모두 렌더링이 된 후 실행이 된다.

위에서 보았던 예시를 다시 보면,

예시_ useEffect 내부에 있는 경우

import {useState, useEffect} from 'react';

function Pages(){
  useEffect(()=>{
    console.log("HELLO!");
  })
  
  return(
    ...
  ) 
}

예시_ 아닌 경우

import {useState, useEffect} from 'react';

function Pages(){
  console.log("HELLO!");
  
  return(
    ...
  ) 
}

위의 코드들은 같은 기능을 한다.

하지만 언급한대로

복잡한 연산이나 시간이 오래 걸리는 코드들은 useEffect 내부에 위치시킨다면 (e.g. 타이머, 서버에서 데이터 get)

html 렌더링이 된 이후에 동작하므로

사용자 입장에서 조금 더 빠르게 동작하는 웹사이트를 제공할 수 있다.

2) 왜 Effect 일까?

프로그래밍 용어 중 SideEffect 라는 것이 있다.

이는 함수의 기능과 관련이 없는 부가기능을 의미한다.

useEffect는 해당 용어에서 따온 용어라고 한다!

4. useEffect 실행조건

지금까지 사용했던 useEffect는 1개의 파라미터를 가진 아래의 형태였다.

useEffect(()=>{})

여기에 파라미터를 하나 더 추가하면 실행 조건을 추가할 수 있다.

1) 조건을 추가한 경우

useEffect(()=>{},[stat1])

대괄호[ ] 안에 변수, state 등을 넣어서

그 값이 변할 경우 useEffect 내부 코드가 실행이 된다.

마운트가 될 때 실행되는 것은 여전히 유효하다.

이때, 대괄호 안 변수는 여러 개를 넣어줄 수 있다.

useEffect(()=>{},[stat1, stat2, ...])

여러 개의 변수 중 하나라도 값이 변경된다면, useEffect 코드가 실행된다.

2) 조건을 추가하지 않은 경우 ([ ] 만!)

대괄호 [ ]만 넣어준 경우에는

컴포넌트 마운트 시단 1회 만 실행된다.

useEffect(()=>{},[])

5. clean up function

useEffect가 실행되기 이전에 특정 코드를 실행시키고 싶은 경우에는

return ()=>{ } 을 추가해준다.

또한, unmount 시에도 실행된다.

useEffect(()=>{
  // 2. ~~
  return ()=>{
	// 1. ~~~
  }
})

이를 clean up function이라고 한다.

이 기능은 useEffect 내부 코드를 실행 하기 전

setTimeout을 clear하거나 socket 연결요청을 제거, ajax요청을 중단하는 등

버그를 방지할 때 사용할 수 있다.

예시

useEffect(()=>{
  let time = setTimeout(()=>{...}, 1000)
  return ()=>{
    clearTimeout(time)
  }
},[])

useEffect(()=>{
  return()=>{
    ...
  }
},[])

이렇게 사용하면 unmount 시 1회 실행되도록 할 수 있음!

저작자표시

'🌌 | WEB DEV > React' 카테고리의 다른 글

[React] 14. React와 서버 연동하기 (ajax를 이용해! (get, post) ) (2)	2024.01.12
[React/JS] setTimeout, setInterval 은 전혀 "시계" 하지 않아 (setTimeout, setInterval 오류) (1)	2024.01.06
[React] 13. 리액트 컴포넌트의 Lifecycle과 useEffect (0)	2024.01.02
[React] 12. Styled-components (+ 한 컴포넌트에 css파일 적용법) (1)	2023.10.04
[React] 11. 라우팅-3 양산형 라우팅 (2)	2023.10.03

[React] 13. 리액트 컴포넌트의 Lifecycle와 useEffect

1. 컴포넌트의 Lifecycle

2. 컴포넌트 Lifecycle에 간섭하는 방법

1) 이전의 방식

2) 최근의 방식

3. useEffect를 사용하는 경우?

1) useEffect의 동작원리

2) 왜 Effect 일까?

4. useEffect 실행조건

1) 조건을 추가한 경우

2) 조건을 추가하지 않은 경우 ([ ] 만!)

5. clean up function

'🌌 | WEB DEV > React' 카테고리의 다른 글

댓글

티스토리툴바

[React] 13. 리액트 컴포넌트의 Lifecycle와 useEffect

1. 컴포넌트의 Lifecycle

2. 컴포넌트 Lifecycle에 간섭하는 방법

1) 이전의 방식

2) 최근의 방식

3. useEffect를 사용하는 경우?

1) useEffect의 동작원리

2) 왜 Effect 일까?

4. useEffect 실행조건

1) 조건을 추가한 경우

2) 조건을 추가하지 않은 경우 ([ ] 만!)

5. clean up function

'🌌 | WEB DEV > React' 카테고리의 다른 글

관련글

댓글

티스토리툴바