ReactJS에서 클릭된 항목에 Active Class 추가하는 방법

제목: ReactJS에서 클릭된 항목에 활성 클래스 추가하는 방법

ReactJS에서 네비게이션 바에서 클릭된 항목에 활성 클래스를 추가하는 것은 상태를 조작하고 조건부 렌더링을 활용하여 달성할 수 있습니다. 이 블로그 포스트에서는 ReactJS 애플리케이션에서 선택된 네비게이션 바 링크에 활성 클래스를 추가하는 과정을 안내해 드리겠습니다.

현재 방식의 문제점

제공된 코드 조각에서는 현재 방식으로 활성 클래스를 추가하는 것이 잘못되었습니다. getElementsByClassName을 사용하여 수동으로 DOM을 조작하는 대신, React의 상태 관리를 활용하여 이 기능을 처리하는 것이 권장됩니다.

더 나은 접근 방식: 상태와 조건부 렌더링 활용

문제를 해결하기 위해 기존 코드를 수정하여 React의 상태를 활용하고 조건부 렌더링을 활용하여 활성 클래스를 선택된 네비게이션 바 링크에만 추가할 수 있습니다.

class SideNavbar extends React.Component {
  state = {
    links: [
      { id: 1, name: "링크1", to: "/cms", className: "side_nav_item" },
      { id: 2, name: "링크2", to: "/cms", className: "side_nav_item" },
      { id: 3, name: "링크3", to: "/cms", className: "side_nav_item" },
      { id: 4, name: "링크4", to: "/cms", className: "side_nav_item" }
    ],
    activeLink: null
  };

  handleClick = id => {
    this.setState({ activeLink: id });
  };

  render() {
    const { links, activeLink } = this.state;

    return (
      <div>
        {links.map(link => {
          return (
            <div key={link.id}>
              <ul>
                <li
                  onClick={() => this.handleClick(link.id)}
                  className={
                    link.className +
                    (link.id === activeLink ? " active_item" : "")
                  }
                >
                  {link.name} {link.id === activeLink && "active!"}
                </li>
              </ul>
            </div>
          );
        })}
      </div>
    );
  }
}

ReactDOM.render(<SideNavbar />, document.getElementById("root"));

이 수정된 접근 방식에서는 활성 링크의 id를 저장하기 위해 activeLink라는 상태 요소가 도입됩니다. handleClick 함수는 링크를 클릭할 때마다 상태에서 활성 링크를 업데이트하는 역할을 합니다. 렌더 메서드에서는 클래스 이름 연결 기술을 사용하여 선택된 링크에 대해 활성 클래스를 조건부로 적용합니다.

결론

제안된 접근 방식을 구현함으로써 ReactJS 애플리케이션의 네비게이션 바에서 클릭된 항목에 활성 클래스를 추가할 수 있습니다. 이 기능을 더 효율적이고 구성된 방법으로 달성하기 위해 React의 상태 관리와 조건부 렌더링에 의존하는 것을 기억하십시오.

ReactJS에서 클릭된 항목에 활성 클래스를 추가하는 중에 문제가 발생한 적이 있으신가요? 아래 댓글에서 경험을 공유해주세요!

참고 자료 : 

reactjs