
탭 버튼 컴포넌트 만들기: 확장성과 API 연동을 고려한 React 예제
2023. 3. 21. 15:09
개발이야기/React.js
확장성 높은 tabButton을 만들어보자. 조건 1. firstButton과 secondButton을 누르면 각각에 알맞은 데이터가 보여져야한다. 2. thirdbutton, fourth button 등이 추가 될 가능성을 고려해서 만들어야한다. 구현 방법 1. 변경되는 탭 모드를 저장할 state를 만들어준다. 2. 각 탭 버튼에 고유한 값을 할당하고, 해당 값을 이벤트 핸들러에 전달한다. 3. 이벤트 핸들러에서 전달받은 값에 따라 현재 활성화된 탭을 업데이트한다. 4. 활성화된 탭에 따라 적절한 데이터를 렌더링한다. 1. 부모컴포넌트에 탭 모드를 저장할 state와 탭 모드 변경시 실행되는 함수를 만들어준다. 부모컴포넌트.tsx //탭모드를 저장한 state/ 초기값은 firstBtn으로 설정 co..