useState

useState는 React의 훅(Hook) 중 하나로, 함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용되는 함수이다.

useState는 배열 형태의 반환값을 가지며, 첫 번째 요소는 현재 상태의 값이고, 두 번째 요소는 상태를 갱신하는 함수이다. 보통 첫 번째 요소는 상태를 읽고 출력하고, 두 번째 요소는 상태를 갱신하기 위해 호출된다.

예시) useState를 사용하여 숫자 상태 관리

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

useEffect

useEffect는 컴포넌트의 생명주기(lifecycle)와 관련된 동작을 수행하기 위해 사용되는 함수이다.

useEffect 함수는 컴포넌트가 렌더링된 후에 특정 동작을 수행하도록 설정하며, 또는 특정 상태나 속성(props)이 변경될 때마다 동작을 수행할 수 있습니다.

useEffect 함수의 첫 번째 인자로는 동작을 정의하는 함수를 전달하고, 두 번째 인자로는 의존성 배열(dependency array)을 전달합니다. 의존성 배열은 해당 동작이 수행되어야 하는 조건을 지정합니다. 의존성 배열이 비어있을 경우, 컴포넌트가 처음 렌더링될 때 한 번만 동작이 수행되며, 의존성 배열에 값이 포함되어 있을 경우 해당 값이 변경될 때마다 동작이 수행됩니다.

예시) useEffect 이용해 카운터 만들기

import { useState, useEffect } from "react";

function EffectCounter() {
    // count State 생성
    const [count, setCount] = useState(0)

    // useEffect 는 렌더링이 완료된 후 실행됨
    useEffect(()=>{
        console.log(`렌더링 완료! count의 값은 ${count}입니다.`)
    })

    return(
        <>
        <p>{count}</p>
        <button onClick={()=>setCount(count+1)}>눌러봐!</button>
        </>  
    )
}

export default EffectCounter

useContext

useContext는 React의 훅(Hook) 중 하나로, 컴포넌트 간에 상태를 공유하기 위해 사용되는 함수이다. useContext를 사용하면 상위 컴포넌트에서 생성된 Context 객체의 값을 하위 컴포넌트에서 직접 읽을 수 있다.

Context는 React 컴포넌트 트리를 통해 전역적으로 데이터를 공유하기 위한 메커니즘이다. 주로 상태 관리 라이브러리(예: Redux, MobX)를 사용하지 않고도 컴포넌트 간에 상태를 전달하거나 공유할 때 유용하다.

useContext를 사용하려면 먼저 Context 객체를 생성해야 한다. createContext 함수를 사용하여 Context 객체를 생성한 후, Provider 컴포넌트로 해당 Context 객체를 감싸서 상위 컴포넌트에서 값을 설정한다. 그리고 useContext를 사용하여 하위 컴포넌트에서 해당 Context 객체의 값을 읽어올 수 있다.

예시)

import React, { createContext, useContext } from 'react';

// Context 객체 생성
const MyContext = createContext();

// Provider 컴포넌트 생성
const MyContextProvider = ({ children }) => {
  const value = 'Hello, World!';

  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

// Consumer 컴포넌트 생성
const MyComponent = () => {
  const contextValue = useContext(MyContext);

  return <div>{contextValue}</div>;
};

// App 컴포넌트에서 Provider로 감싸기
const App = () => {
  return (
    <MyContextProvider>
      <MyComponent />
    </MyContextProvider>
  );
};

export default App;```