[⚛️] useEffect, useRef

useEffect

 

📍useEffect의 특징

• 리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 하는 hook (컴포넌트가 나타날 때, 사라질 때)
• useEffect 생성 후, Import 필수
• state가 변경될 때마다 리-렌더링이 일어나서 useEffect가 계속 실행됨
  => 의존성 배열로 막을 수 있음
  
  

📍의존성 배열

•  이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행시킴
• Trigger : useEffect의 동작을 이끌어내는 어떠한 변수 (배열에 들어가는 값)
• 의존성 배열이 빈 배열일 경우 : 최초 렌더링 이후 딱 한 번만 실행, 그 이후에는 어떤 일이 일어나도 실행 X

 

📍clean up

• useEffect의 return 문에 들어가는 함수
• 리소스 정리, 불필요한 메모리 누수를 방지하기 위해 사용

 

📍컴포넌트 라이프사이클: Mount(생성) / Update(업데이트) / Unmount(소멸)

 

 

 

useRef

 

📍특징

• state가 변경되어 렌더링이 일어나는 것과 상관없이 어떤 값을 계속해서 저장할 때 사용
• 값을 유지함 => 저장공간의 역할 (useState와의 차이 : 렌더링과 연관이 없음)
• useRef로 선언된 값은 DOM 요소에 접근하는 역할

 

📍사용 방법

import { useRef } from "react";

function App() {
  const ref = useRef("초기값");
  console.log("ref", ref);
  };

 

콘솔에 찍히는 값:

• ‘current’를 갖고 있는 객체
• 변경 가능 : ref.current = ‘바꾼 값’ (current 에 접근하여 바꾸기)

function App() {
  const ref = useRef("초기값");
  console.log("ref 1", ref);

  ref.current = "바꾼 값";
  console.log("ref 1", ref);
};

 

이렇게 설정된 ref 값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지!

 

 

📍예시

• 저장공간
  • state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 된다.
  • ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.
  • ref로 변경된 사항은 눈에 보이지 않지만 저장되는 중 / state로 리렌더링을 할 때 그 값이 한 번에 반영됨
• DOM
  • 최초 렌더링 시 인풋에 포커스 두기(useEffct와 함게 사용)