1. useState
컴포넌트에서 상태를 관리하고자 할 때 쓴다.
useState 훅을 사용할 때, const나 let을 사용하여 상태 변수와 상태를 업데이트하는 함수를 지정하는 것은 자동으로 이루어진다.
const [state, setState] = useState(initialValue);
- state: 현재 상태 값을 나타내는 변수
- setState: 상태 값을 업데이트하는 함수
- useState: React 훅으로, initialValue를 초기 상태 값으로 사용하여 상태 변수와 상태 업데이트 함수를 반환
- => 즉 이 코드만 보면 state 는 초기값인 initialValue 를 가진 현재의 상태를 저장하는 변수이고 setState 는 state 변수를 업데이트 하는 함수인 것이다.
🤔 2. 초기값으로 빈 배열을 가질 경우!
const [movies, setMovies] = useState([]); //초기값이 빈 배열일 경우
- movies: 현재 상태 값을 나타내는 변수로, 초기 값은 빈 배열([])을 가진다.
- setMovies: movies 상태 값을 업데이트하는 함수
- 만약 이것처럼 초기값으로 빈 배열을 설정하면, 해당 상태 변수는 컴포넌트가 처음 렌더링될 때 빈 배열로 초기화된다. 주로 비어 있는 목록이나 컬렉션을 초기화할 때 사용된다.
3. useEffect
React 컴포넌트가 렌더링될 때마다 특정 사이드 이펙트를 수행할 수 있게 해주는 훅이다.
useEffect(() => { // 코드 }, [//의존성배열]);
📌 의존성배열!
의존성배열은 useEffect가 언제 실행될지를 결정한다.
의존성 배열에 특정 값을 넣으면, 그 값이 변경될 때마다 useEffect 내부의 함수가 재실행된다.
왜 의존성 배열을 사용하는가?
- 특정 상태나 props가 변경될 때만 실행: 불필요한 재실행을 방지하고, 특정 상태나 props가 변경될 때만 사이드 이펙트를 실행할 수 있다.
- 성능 최적화: 컴포넌트가 렌더링될 때마다 무조건 실행되는 것을 방지하여 성능을 최적화할 수 있다.
- 명확한 의도: 의존성 배열을 통해 어떤 값이 변경될 때 사이드 이펙트를 실행할지 명확하게 할 수 있다.
useEffect(() => {
const getMovies = async () => {
const movieData = await fetchMovies();
if (movieData) {
setMovies(movieData); // 영화 데이터를 상태로 설정
} else {
setError('Failed to fetch movies'); // 오류 메시지 설정
}
};
getMovies(); // 컴포넌트가 마운트될 때 한 번 실행
}, []); // 빈 배열을 전달하여 한 번만 실행되도록 함
여기서 빈 배열을 두는 이유는!??
4. 빈 배열 []의 의미
useEffect의 두 번째 인자로 빈 배열 []을 전달하는 것은 특정 사이드 이펙트가 컴포넌트의 마운트 시점에 한 번만 실행되도록 한다. 즉, 컴포넌트가 처음 렌더링될 때 딱 한 번 실행되고, 그 이후에는 실행되지 않는다.
5. useEffect 와 useState 를 둘 다 사용하는 예제
useState를 사용하여 데이터를 상태로 관리하고, useEffect를 사용하여 컴포넌트가 마운트될 때 API 호출을 수행
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await axios.get('//json 코드..');
setUsers(response.data);
};
fetchUsers();
}, []);이렇게 하면 useState는 초기에는 빈 배열을 가지고 (렌더링이 되면 이 빈 배열에 데이터가 들어갈 것이다!) useEffect 는 의존성배열로 빈 배열을 가지고 오기 때문에 컴포넌트가 마운트될 때 한 번 실행된다.
6. useRef
현재 프로퍼티로 전달된 인자(initialValue) 로 초기화된 변경 가능한 ref 객체를 반환한다.
useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React 훅이다.
컴포넌트가 특정 정보를 기억하게 만들고싶지만 해당 정보가 새 렌더링을 촉발하지 않도록 하려는 경우 ref를 사용할 수 있다.
const ref = useRef(initialValue)
반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것이다.
장점
- useRef를 사용하면 DOM 엘리먼트에 직접 접근할 수 있다.
- 예를들어, 특정 입력 필드에 포커스를 설정하거나 스크롤 위치를 조정할 때 유용하다.
- useRef로 저장된 값이 변경되어도 컴포넌트가 리렌더링되지 않는다.
- => useRef는 렌더링과 상관없이 값이 유지되므로 상태를 저장하고 유지하는데 유용하다.
useRef 를 컴포넌트의 최상위 레벨에서 호출하여 ref를 선언한다는 말을 아마 본적이 있을 것이다.
이 말이 무슨 말일까....
=> useRef를 컴포넌트의 최상위 레벨에서 호출하여 ref를 선언한다는 말은 useRef 훅을 컴포넌트 함수 내에서 가장 먼저 호출하여 ref 객체를 생성한다는 의미. 이 ref 객체는 특정 DOM 엘리먼트나 값을 참조할 수 있게 해준다.
예시코드
import React, { useRef, useEffect } from 'react';
const FocusInput = () => {
// useRef를 사용하여 ref 객체를 선언
const inputRef = useRef(null);
useEffect(() => {
// 컴포넌트가 처음 렌더링될 때 input 엘리먼트에 포커스를 설정
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return (
<div>
{/* input 엘리먼트에 ref를 할당. */}
<input ref={inputRef} type="text" />
</div>
);
};
export default FocusInput;
이를 통해 컴포넌트가 처음 렌더링될 때 input 엘리먼트에 자동으로 포커스가 설정된다.
reference
https://ko.legacy.reactjs.org/docs/hooks-reference.html#useref
