일주일동안 강의를 보거나 프로젝트를 하면서 알게된 것을 적는 주말 기술 회고

useEffect란?

useEffect는 컴포넌트가 처음 마운트되거나 컴포넌트가 리렌더링 될 때, 또는 선언된 변수의 값이 변경될 때 실행할 구문들을 정의해놓은 함수이다.

• Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다.

1. 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었다.
2. 즉, 라이프사이클 훅을 대체할 수 있게 되었다. (componentDidMount, componentDidUpdate, componentWillUnmount)

아직 React응애여서 클래스로서 컴포넌트를 만든적이 없기에 위 함수들은 잘모른다.

useEffect를 쓰면 좋은 점

렌더링이 계속 되면, 특히 api를 불러오게 되는 경우 계속 불러오는 문제가 생길 수 있다.
state를 변경할 때, 계속해서 렌더링 되는 문제점이 존쟂한다. 많은 state가 존재한다면 성능 저하 문제가 발생할 수 있다.

useEffect를 쓰는 법

import { useEffect } from "react";

1. useEffect의 기본 형태

useEffect(() => {
  ... // 실행할 내용들
});

2. 비어있는 dependency추가

useEffect(() => {
  ... // 실행할 내용들
}, []);

컴포넌트가 처음으로 마운트되었을 때 실행된다. 초기에 한 번 실행할 작업들이 필요할 때 사용한다.

3. dependency 값 추가

const [value, setValue] = useState(0);

useEffect(() => {
  ... // 싫행할 내용 
}, [value]);

useEffect에는 []의 값이 들어가거나 들어가지 않는 경우가 존재하는데, 이를 dependency라고 한다. dependency 파라미터 값에 의존하여 useEffect함수가 실행될지 말지를 결정한다.

위처러 value라는 값이 들어있다면 해당 값이 변경이 될 때, useEffect함수가 실행된다.

4. cleanup 함수

useEffect(() => {
  ... // 실행할 내용
  
  return () => {
    ... // cleanup
  }
});

useEffect에는 해당 컴포넌트가 언마운트될 때 실행되는 cleanup함수가 있다.
C++로 치면 소멸자? 이런 역활이라고 보면 될 것 같다.

cleanup함수는 컴포넌트가 사라질 때 호출되는 부분으로 메모리누수를 방지하여 메모리 관리를 하거나 컴포넌트가 사라질 때, 수행할 작업들을 추가하기 위해 사용한다.

용어 정리

• Mounting: 컴포넌트가 최초로 나타낼 때를 뜻한다.
• Rendering: 컴포넌트가 마운트 된 후 컴포넌트가 호출 될 때를 뜻한다.
• UnMount: 컴포넌트가 사라질 때를 뜻한다.

마무리

오늘은 useEffect블로그를 작성하면서 복습해보았는데, 찾으면서 많은 것을 알게된거 같은 기분이다.

출처

• 출처 1
• 출처 2
• 출처 3
• 출처 4
• 공식문서