useEffect를 이해했는데 이해 못 한 느낌 🤷♀️
이 안에서 찝찝한 감정을 해소해보고자!
일단 밀린 TIL보다 useEffect에 대해서 제대로 이해하고 넘어가기 위해 글을 작성해봐야겠다. ( =맨날 TIL핑계대면서 블로그 글을 안쓰게 되므로,,)
useEffect를 제대로 이해해보자! 제발~~~!
useEffect란?
- useEffect를 이용하면 우리는 React에게 컴포넌트에게 렌더링 이후에 어떤 일을 수행하는지 알려줄 수 있다.
- React는 우리가 넘긴 함수를 기억했다가 DOM업데이트를 수행한 이후에 불러낸다.
- Effect Hook을 이용하면 함수형 컴포넌트에서도 생명주기 메서드를 사용할 수 있고, side effect를 수행할 수 있다.
- useEffect는 기본적으로 1)컴포넌트가 최초로 렌더링 될 때, 2)지정한 state나 prop가 변경될 때(=업데이트 될 때)마다 이펙트 콜백 함수가 호출됩니다.
음,, 알겠는데 모르는 이 느낌.
그럼 대체 생명주기 메서드는 뭔데?
React의 특징을 살펴보면 SPA(Single Page Application) 으로 매번 처음부터 화면을 받아오는 방식을 취하는게 아니고, 가상의 DOM을 만들어서 업데이트되는 내용만 다시 그려서 UI를 보여주게 되는 특징이있다. 그러므로, 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 가지고, 생명주기의 때에 따라 어떤 작업을 처리해야 하는지 지정해줘야 불필요한 업데이트를 방지할 수 있다.
컴포넌트는 기본적으로 클래스형 컴포넌트, 함수형 컴포넌트 두 방식이 존재한다.
생명주기 메서드는 class 컴포넌트에서 활용하는 메서드로 함수형 컴포넌트에서는 Hook을 사용해서 그 기능을 한다. 그 Hook의 종류 중 하나가 useEffect이다!
(즉! 원래는 클래스 컴포넌트를 사용해서 생성될 때, 업데이트 될 때, 제거 될 때, 일어나는 일들을 생명주기 메서드로 지정해서 관리해야했다. 그러나, 클래스 컴포넌트는 사용방식(=문법) 이 매우 복잡해서 쓰기가 불편하고 함수형 컴포넌트가 훨씬 직관적이고 보기 쉽다. 하지만, 생명주기 메서드를 사용해야 하니 클래스 컴포넌트를 계속 사용을 해왔다. 그러나 그걸 보완하기 위해 Hook이 만들어졌다. 직관적이고 쓰기 좋은 함수형 컴포넌트에서도 Hook을 이용해서 생성주기 메서드와 같은 일을 할 수 있게 되었다는 것!)
그럼 대체 side effect는 뭔데?
side effect는 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 데이터 가져오기, 타이머함수 사용하기, 수동으로 React 컴포넌트의 DOM을 수정하는등이 있고, 함수 컴포넌트의 본문 안에서는 허용되지 않는다. 이를 수행한다면 버그 및 UI의 불일치를 야기하게 될 것이다.
useEffect 사용법
// import는 react와 함께 해주어야 한다.
import React, { useEffect } from 'react';
//이러한 형태가 기본이 된다.
useEffect(Effectcallback, deps);
//Deps: 변경을 감지할 변수들의 집합(배열)
//EffectCallback: deps에 지정된 변수가 변경될 때 실행할 함수
useEffect( () => {
// mount 시 실행할 함수
return () => {
// unmount 시 실행할 함수
]
}, [deps값]); //빈 배열일 경우 컴포넌트가 마운트 될때 한번 실행
이렇게 알아보다 보니 조금 이해가 된 느낌이다. 아직도 조금 뭔가 해결안된 무언가가 있는 느낌이지만 그건 차차 사용해보면서 더 알아봐야겠다!
