[React] useEffect, useRef

✔️ 시작

useEffect, useRef이 헷갈려서 이번 기회에 공부하려고 한다.
useRef은 추후 다시 정리해서 업로드하려고 한다.

📍 useEffect

• useEffect를 이용하며 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook
• 함수형 컴포넌트가 렌더링 될 때마다 실행되며, 매 렌더링마다 실행되는 것이 아닌 렌더링 이후 한 번만 실행한다.

부수효과(Side Effect)?

• 컴포넌트 외부의 환경에 영향을 주는 작업
• 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM을 직접 조작할 때 발생(API 요청, DOM 조작, 타이머 설정 등이 Side Effect)

let a = "hello";
function b(){
	a = "world";
}
b(); // b는 Side Effect를 발생시킨다.

React 컴포넌트에서 Side Effect

• 타이머 사용 (setTimeout)
• 데이터 가져오기 (fetch API, local storage)

useEffect(함수, [종속성1, 종속성2, ...])

• useEffect 함수는 두 개의 인자를 받는다.

1. 첫 번째 인자

• Side Effect를 수행하는 함수이다.
• useEffect(함수)인 경우
  - 컴포넌트 생성 후 처음 화면에 렌더링
  - 컴포넌트에 새로운 props가 전달되면 렌더링
  - 컴포넌트에 상태(state)가 바뀌면 랜더링
  - 매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행된다.

2. 두번째 인자

• 종속성 배열(조건을 담고 있다. - boolean 형태의 표현식이 아닌 어떠한 값에 변경이 일어날 때)
• 종속성 배열의 값이 변경될 때 마다 첫번째 인자인 함수가 실행된다.
• 빈 배열, 아무것도 넣지 않은 경우 한 번만 실행된다.

//1. 빈 배열
useEffect(함수, [])
//2. 아무것도 넣지 않기(기본형태)
useEffect(함수)

예시

// useEffect 불러오기
import React, { useEffect } from 'react';
export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("count");
  }, [count]);
  
  const handleCounterClick = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      <button onClick={handleCounterClick}>카운터 값: {count}</button>
    </div>
  );
}

1. 처음 화면에 렌더링시 useEffect가 실행 된다.
2. count 버튼 클릭 시 useEffect가 실행 된다.

그래서 콘솔창을 확인해 보면 버튼은 7이라 찍혀 있지만 콘솔창은 첫 렌더링 까지 카운트되서 8이 찍혀 있는 걸 확인 할 수 있다.

Mounting, Unmounting?

React 컴포넌트의 생명주기(Life Cycle) 중 두 단계를 나타낸다.
useEffect 라는 Hook 을 사용해 컴포넌트가

• Mounting: 화면에 처음 나타날 때
• Unmounting : 화면에 사라질 때

📍 useRef

• React에서 제공하는 Hook 중 하나
• DOM 요소나 다른 값들을 저장하고 관리하는 기능을 제공
• 화면을 리렌더링 하지 않고 컴포넌트의 속성만 조회/수정한다.(값이 유지되며 변경도 가능)

주로 사용 되는 예시

• focus
• text selection
• media playback
• 애니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용

const 주소값담는그릇 = useRef(참조자료형)
return (
    <div>
      <input ref={주소값담는그릇} type="text" />
    </div>);

• useRef로 DOM노드, 엘리먼트, React 컴포넌틑 주소값을 참조할 수 있다.
• 주소 값이 리렌더링 되더라도 변경되지 않는다.

React의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 한다.

✏️ 마치며

Reat hook 중 useState, useEffect, useRef을 주로 사용하는 거 같은데
그 중 useEffect, useRef을 자주 사용하지 않아 기능이 헷갈렸던 거 같다.

이번 기회에 어느 정도 알 수 있는 기회가 되었다.
useRef는 알 것 같지만 시간이 부족해 이후 좀 더 찾아보고 정리할 예정이다.

🔗 출처
https://react.vlpt.us/basic/16-useEffect.html
chat GTP
https://yoonjong-park.tistory.com/entry/React-useRef-%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EA%B0%80