‘React’에서 상태 관리와 onClick 이벤트를 사용하여 선택된 탭에 ‘Active’ 클래스를 추가하는 방법

React 문제 해결: 선택한 탭에 “active” 클래스 추가하기

React 애플리케이션에서 선택한 탭에 “active” 클래스를 추가하려고 할 때 문제가 발생하나요? 걱정 마세요! 이 블로그 포스트에서는 일반적인 문제를 다루고 React의 상태 관리를 사용한 해결책을 제공합니다. 이 포스트를 끝까지 읽으면 어떤 탭을 선택하더라도 “active” 클래스를 쉽게 추가할 수 있게 될 것입니다.

문제

먼저 문제를 이해해 봅시다. Tab이라는 컴포넌트를 구현했을 수 있습니다. 이 컴포넌트는 탭 목록을 렌더링합니다. 각 탭에는 activateTab이라는 함수를 호출하는 클릭 이벤트 리스너가 있습니다. 이 함수의 목적은 선택한 탭에 “active” 클래스를 추가하는 것입니다. 그러나 같은 탭을 다시 클릭하더라도 클래스가 추가되지 않는 것을 알 수 있습니다.

해결책

문제는 상태 관리를 부모 컴포넌트인 Tabs로 이동하고 필요한 props를 자식 컴포넌트인 Tab로 전달하여 해결할 수 있습니다. 이렇게 하면 클래스 이름을 감지하고 부모 컴포넌트에서 새 상태를 설정할 수 있습니다.

var Tab = React.createClass({
  render: function() {
    return (
      <li
        className={this.props.isActive ? 'navigation--active' : ''}
        onClick={this.props.onActiveTab}
      >
        <p>{this.props.content}</p>
      </li>
    );
  }
});

var Tabs = React.createClass({
  getInitialState: function() {
    return { selectedTabId: 1 };
  },
  
  isActive: function(id) {
    return this.state.selectedTabId === id;
  },
  
  setActiveTab: function(selectedTabId) {
    this.setState({ selectedTabId });
  },
  
  render: function() {
    var total = this.props.data.points.total;
    var tabs = total.map(function(el, i) {
      return (
        <Tab
          key={i}
          content={el.name}
          isActive={this.isActive(el.id)}
          onActiveTab={this.setActiveTab.bind(this, el.id)}
        />
      );
    }, this);
                
    return <ul className="navigation">
      {tabs}
    </ul>
  }
});

해결책 탐구

해결책을 자세히 살펴봅시다. 상태 관리를 부모 컴포넌트인 Tabs로 이동함으로써 isActive와 setActiveTab이라는 두 개의 새 함수를 도입했습니다. 이러한 함수를 사용하면 탭이 활성화되어 있는지 확인하고 새 탭을 활성화할 수 있습니다.

Tabs 컴포넌트의 render 함수에서는 total 배열을 맵핑하여 여러 개의 Tab 컴포넌트 인스턴스를 생성합니다. 우리는 content, isActive, onActiveTab 같은 필요한 props를 전달합니다. 이러한 props를 사용하여 탭이 활성화되어 있는지 확인하고 탭을 클릭할 때 setActiveTab 함수를 트리거할 수 있습니다.

React 코드 업데이트

이제 해결책을 가지고 코드를 업데이트할 수 있습니다. 위에서 설명한대로 변경 사항을 구현하고 선택한 탭에 “active” 클래스가 신뢰성 있게 추가되는 것을 즐기세요.

마무리

이 포스트에서는 React 애플리케이션에서 선택한 탭에 “active” 클래스를 추가하는 일반적인 문제를 다루었습니다. 상태 관리를 부모 컴포넌트로 이동하고 필요한 props를 전달함으로써 문제를 효과적으로 해결할 수 있었습니다. 코드에 이러한 변경 사항을 적용하고 원하는 동작을 관찰하세요.

이 포스트가 문제를 해결하고 디버깅에 도움이 되었기를 바랍니다. React로 즐거운 코딩하세요!

참고 자료 : 

reactjs