MenuTab 구현하기

웹에서 흔히 볼 수 있는 Tab을 구현해도록 하자!

🌈전체코드

export default class MenuTab extends Component {
  state = {
    currentId: 1,
  };

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

  render() {
    return (
      <div className="wrapper">
        <ul className="tabs">
				{
          <li onClick={() => this.clickHandler(1)}>First</li>
          <li onClick={() => this.clickHandler(2)}>Second</li>
          <li onClick={() => this.clickHandler(3)}>Third</li>
          {/* ==> map함수로 변경 */}
          {CATEGORY_ARR.map((category, idx) => {
            return (
              <li key={category} onClick={() => this.clickHandler(idx + 1)}>
                {category}
              </li>
            );
          })}
        </ul>
        <div className="contents">{MAPPING_OBJ[this.state.currentId]}</div>
      </div>
    );
  }
}

//변하는 값이 아니기 때문에 클래스 밖에서 변수 선언
const MAPPING_OBJ = {
  1: <First />,
  2: <Second />,
  3: <Third />,
};

//조건문 대신 객체로 맵핑!
const CATEGORY_ARR = ["First, Second, Third"];

---

처음 state값을 currentId:1로 초기값으로 정해줬다

state = {
   currentId: 1,
 };

그리고 사용자가 tab을 눌렀을때의 (onCllick) 함수를 실행시켜주었다

<li onlick={() => this.clickHandler(1)}> First</li>

click 함수가 실행되면서 인자로 id를 받고 state값을 들어오는 인자 값으로 바뀐다.

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

currentId 값을 조건부렌더링을 걸어주고, id값에 맞는 컴포넌트가 보여진다

{this.state.currentId ===1 && <First />
{this.state.currentId ===2 && <Second />
{this.state.currentId ===3 && <Third />

🌈반복되는 코드 줄이기

여기 반복되는 코드를 줄여보자

  {this.state.currentId === 1 && First}
  {this.state.currentId === 2 && Second}
  {this.state.currentId === 3 && Third}

전역변수로 객체안에 Key : value 로 Key에는 숫자, Value에는 컴포넌트를 넣을 수 있다

const MAPPING_OBJ = {
  1: First,
  2: Second,
  3: Third,
};

그리고 [ ] 배열안에 state의 currentId값을 넣어주고
반복되는 코드 대신 작성해준다

 { MAPPING_OBJ [this.state.currentId] 

---

여기 반복되는 함수실행을 줄여보자

<li onlick={() => this.clickHandler(1)}> First </li>
<li onlick={() => this.clickHandler(2)}> Second </li>
<li onlick={() => this.clickHandler(3)}> Third </li>

전역변수로 지정해주고 [ ] 배열안에 바뀌는 Tab 스트링을 넣어준다!

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

변수 CATEGORY_ARR를 map을 돌려주고 인자로 category와 index를 넣어준다
여기서 key 값을 idx를 주고 원래 기본 1,2,3 대신 idx+1를 넣어줘야한다(state을 1로 설정했기 때문이다!) 또 className으로 주는 이유도 1,2,3 전부 다르기 때문에
변수로 지정해준 category로 설정해준다!

  {CATEGORY_ARR.map((category, idx) => {
            return ( <li key={idx}
                onClick={() => this.clickHandler(idx + 1)}
                className={category} >