[React] Menu Tab 구현하기

1차 프로젝트를 시작해보니 웹사이트의 뼈대를 이루는 요소이자 가장 자주 이용되는 패턴은 Menu Tab인 듯 싶다. 아직 직접 구성해본 적은 없지만 이번 기회에 정리해보고 다음 프로젝트 때 활용해볼 생각이다.

✅JS code

state = {
  activeId: 0
}

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

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

// obj
const obj = {
	0: <FirstComponent />
	1: <SecondComponent />
	2: <ThirdComponent />
}

⏩ onClick Handler

각 <li>태그에 onClick 이벤트를 통해 clickHandler 함수를 호출한다. 단, 각 <li> 태그는 독립적으로 작동해야 하기 때문에 각각 0,1,2의 인자를 전달해주었다.

⏩ 함수 전달과 호출의 차이

인자를 전달할 때, onClick={this.clickHandler(0)} 이렇게만 작성하면 안된다. 컴퍼넌트가 렌더되는 동시에 함수가 바로 호출되기 때문이다. 우리가 원하는 것은 클릭 시 인자를 전달 받아 clickHandler함수에 전달해주는 것이기 때문에 callback함수인 arrow function을 사용해주어야 한다.
(** (0) => this.clickHandler(0)} 이렇게 작성할 수도 없다. 0이라는 인자는 정말로 함수를 실행할 때에만 넘겨주면 되기 때문이다.)

⏩ const obj

setState를 통해 각 <li>별 id를 받아왔다면, obj를 활용해 각 컴퍼넌트와 연결할 수 있다. key값에는 태그에서 받아온 id값을, value에는 컴퍼넌트를 할당하면 된다.