[ETC] 하단 탭 바 코드 리팩토링

[SEMINSEMINSEMIN]

하단 탭 바 코드 리팩토링

관련 이슈: #20

• [x] 리렌더링 방지: c6d24bbbac3e21158702db9ed7a6008e0d83ea19
• [x] 하위 페이지에서도 스타일이 잘 적용되도록: 15789b08050b7168440a379ed60503f4aa2ad41d
• [x] 탭 바 컨테이너 스타일 수정: a4ea5c0821c425f4539960c5e64fb847e49ca2d8
• [x] 동적으로 CSS 클래스 추가: d1759a74b28800b375cd233ed5ef058345cf0521

[github-actions[bot]]

Branch refactor/issue-29 created for issue: [ETC] 하단 탭 바 코드 리팩토링

[SEMINSEMINSEMIN]

하단 탐색 바 활성화 스타일 조건부 렌더링으로 구현

코드 수정 전

useState와 useEffect를 이용해 활성화된 탭의 경우 스타일을 적용하는 방법을 사용했습니다. 그런데 이 방법의 문제점은 useEffect의 경우 브라우저에 그려진 후 실행되는 것이기 때문에 리렌더링이 발생할 것이라고 생각했습니다.

코드 수정 후

조건부 렌더링을 이용해 리렌더링을 방지했습니다.

이 방법의 문제점

하위 페이지에서는 활성화 스타일이 적용되지 않습니다.

하단 탐색 바 하위 페이지에서도 활성화 스타일이 적용되도록 수정

코드 수정 후

String.prototype.includes()를 이용했습니다.

이 방법의 문제점

단, 이 경우 네브바 사용을 고려해 페이지 링크 구조를 짜야 합니다.