TIL DAY.29 [React] Menu Tab 구현해보기!

오늘은 사이트에서 자주 사용되는 기능인 Menu Tab에 대해서 복습하는 시간이다. 메뉴 탭이 바뀌는 것에 따라 보여지는 정보도 달라지는 경우가 아주 많다, 그렇다면 이것을 코드로 효율적으로 구현 할려면 어떻게 해야할까?

바로 객체에 특정 값을 맵핑하는 테크닉을 통해 좀 더 효율적으로 메뉴 탭을 구현 할 수 있다. 그렇다면 그 방법에 대해 알아보도록 하자.

😍Menu Tab 구현하기😍

export default class ActiveTab extends Component {
  clickHandler = (id) => {
    console.log(id);
  };

  render() {
    return (
      <div className="wrapper">
        <ul className="tabs">
          <li onClick={() => this.clickHandler(0)}>First</li>
          <li onClick={() => this.clickHandler(1)}>Second</li>
          <li onClick={() => this.clickHandler(2)}>Third</li>
        </ul>
        <div className="contents">
          <First />
        </div>
      </div>
    );
  }
}

하나의 clickHandler 이라는 함수를 통해 위와 같이 3개의 컴포넌트를 조정하기 위해서는 함수의 인자(id) 값을 선언해주고 바꿔주는 형태로 할 수 있다. 하지만 this.clickHandler(0) 와 같이 인자값을 바로 넣어주면 함수가 바로 실행되버리므로 꼭 앞에다가 ()=>를 붙여서 사용해야 clickHandler 함수에 원하는 인자값을 전달해줄 수 있다.

🐱컴포넌트 객체화🐱

const obj = {
  0: <First />,
  1: <Second />,
  2: <Third />,
};

export default class ActiveTab extends Component {
  state = {
    activeId: 0,
  };

  clickHandler = (id) => {
    this.setState({ activeId: id });
  };

  render() {
    return (
      <div className="wrapper">
        <ul className="tabs">
          <li onClick={() => this.clickHandler(0)}>First</li>
          <li onClick={() => this.clickHandler(1)}>Second</li>
          <li onClick={() => this.clickHandler(2)}>Third</li>
        </ul>
        <div className="contents">{obj[this.state.activeId]}</div>
      </div>
    );
  }
}

위에서 onClick을 실행할 때 마다 index값을 바꿔줌으로써 각자 다른 컴포넌트를 불러올 수 있다는 것을 배웠다. 이제 각자의 컴포넌트를 불러올 때마다 contents 가 유동적으로 바뀔 수 있게 하기 위해서는 class component 밖에 const obj 로 컴포넌트를 객체화 시키고 clickHandler에 의해 달라지는 state값(index)을 객체에서 불러와주며 state를 바꿔주는 형식으로 사용할 수 있다. 여기서 div tag 안에서 javascript 문법을 사용하기 위해서는 {}를 사용해주어야 한다.

👀MAP 메소드 활용하여 똑같은 기능 구현하기👀

const arr = ["First", "Second", "Third"];

{arr.map((str, idx) => {
            return (
              <li key={str} onClick={() => this.clickHandler(idx)}>
                {str}
              </li>
            );
          })}

위의 li 태그가 3개보다 더 많아지면 하드코딩을 하기엔 다소 어려운감이 있기에, map메소드를 사용해서 좀 더 편리하게 만들어주도록 하자. 일단 map을 사용하기 위해 class component 밖에 arr라는 배열을 만들고 그 안에 li tag로 출력해줄 정보들을 넣어주도록 하자. 그 다음 위에 사용했던 onClick 이벤트를 맵을 돌려서 index값이 변할때마다 this.clickHandler(idx)를 불러와주도록 한다.