메뉴 클릭시 색깔 나타내기

결과

내용

• 메뉴 클릭시 색깔 나타내고 해당 페이지로 전환

코드

const [changeColor, setChangeColor] = useState(false);

  const handleColor = () => {
    //changeColor -> true
    setChangeColor(!changeColor);
  };

  return (
    //메뉴 클릭시 handleColor 함수 호출
    //changeColor -> true
    <LNB_MeNU_A onClick={handleColor} changeColor={changeColor}>
          <Menu_Name>Project List</Menu_Name>
        </LNB_MeNU_A>
        <LNB_MeNU_B onClick={handleColor} changeColor={changeColor}>
          <Menu_Name>Chart</Menu_Name>
        </LNB_MeNU_B>
);

//styled-component
// changeColor가 true 이면 부모의 색깔
const LNB_MeNU_A = styled(Category)`
  background-color: ${change =>
    change.changeColor ? 'inherit' : 'rgba(44, 120, 255, 0.25)'};
`;

// changeColor가 true 이면 색깔을 바꿔줌
const LNB_MeNU_B = styled(Category)`
  background-color: ${change =>
    change.changeColor ? 'rgba(44, 120, 255, 0.25)' : 'inherit'};
`;