라우터 이동할 때마다 특정 컴포넌트의 스타일 바꾸기

게코젤리·2022년 9월 15일
0


리액트로 쇼핑몰 만들고 있다.
위와 같이 Login 부분의 폰트 컬러를 페이지마다 다르게 하고 싶었다.

1. 리덕스 배운 김에 써봤다.

store.js에 다음과 같이 state를 만들고

"/Main", "/Men"로 라우터 이동해서 각각의 컴포넌트가 렌더링 될 때마다 위에서 만든 state를 ""값 또는 "white"로 변경하도록 했다.

Main.js

import { useDispatch, useSelector } from "react-redux";
import { setNavItemColor } from "../../store";
const Main = () => {
  const dispatch = useDispatch();
  const navItemColor = useSelector((state) => state.navItemColor);
  
  useEffect(() => {
    dispatch(setNavItemColor(""));
  }, []);

  return (
    <>
      <Banner />
    </>
  );
};

Men.js

import { useDispatch, useSelector } from "react-redux";
import { setNavItemColor } from "../../store";
const Men = () => {
  const dispatch = useDispatch();
  const navItemColor = useSelector((state) => state.navItemColor);
  useEffect(() => {
    dispatch(setNavItemColor("white"));
  }, []);

  return <div className="men"></div>;
};
export default Men;

그리고 Nav컴포넌트에서 state를 className에 넣어준다.
Nav.js

import { useSelector } from "react-redux";

const Nav = () => {
  const navItemColor = useSelector((state) => state.navItemColor);
  return (
    <>
    	<ul className={`${styles[navItemColor]}`}>
    </>
  )
}

module.css 사용시 className에 변수 넣는 방법을 몰라서 한참 애먹었다. {${styles.navItemColor}} 로도 될 것 같은데 저러면 navItemColor를 죽어도 변수로 인식을 못한다. 정확한 이유는 모르겠지만 []을 사용하면 된다는 건 알았다.

어쨌든 기능 구현은 성공했는데 이렇게까지 해야되나 싶다. 페이지가 늘어나면 각 컴포넌트마다 저 긴 코드가 다 들어가야 됌. 그냥 App.js에 state를 만들어서 해보자.

2. 그냥 App.js에 state 만들기

App.js에 userColor라는 state 만들고

function App() {
  const [userColor,setUserColor] = useState("");

  return (
    <div className="App">
      <Nav userColor={userColor}/>
      <Routes>
        <Route path="/" element={<Main setUserColor={setUserColor}/>}></Route>
        <Route path="/men" element={<Men setUserColor={setUserColor}/>}></Route>
      </Routes>
    </div>
  );
}

Main.js

const Main = (props) => {
  useEffect(() => {
    props.setUserColor("");
  }, []);
  return (
    <>
      <Banner />
    </>
  );
};

Men.js

const Men = (props) => {
  useEffect(() => {
    props.setUserColor("white");
  }, []);
  return <div className={styles.men}></div>;
};

Nav.js

const Nav = (props) => {
	return(
    	<ul className={`${styles[props.userColor]}`}>
    )
}

리덕스를 어제 처음 배워서 위에 짠 코드가 잘 짰을리 만무하지만 어쨌든 간단한 건 굳이 리덕스를 쓸 필요가 없다는 걸 배웠다.
물론 사이트가 커지면 쓸 수 밖에 없다는데..
저게 필요한 프로젝트의 코드는 얼마나 더러울까 벌써 머리가 아프다.

아무튼 성공.
useEffect가 꼭 필요한가에 대한 의문이 아직 있긴 한데 안 쓰면 warning뜨니까 일단 쓰고 넘어가도록 하자.

0개의 댓글