본문 바로가기

lifecycle2

Lifecycle(feat. DOM) 컴포넌트는 각자 라이프사이클을 가지고 있다. 컴포넌트는 생성되고, 업데이트되고, 사라진다. 자세히 얘기해보자. 컴포넌트가 DOM에 끼워질 때 생성된다, 그리고 업데이트되면 DOM에 표시된 컴포넌트가 변한다. DOM에서 컴포넌트가 사라진다면 그 컴포넌트는 역할을 다한 셈이다. 라이프사이클(lifecycle) 나타나고 수정하고 사라지는 모든 것을 말하며, 리액트에서는 이 라이프사이클을 조절할 수 있다. (리액트 공식 문서에서는 생명주기라고 번역되어 있으나 실제 현장에선 라이프사이클이라 표현한다.) 사실 필자는 전에 라이프사이클과 관련 있는 글을 썼다. 바로 useEffect. useEffect가 컴포넌트의 라이프사이클을 조절하는 hook이었다. 함수형 컴포넌트는 라이프사이클을 useEffect로 조절하며, .. 2022. 10. 3.
useEffect 처음 페이지를 불러올 때 한 번만 로드하고 싶은 게 있다면 useEffect가 필요할 때다. 서버에서 초기값을 가져올 때, 그리고 리렌더링이 필요하지 않을 때 정말 유용한 hook인 듯하다. 물론 useEffect에는 다른 기능도 더 있다. useEffect 사용 방법 3가지를 정리했다. 사용 방법 useEffect 기본 폼은 아래와 같다. 이게 무언가 싶을 수 있지만 한 가지씩 뜯어보자. import { useEffect } from "react"; export default function UseEffectPage() { useEffect(() => { return () => {}; }, []); return ( ); } 1. 웹 처음 업로드할 때 한 번만 실행 기본 코드 useEffect(() =>.. 2022. 9. 30.