ReactJS Hook Pattern ~Context와 함께 Hook 사용~

Source: Dev.to

use 훅을 Context와 함께 사용하기

• ReactJS 19에서 use 훅이 도입되어 useContext 훅보다 더 유연하게 컨텍스트 값을 읽을 수 있게 되었습니다.
• use 훅은 if 문이나 반복문 안에서 조건부로 호출할 수 있어, 컴포넌트에서 동적인 동작을 구현하기에 적합합니다.

import { createContext, useContext, use } from "react";
import "./app.css";

const ThemeContext = createContext(null);

function Button({ show, children }) {
  if (show) {
    const theme = use(ThemeContext);
    const className = "button-" + theme;
    return { children };
  }

  return null;
}

function App() {
  return (
    <div>
      {/* UI elements go here */}
    </div>
  );
}

export default App;

Context와 함께 Use Hook 사용하기

(원본 기사에서는 코드 스니펫 뒤에 이 제목이 포함되어 있었습니다.)