react
react createContext, useContext,
sunny___
2024. 5. 17. 16:42
반응형
context 생성: import { createContext } from "react"
import { createContext } from "react";
// 기본값으로는 null을 넣어준다.
export const ThemeContext = createContext(null);
context 연결 <ThemeContext.Provider value={{ isDark, setIsDark }}>
import { useState } from "react";
import "./App.css";
import Page from "./Compopnents/Page";
import { ThemeContext } from "./context/ThemeContext";
function App() {
const [isDark, setIsDark] = useState(false);
return (
// 📌
<ThemeContext.Provider value={{ isDark, setIsDark }}>
<Page />
</ThemeContext.Provider>
);
}
export default App;
context 사용 & 변경
- import { useContext } from "react"
- const { isDark, setIsDark } = useContext(ThemeContext);이때 setIsDark 콜하면 전체화면 refresh됨
import { useContext } from "react";
// 📌
import { ThemeContext } from "../context/ThemeContext";
const Header = () => {
// 📌
const { isDark, setIsDark } = useContext(ThemeContext);////////////////////////
return (
<header
className="header"
style={{
backgroundColor: isDark ? "black" : "lightgray",
color: isDark ? "white" : "black",
}}
>
<h1>Welcome 홍길동!</h1>
</header>
);
};
export default Header;
context를 가장 상위에서 불러와서 쓰기 때문에 전체 화면 refresh되는 것인지?
context를 state전용, dispatch전용으로 나누어써야 불필요한 렌더링 막을수 있다고 하는 예제https://velog.io/@shin6403/React-ContextAPI-%EC%9D%B4%EB%A0%87%EA%B2%8C-%EC%8D%A8%EB%B3%B4%EC%9E%90
[React] ContextAPI 이렇게 써보자
어느날 구글링을 하다가 어떠한 글을 보았다.Context API는 왜 안쓰나요?ContextAPI를 쓰는 글쓴이에게 굉장히 관심이 가는 글이었고, 내용을 결론은 소규모 프로젝트에서는 ContextAPI가 좋지만 성능 때
velog.io
useReducer, useCallback, memo등을 같이 사용하고 있음
반응형