화면 구현 후기(코드아님): 컴포넌트 사용법

한/영 변환 기능을 구현하며 몇 가지 깨달음을 얻었다.

처음에는 "화면이 내가 원하는 대로만 보이면 된다"는 생각으로 작업을 시작했다. 그래서 MUI에서 제공하는 컴포넌트 중 Breadcrumbs 디자인이 마음에 들어 선택해서 활용했다.

 

그러나 Breadcrumbs는 단순히 디자인 요소가 아니라 "내비게이션 경로"와 같은 순서를 내포하는 의미를 가지고 있었다. 예를 들어, 내폴더 > 다운로드 폴더처럼 사용자가 경로를 따라 이동하는 구조를 나타냈다.

이를 통해 컴포넌트를 선택할 때 단순히 디자인만 고려할 것이 아니라, 해당 컴포넌트가 가진 의미와 역할까지 이해하고 활용해야 한다는 점을 깨달았다.

 

내가 구현하고자 했던 것은 단순히 한국어/영어 변환 기능으로, 사용자가 한국어나 영어를 선택할 수 있는 기능이면 충분했다. 그래서 Breadcrumbs 대신 ToggleButton을 사용하는 것으로 변경했다.

이 경험을 통해 UI 컴포넌트를 선택할 때의 의미의 중요성과 접근 방식을 다시 한번 배우게 되었다.

 

 

 

- Breadcrumbs

A breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors. (적혀있었다.. 설명을 읽어보고 사용하자!!)

https://mui.com/material-ui/react-breadcrumbs/

 

 

- Toggle Button

A Toggle Button can be used to group related options.

https://mui.com/material-ui/react-toggle-button/

 

 

 

---

 

 

또한,

AuthLayout 화면에서 한/영 변환 기능을 구현하며 새로운 조언을 듣고 개선점을 발견했다.

처음에는 한국어 버튼이 활성화(active)되거나 비활성화(inactive)될 때 실행되는 동작을 하나의 메서드로 정의했다.

하지만 해당 메서드가 AuthLayout 화면에서 발생하는 동작이다 보니, 메서드 이름만 본다면 "Auth가 활성화 또는 비활성화되는 동작"으로 오해할 수 있다는 지적을 받았다.

 

이를 통해 한/영 변환 기능은 AuthLayout의 역할과 분리해야 한다고 판단했다. 따라서 이 기능을 별도의 컴포넌트로 분리해 독립적으로 관리하기로 했다.

이 경험을 통해 기능과 역할을 명확히 분리하고, 코드의 가독성과 유지보수성(컴포넌트로 빼면 나중에 재사용하기도 쉽다!)을 높이는 방법을 배우게 되었다.