[React] Hooks

😀 Hooks DOC

---

https://react.dev/reference/react

Built-in React Hooks – React

 

😀 useCallback

---

https://react.dev/reference/react/useCallback

useCallback – React

const cachedFn = useCallback(fn, dependencies);

 

 

 

 

😀 useState

---

https://react.dev/reference/react/useState

useState – React

상태를 사용하여 입력 값을 저장할 수 있고, 수정할수 있음

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

 

useContext

---

https://react.dev/reference/react/useContext

useContext – React

 

정보를 props로 전달하지 않고 멀리 있는 부모로부터 정보를 받을 수 있다.

 

 

useContext를 사용하여, value의 값을 C 까지 값 전달.

import { createContext, useContext } from 'react';
import './App.css'


const SampleContext = createContext<string | null>(null);

export default function App() {  
  return (
    <>
      <SampleContext.Provider value="Hello World">
        <B />
      </SampleContext.Provider>      
    </>
  );
}

export function B() {
  return (
    <>
      <C />
    </>
  );
}

export function C() {
  const getValue = useContext(SampleContext);

  return (
    <>
      <p>C</p>
      App : { getValue }
    </>
  )
}

 

 

컨텍스트를 통해 전달된 데이터 업데이트

import { createContext, useContext, useState } from 'react';
import './App.css'


const SampleContext = createContext<number | null>(null);

export default function App() {  
  const [num, setSum] = useState(0);

  const sum = () => {
    setSum((prev) => prev + 1);
  }

  return (
    <>
      <SampleContext.Provider value={num}>
        <B />
        <button onClick={sum}>SUM</button>
      </SampleContext.Provider>      
    </>
  );
}

export function B() {
  return (
    <>
      <C />
    </>
  );
}

export function C() {
  const getValue = useContext(SampleContext);

  return (
    <>
      <p>C</p>
      App : { getValue }
    </>
  )
}