props drilling
export default function App({ theme }) {
return (
<>
<Header theme={theme} />
<Main theme={theme} />
<Sidebar theme={theme} />
<Footer theme={theme} />
</>
);
}
function Header({ theme }) {
return (
<>
<User theme={theme} />
<Login theme={theme} />
<Menu theme={theme} />
</>
);
}
위의 예시에서 Header 는 theme를 사용할 일이 없음에도 불구하고 전달받아서 내려줘야 한다
React Context
전역 데이터(현재 로그인된 사용자 정보, 테마, 언어 등) 보관에 유용
필요한 컴포넌트만 state 접근해서 사용
createContext
메서드를 사용해 context를 생성import { createContext } from 'react';
const ThemeContext = createContext('example');
value
prop을 사용해 context provider에 원하는 값을 입력const [isDark, setIsDark] = useState(false);
return (
<ThemeContext.Provider value={{isDark, setIsDark}}>
...
</ThemeContext.Provider>
);
import { ThemeContext } from './context/ThemeContext';
import { useContext } from "react';
...
const { isDark, setIsDark } = useContext(ThemeContext);
절대적인 해결책은 아님