리액트 Hook

1. React 상태 (State)

• 상태는 컴포넌트의 동적인 데이터를 관리하며, 상태가 변경되면 컴포넌트가 다시 렌더링됨.
• 이 과정에서 React는 변경된 상태를 기반으로 새로운 UI를 계산한다.
• 상태는 주로 다음과 같은 경우에 사용된다:
  • 사용자 입력 처리
  • API 호출 결과 저장
  • UI의 동적인 부분 관리

상태 사용 예시

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0); // 상태 초기화

    const increment = () => {
        setCount(count + 1); // 상태 변경
    };

    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={increment}>증가</button>
        </div>
    );
};

export default Counter;

 

2. React 훅 (Hooks)

• ***훅(Hook)****은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 함수다.

 

1. 기본 훅

 

1.1. useState

• 설명: 컴포넌트에서 상태를 관리할 수 있도록 해주는 훅
• 사용법: const [state, setState] = useState(initialState);
• 배열 비구조화 할당을 사용하여 상태와 상태를 업데이트하는 함수를 반환
• 예시:

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

 

 

React의 useState 훅은 항상 2개의 요소를 가진 배열을 반환

1. 첫 번째 요소: 상태 값
2. 두 번째 요소: 상태를 업데이트하는 함수

// 둘 다 사용할 경우
const [personaStats, setPersonaStats] = useState({ ... });

// 상태 값만 사용할 경우
const [personaStats, ] = useState({ ... });

// 설정 함수만 사용할 경우
const [, setPersonaStats] = useState({ ... });

 

 

 

React의 state 업데이트가 비동기적:

// 예시 1: 비동기 동작 확인
const [count, setCount] = useState(0);

const handleClick = () => {
    setCount(count + 1);  // count를 1 증가
    console.log(count);   // 예상: 1, 실제: 0
    // 여기서는 아직 이전 값(0)이 출력됨
}

마치 타이머를 설정하는 것처럼 생각하면 됩니다:

// 실생활 예시와 비슷
console.log("1. 라면 물 올리기");
setTimeout(() => {
    console.log("3. 물 끓음"); // 3분 후에 실행
}, 3000);
console.log("2. 설거지하기");

// 출력 순서:
// 1. 라면 물 올리기
// 2. 설거지하기
// 3. 물 끓음

state 업데이트도 이와 비슷합니다:

const [name, setName] = useState("김철수");

const handleUpdate = () => {
    setName("이영희");        // state 업데이트 요청
    console.log(name);       // 여전히 "김철수" 출력
    // 아직 "이영희"로 업데이트되지 않음
}

올바른 사용법:

// 방법 1: useEffect 사용
useEffect(() => {
    console.log(name); // state가 업데이트된 후 실행됨
}, [name]);

// 방법 2: 이전 값을 기반으로 업데이트
setName(prevName => {
    console.log(prevName); // 현재 값을 정확히 알 수 있음
    return "이영희";
});

실제 사용 예시:

// 잘못된 방법
const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    // 예상: count가 3 증가
    // 실제: count가 1만 증가
}

// 올바른 방법
const handleClick = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    // count가 3 증가함
}

이렇게 비동기적으로 동작하는 이유:

1. 성능 최적화: 여러 state 업데이트를 한 번에 처리
2. 불필요한 재렌더링 방지
3. 일관성 있는 UI 업데이트 보장

 

1.2. useEffect

• 설명: 사이드 이펙트를 처리하는 훅으로, 컴포넌트의 생명주기 메서드와 유사한 기능을 제공.
• 사용법: useEffect(() => { /* 사이드 이펙트 코드 */ }, [dependencies]);
• 두 번째 인자로 의존성 배열을 받아 특정 상태나 props가 변경될 때만 실행하도록 설정
• 예시:

useEffect(() => {
    console.log('컴포넌트가 마운트되었거나 업데이트됨');
}, []);

 

2. 라우팅 관련 훅

 

2.1. useParams

• 설명: URL의 동적 파라미터를 가져오는 훅.
• 사용법: const { paramName } = useParams();
• 예시:

const { id } = useParams(); // URL에서 id 파라미터 추출

 

2.2. useLocation

• 설명: 현재 위치 객체를 가져오는 훅으로, URL의 경로, 쿼리 문자열, 해시 및 상태 정보를 포함.
• 사용법: const location = useLocation();
• 예시:

const pathname = location.pathname; // 현재 경로
const search = location.search; // 쿼리 문자열

 

2.3. useHistory (v5) / useNavigate (v6)

• 설명: 페이지 이동을 관리하는 훅입니다. v6에서는 useNavigate로 변경.
• 사용법: const navigate = useNavigate();
• 예시:

const navigate = useNavigate();
const goToHome = () => navigate('/home'); // 홈으로 이동

 

3. 추가 훅

 

3.1. useContext

• 설명: Context API를 사용하여 전역 상태에 접근할 수 있게 해주는 훅.
• 사용법: const value = useContext(MyContext);
• Context의 Provider로부터 값을 추출하여 사용할 수 있음
• 예시:

const theme = useContext(ThemeContext); // 테마 정보 가져오기

 

3.2. useReducer

• 설명: 복잡한 상태 로직을 관리할 수 있는 훅으로, Redux와 유사한 방식으로 상태를 업데이트.
• 사용법: const [state, dispatch] = useReducer(reducer, initialState);
• 예시:

const [state, dispatch] = useReducer(reducer, { count: 0 });

 

4. 커스텀 훅

• 설명: 여러 훅과 상태 로직을 재사용하기 위한 사용자 정의 훅.
• 사용법 : 함수 이름을 use로 시작하고, 상태 및 훅을 내부에서 사용할 수 있음
• 예시:

const useFetch = (url) => {
    const [data, setData] = useState(null);
    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(url);
            const result = await response.json();
            setData(result);
        };
        fetchData();
    }, [url]);
    return data;
};