[React] Ep2. Hook API

안녕하세요. 모리스입니다.🙂

이번 포스트에서는 지난 포스트에 이어서 React의 Hook API에 대해서 작성해볼게요.

 

React의 Hook API를 사용해 프로젝트를 진행하면서, 가장 기본적이면서 많이 사용하는 세 가지

useState, useEffect, useContext에 대해서 알아볼게요!

 

✅ useState

컴포넌트 내부에서 상태값(state) 을 유지할 수 있게 해주는 가장 기본적인 Hook이예요.

📌 주요 개념

• useState는 상태값과 해당 상태를 갱신할 수 있는 함수를 반환해요.
• 컴포넌트가 처음 렌더링될 때, 반환된 state는 전달한 initialState 값으로 초기화 돼요.

const [state, setState] = useState(initialState);

💡 쉽게 말하면 위 코드에서 state는 initialState로 초기화된 상태값이고, setState는 이를 업데이트할 수 있는 함수입니다.

• setState(newState) 를 호출하면 새로운 값으로 상태가 변경되고, 컴포넌트가 리렌더링.
• 리렌더링 후에는 항상 변경된 값을 사용!

💻 예제

import React, { useState } from 'react';

export default function StateEx() {
  const [firstState, setFirstState] = useState(1);

  const setStateFunc = () => {
    setFirstState(2);
  }

  return (
    <TouchableOpacity onPress={setStateFunc}>
      <Text>{firstState}</Text>
    </TouchableOpacity>
  );
}

 

---

✅ useEffect

컴포넌트 렌더링 이후에 사이드 이펙트(Side Effect) 를 수행할 수 있게 해주는 Hook이예요.

📌 주요 개념

• useEffect는 명령형 코드나 비동기 작업을 실행할 수 있는 함수예요.
• 렌더링이 완료된 이후에 실행된다는 것을 꼭 명심하세요!!
• useEffect 함수의 두 번째 인자로 받는 deps는 배열형태안에 검사하고자 하는 특정 값(state)를 넣으면 해당 값이 변경 될 때마다 useState함수가 실행돼요. 빈 배열로 넣으면 컴포넌트가 처음 마운트 될 때 한 번만 실행 돼요.

 

useEffect(() => {
  // 실행할 작업
}, [deps]);

• [] : 컴포넌트가 처음 마운트될 때 한 번만 실행.
• [변수] : 특정 상태값이 변경될 때마다 실행.
• 반환된 함수는 언마운트 시 실행.

💡 componentDidMount, componentDidUpdate, componentWillUnmount 를 대체할 수 있습니다.
단, 실행 시점은 렌더링이 끝난 직후로 비동기 지연 이벤트 이후에 실행됩니다.

💻 예제

import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

export default function EffectEx() {
  const [firstState, setFirstState] = useState(false);

  // 최초 마운트 시 실행
  useEffect(() => {
    console.log('첫 렌더링!');
  }, []);

  // firstState가 변경될 때마다 실행
  useEffect(() => {
    console.log('firstState 값 변경 감지!');
  }, [firstState]);

  return (
    <View>
      <TouchableOpacity onPress={() => setFirstState(!firstState)}>
        <Text>Click!</Text>
      </TouchableOpacity>
    </View>
  );
}

출력 예시:

• 앱 시작 시: '첫 렌더링!'
• 버튼 클릭 시: 'firstState 값 변경 감지!'

---

✅ useContext

컴포넌트 트리에서 공통 데이터를 공유하기 위한 Hook이예요.
Context API를 더 간단하게 사용할 수 있는 방법!!

📌 주요 개념

• React.createContext()로 생성한 Context 객체를 인자로 받아 해당 Context의 현재 값을 반환해요.
• 가장 가까운 <Context.Provider>의 value 참조!!

const value = useContext(MyContext);

• Provider가 갱신되면, 해당 Context를 사용하는 모든 컴포넌트는 자동으로 리렌더링!
• context 값이 변경될 때마다 최신 상태를 반영!

💡 useContext(MyContext)는 클래스 컴포넌트에서
static contextType = MyContext 또는 <MyContext.Consumer> 와 같은 역할을 합니다.

⚠️ 단, useContext()는 Context를 구독만 할 수 있고, 값을 직접 수정할 수는 없습니다.

 

---

📝 마무리

Hook 기능 요약

useState	컴포넌트의 상태값 선언 및 갱신
useEffect	렌더링 후 동작(사이드 이펙트) 처리
useContext	Context 값 구독 및 컴포넌트 간 데이터 공유

React Hook을 잘 활용하면 불필요한 상태관리 라이브러리 없이도
간단하고 직관적인 컴포넌트를 만들 수 있어요.

 

잘 못되었거나 수정할 부분이 있다면 언제든 댓글로 혼내주시길 바랍니다.!!

오늘도 긴 글 읽어주셔서 감사합니다.😊