useSatae, useEffect, useRef 란?

useEffect, useState, useRef

리엑트에서 가장 많이 사용되는 useState, useEffect , useRef 에대해 간단하게 정리했다.

useState

useState는 상태 변수를 선언하고, 그 값을 갱신할 수 있는 함수(setter)를 제공한다. 상태가 변경되면 컴포넌트가 다시 렌더링한다.

• 목적: 컴포넌트의 상태를 관리.
• 사용 예: 버튼 클릭 횟수, 입력 필드의 값 등.

const [count, setCount] = useState(0);

useEffect

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행한다. 두 번째 인자로 빈 배열([])을 넘기면 컴포넌트가 처음 마운트될 때 한 번만 실행된다.

• 목적: 컴포넌트의 생명주기에 따라 부수 효과(side effects)를 처리.
• 사용 예: 데이터 가져오기, 구독 설정, DOM 조작 등.

useEffect(() => {
  console.log('Component mounted');
}, []);

useRef

useRef는 변경되어도 리렌더링을 트리거하지 않는 값을 저장할 때 사용한다. 주로 직접 DOM 요소에 접근할 때 유용하다.

• 목적: DOM 요소나 값을 유지하지만, 변경 시 렌더링을 발생시키지 않음.
• 사용 예: 포커스 제어, 이전 상태 저장, 타이머 ID 저장 등.

const inputRef = useRef(null);

const focusInput = () => {
  inputRef.current.focus();
};

마무리

useState: 상태 관리, 값이 변경되면 컴포넌트 재렌더링한다.
useEffect: 부수 효과 처리, 컴포넌트 생명주기와 관련된 작업 수행한다.
useRef: 값이나 DOM 요소를 저장, 값이 변경되어도 컴포넌트는 재렌더링되지 않는다.