[React] React의 생명 주기 (Life cycle)

dygreen·2022년 7월 1일
0

React

목록 보기
1/1
post-thumbnail

📝 React를 사용하는 데 있어 꼭 알아야할 개념인 라이프사이클에 대해서 설명해보려고 합니다!

📌 Component's Lifecycle

  • mount : 페이지에 장착됨
  • update : 업데이트 됨 = 재렌더링 (ex. state가 변동될 때)
  • unmount : 필요없으면 제거됨 (ex. 페이지를 벗어나면 해당 컴포넌트 제거)

📌 Lifecycle hook

: Component의 Lifecycle 중간 중간에 간섭하여 코드를 실행할 수 있는데, 이것이 바로 Lifecycle hook이라고 한다.


예시)

  • mount : " 컴포넌트 등장 전에 이 코드 실행해줘 "
  • update : " 컴포넌트 업데이트 되고나서 이 코드 실행해줘 "
  • unmount : " 컴포넌트 사라지기 전에 이 코드 실행해줘 "

📌 useEffect

: Lifecycle hook 중 가장 대표적인 useEffect에 대해서 알아보자

useEffect는 컴포넌트가 mount / update가 되었을 때 특정 코드를 실행할 수 있다.

useEffect( () => {
  실행할 코드
}, [실행조건]);

useEffect 안에 있는 코드는 html 렌더링 후에 동작한다!

따라서 오래 걸리는 어려운 작업
(ex. 어려운 연산, 서버에서 데이터 가져오기, 타이머...)
useEffect 안에 넣으면 html을 먼저 보여주고 실행하여 효율적이다


왜 Effect라는 이름인가 ?

: Side Effect(= 함수의 핵심 기능과 상관 없는 부가기능)이라는 단어에서 따옴


useEffect에 실행조건([]) 넣기

useEffect( () => {
  실행할 코드
});

👆 실행조건이 없을 때는 mount / update 시 실행됨 → 비효율적


useEffect( () => {
  실행할 코드
}, [count]);

👆 실행조건이 있을 때는 mount시, count라는 state가 변할 때만 실행됨


useEffect( () => {
  실행할 코드
}, []);

👆 실행조건이 [ ]이면 mount에만 실행됨


return을 추가하면

: useEffect 안의 코드 실행 전에 실행된다!

컴포넌트 mount시 실행되지 않고, unmount시 실행됨

useEffect( () => {
  return () => { 실행할 코드(= clean up function) }
}, []);

ex. 타이머를 제거하는 함수(clearTimeout())를 넣어 무한 생성되는 타이머를 방지할 수 있음 (효율적)
서버에서 데이터를 요청할 때 재렌더링이 걸리면 겹쳐서 버그가 일어날 수 있으므로, return문 안에 기존 데이터 요청은 제거해 달라는 코드를 넣기


📚 Reference

: 코딩애플 강의

profile
✨감명깊은 앞단을 향한 꾸준한 여정✨

0개의 댓글