Tab Menu 구현하기
React에서 state를 사용해서 간단하게 Tab Menu를 구현하겠습니다.
App.js가 index페이지가 되어서, 선택하는 탭 메뉴에 따라 div.contentArea 에서 보여지는 컴포넌트가 변하도록 구현했습니다.
index페이지가 되는 App.js의 소스는 다음과 같습니다.
tab menu인 <li />를 클릭하면 changeMenu함수에서 클릭된 메뉴에 대한 index를 매개변수로 받아서 this.state.menu의 값을 업데이트 했습니다.
업데이트 된 this.state.menu의 값은 {menuList[this.state.menu]} 코드로 인해서 div.contentArea 하위에 보여지는 컴포넌트를 변경시킵니다.
div.contentArea 에 보여지는 Mail.js 와 Cafe.js는 다음과 같습니다.
tab menu에 대한 스타일 작업은 아래의 style.css를 적용시켰습니다.
위의 코드들을 실행하면 아래 이미지와 같이 Tab Menu가 정상동작하는 것을 확인할 수 있습니다.
