Nextjs - Focus 되는 NavBar 만들기

동아리에서 진행하는 프로젝트 중 세부 nav 바 중 하나의 item을 클릭하면 그에 맞춰 포커스가 유지되는 nav 바를 만들어보았다. 

 

현재 Nextjs를 사용 중이다.

 

일단 결과를 먼저 보면 이렇다.

hover했을 때 색깔이 변경되고 클릭하게 되면 foucs가 유지되어 선택된 항목은 계속 색깔이 바뀐 채로 있는다.

 

사실 이걸 맨 처음 구현하려고 했을 때 foucs 이벤트를 걸어줘야겠다고 생각했다.

 

근데 Nextjs 상으로 focus를 걸어주는 방법은 useRef를 사용하여 걸어주는 방법이 있는데 여러개 항목을 다 ref로 컨트롤하고 그때그때마다 선택된 애는 focus 다른 애들은 그냥 가만히 냅두는 그런 코드를 짜는 것에 대해서 어려움도 느꼈을 뿐더러 굉장히 비효율적인 것 같다는 생각이 들었다.

 

그래서 다시 처음으로 돌아와서 생각했다.

 

결국 Focus를 시키려고 하는 이유는 선택된 애에 대해서 구별을 위해 다른 css속성을 걸어주기 위함이었다.

 

그래서 처음에 했던 "javascript에서 focus 이벤트 + css에서 ::focus 속성에 스타일 추가" 방식이 아니라

 

"javascript에서 클래스만 조작 + css에서 클래스 스타일 추가"로 접근을 했다.

 

// Navbar.jsx

const NavBar = () => {
  const [focusedItem, setFocusedItem] = useState(NavBarList[0].navItem);

  const NavBarList = [{ navItem: "인기도서" }, { navItem: "신착도서" }, { navItem: "장르별" }];

  return (
    <div className="flex ">
      {NavBarList.map((item, i) => (
        <NavItem
          key={i}
          onClick={() => {
            setFocusedItem(item.navItem);
          }}
          className={focusedItem == item.navItem ? "navItem-focus" : null}
        >
          {item.navItem}
        </NavItem>
      ))}
    </div>
  );
};



// globals.css

.navItem-focus {
  color: #c3201f;
}
.navItem-focus.navItem-focus::after {
  background-color: #c3201f;
}

onClick을 통해서 foucs할 아이템만 변경시켜주고 map으로 렌더링하면서 focus 대상이 맞으면 navItem-focus 라는 클래스를 추가해주어 color와 ::after의 background-color를 변경시켜 주었다.

 

(번외)

styled-components로 NavItem을 만들었는데, .navItem-focus::after로 하니깐 styled-components와의 우선순위에서 밀려 적용이 되지않았었다. 

공식문서를 뒤져본 결과, 이런 결과를 방지하려면 클래스 명을 두번 해주면 된다는 해결책을 찾았고 했더니 잘 적용됐다.

 

 

그렇게 focus 상태를 유지할 수 있는 Nav bar를 만들었다.