버튼 클릭시 눌린 버튼 상태 변화(Javascript)

프로젝트를 하면서 상단에 네비게이션바 를 만들어야 할 수요가 생겼다.

그래서 실제 다른 웹페이지들처럼 누르면 누른 버튼 상태가 바뀌고 또 그 상태에서 다른 버튼을 누르면 이전에 눌려있던 버튼의 생김새는 원상태로 돌아오는 기능을 구현하고 싶었다.

 

---

 

가장 먼저 눌린 버튼의 상태를 변화시키기 위해 useState를 활용하고 onClick을 넣었다.

 

click한 버튼을 찾고 새로운 상태를 적용시키기 위해 id 값을 버튼마다 부여하였고(case1, case2, case3) 

 

javascript 함수인 getElementById 를 써서 id 값으로 눌린 버튼을 찾고 스타일을 바로 적용해주었다.

 

 

const Navigator = () => {

const [currentClick, setCurrentClick] = React.useState(null);

const GetClick = (e) => {
    setCurrentClick(e.target.id);
    };
    

React.useEffect(
    (e) => {
      if (currentClick !== null) {
        let current = document.getElementById(currentClick);
        current.style.color = "black";
        current.style.borderBottom = "2px solid";
        current.style.borderBottomColor = "#1c28f4";
      },
    [currentClick]
  );


return (
    <React.Fragment>
      <Wrap>
        <Logo>sleepwell</Logo>
        <CategoryContainer>
          <div></div>
          <CategoryBox id="case1" onClick={GetClick}>
            홈페이지
          </CategoryBox>
          <CategoryBox id="case2" onClick={GetClick}>
            내 컨디션
          </CategoryBox>
          <CategoryBox id="case3" onClick={GetClick}>
            분석
          </CategoryBox>
          <div></div>
        </CategoryContainer>
        <LogoutBox onClick={LOGOUT}>로그아웃</LogoutBox>
      </Wrap>
    </React.Fragment>
  );
  
 };

 

누르면 어떤 이벤트가 생기는지 확인해보기 위해 console.log를 찍어보면 버튼을 누를 때마다 눌린 버튼의 id값을 가진 element 속성이 나타난다.

 

이렇게

 

 

 

그 결과

 

 

위 움짤처럼 눌리는 버튼마다 속성이 계속 바뀌고 다 바뀌면 아무런 변화가 없다.

 

그래서 방금 눌렸던 이전 버튼의 속성을 되돌려 놓을 코드가 필요했다.

 

 

const Navigator = () => {

const [currentClick, setCurrentClick] = React.useState(null);
const [prevClick, setPrevClick] = React.useState(null);

const GetClick = (e) => {
  setCurrentClick(e.target.id);
  console.log(e.target.id);
};

React.useEffect(
    (e) => {
      if (currentClick !== null) {
        let current = document.getElementById(currentClick);
        console.log(current);
        current.style.color = "black";
        current.style.borderBottom = "2px solid";
        current.style.borderBottomColor = "#1c28f4";
      }

      if (prevClick !== null) {
        let prev = document.getElementById(prevClick);
        prev.style.color = "#bebcbc";
        prev.style.borderBottom = "none";
      }
      setPrevClick(currentClick);
    },
    [currentClick]
  );

  return (
    <React.Fragment>
      <Wrap>
        <Logo>sleepwell</Logo>
        <CategoryContainer>
          <div></div>
          <CategoryBox id="case1" onClick={GetClick}>
            홈페이지
          </CategoryBox>
          <CategoryBox id="case2" onClick={GetClick}>
            내 컨디션
          </CategoryBox>
          <CategoryBox id="case3" onClick={GetClick}>
            분석
          </CategoryBox>
          <div></div>
        </CategoryContainer>
        <LogoutBox onClick={LOGOUT}>로그아웃</LogoutBox>
      </Wrap>
    </React.Fragment>
  );
};

현재 클릭한 버튼 값을 이전 값 설정(setprevClick)에 넘겨주고 -> setPrevClick(currentClick)

 

다음 값을 누르면 이전 버튼값(prevClick)의 State는 방금 눌러서 전달해 주고 간 값을 갖게 된다.

 

그리고 현재 버튼 누른 상태가 변화할 때마다 렌더링을 시키기 위해 useEffect의 두 번째 인자에 [currentClick] 을 지정하였다.

 

그 결과

 

 

 

 

 

 

 

잘 변한다. 

 

속이 편안해진다.

 

여기서 멈추지 않고 눌렀을 때마다 보여줄 컴포넌트를 연결시켜보았다.

 

임의로 만든 GetClick 함수에 id 값으로 찾고 넘겨주기 때문에 이것을 history에 주소 값으로 넘기면 될 것 같았다.

 

그래서 id 값을 Route 경로로 지정해둔 값으로 바꿨다.

 

홈페이지에 떠야 하는 캘린더 컴포넌트는 경로가 '/calendar' 였기 때문에 홈페이지 버튼의 id를 calendar로 바꾸고 연결했다.

 

 

id 값 변경

id 값을 이용해 페이지 이동

 

 

그 결과 아래 움짤처럼 홈페이지 버튼을 누르면 달력 화면이 잘 뜬다.

 

나머지 화면도 페이지 구성하고 이렇게 연결하면 될 것 같다.