구현 방식 고민
다크모드와 라이트모드에서 각각 다른 이미지 보여주고자 할 때, 라이트모드가 기본값으로 설정되도록 하려면 useState의 초기값을 false로 설정하고, 라이트모드와 다크모드에 따라 서로 다른 이미지가 나타나도록 조건부 렌더링을 해야 한다. 또한 useEffect 훅을 사용하여 페이지가 로드될 때 현재 모드를 확인하고 상태를 설정하는 로직을 추가할 수 있다.
구현한 코드
const MainPage: React.FC<MainPageProps> = ({ participants }) => {
const navigate = useNavigate();
const [isDarkMode, setIsDarkMode] = useState(false);
// 페이지 로드 시 현재 모드 확인
useEffect(() => {
const currentTheme = document.body.classList.contains('dark-mode') ? true : false;
setIsDarkMode(currentTheme);
}, []);
TypeScript
복사
이 코드에서 useEffect 훅은 페이지가 로드될 때 실행되며, 현재 body에 dark-mode 클래스가 있는지 확인한다. 이를 바탕으로 isDarkMode 상태를 설정한다. 그 결과로, 페이지가 처음 로드될 때 다크모드 또는 라이트모드에 따라 올바른 이미지가 표시된다.