함수형 컴포넌트 생명주기

• useEffect의 배열 형태에 따른 실행 시점 차이
• 마운트, 언마운트, 리렌더링, 특정 상태 값 변화
• 의존성 배열이란?

 

함수형 컴포넌트란?

• state, lifeCycle 관련 기능 사용 불가능하다.

       => Hook을 통해 해결, 사용 가능

 

• 메모리 자원을 덜 사용한다.
• 컴포넌트 선언이 편하다.

 

 

출처: 오즈코딩스쿨 리액트 강의

 

 

useEffect()

리액트 컴포넌트가 렌더링 될 때마다 특정 기능을 수행하기 위한 리액트 훅으로,

의존성 배열의 값이 하나라도 변경될 때만 실행이 된다.

 

클래스 컴포넌트의 생명주기 함수인

componentDidMount(), componentDidUpdate(),componentWillUnMount()와 동일한 기능을 하나로 통합한다.

=> useEffect() 훅으로 생명주기 함수와 동일한 기능 수행 가능

 

useEffect(이펙트 함수, 의존성 배열);

 

의존성 배열?

이펙트 함수가 의존하고 있는 배열

=> 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행한다.

 

 

1. 컴포넌트가 최초로 렌더링 될 때에만 조작

 

mount 시 단 한 번만 실행시키고 싶을 때 의존성 배열에 [](빈 배열)을 넣는다.

function Counter() {
  const [counter, setCounter] = useState(1);
  const [counter2, setCounter2] = useState(100);

  useEffect(() => {
    console.log("맨 처음 렌더링 될 때")
  }, [])

 

2. 컴포넌트가 리렌더링 될 때 조작

 

컴포넌트가 업데이트될 때마다 실행시키고 싶을 때 의존성 배열을 생략한다.

function Counter() {
  const [counter, setCounter] = useState(1);
  const [counter2, setCounter2] = useState(100);

  useEffect(() => {
    console.log("리렌더링..!")
  })

 

3. 특정 상태 값이 변할 때만 조작

 

특정 값을 넣으면 특정 상태 값이 변할 때만 실행된다.

아래 예시에선 counter 값일 변할 때, counter 2 값이 변할 때 각각 실행되는 중이다.

function Counter() {
  const [counter, setCounter] = useState(1);
  const [counter2, setCounter2] = useState(100);

  useEffect(() => {
    console.log("counter의 값이 변할 때")
  }, [counter])

  useEffect(() => {
    console.log("counter2의 값이 변할 때")
  }, [counter2])

 

 

4. 컴포넌트가 최종적으로 언마운드 될 때 조작

 

클린업 함수

=> 컴포넌트가 언마운트 될 때 실행

 

useEffect 안에서 return 을 해주고 실행되길 원하는 함수를 넣으면 된다.

아래 예시에선 unmount 될 때, console 값에 "컴포넌트 언마운트"가 뜬다.

function Counter() {
  const [counter, setCounter] = useState(1);
  const [counter2, setCounter2] = useState(100);

  useEffect(() => {
    return () => {
      console.log("컴포넌트 언마운트")
    }
  }, [])

 

 

   요약

• 의존성 배열에 [](빈 배열)을 넣으면 mount와 unmount 시에 한 번씩만 실행된다
• 의존성 배열 생략을 하면 컴포넌트가 업데이트될 때마다 실행된다.
• 의존성 배열에 특정 값을 넣으면 특정 상태 값이 변할 때만 실행된다.