material ui를 써보니 처음에는 여러 컴포넌트를 가져다 쓰려니 Document를 계속 찾아보면서 사용하느라 너무 힘들었다... 특히 배치를 하려면 결국에는 sx 속성을 이용하여 width, height 같은 style 속성을 잘 넣어줘야하고, display 속성값도 flex나 relative, absolute 등 특정 상황에 맞는 옵션을 잘 선택하여 사용해야하고, 반응형 레이아웃 관련 컴포넌트 중, Grid 컴포넌트 이해하는 것이 조금 어려운 편이였던 것 같다. 다만, 전체적인 react와의 호환성과 TypeScript로도 잘 짜여진 Example 코드 등 문서화가 아주 잘 되어있어서 일주일정도 사용하다보니 손에 익어서 이제는 일반 컴포넌트로 만들기가 싫을 정도로 아주 좋은 퀄리티로 잘 사용하고있다.
다만, 한가지 에러사항이 있었는데 작은 크기의 버튼이나 이미지 등을 배치하거나, IconButton 등의 컴포넌트를 사용할 때, 내가 원하는 형태로 사이즈 조절이 잘 안되거나 margin, padding, minSize 속성이 들어가있는 경우가 있었는데, 생각보다 많이 이러한 상황이 펼쳐졌다.
이러한 경우, 일일이 옵션을 넣어서 레이아웃이 잘 맞춰지나 확인하는 작업이 필요하게 되는데, 조금 더 간단한 방법을 깨달았다.
개발자 옵션에서 컴포넌트 탭으로 들어가면
아이콘이 보이는데, 선택 아이콘을 클릭하여 페이지의 컴포넌트를 클릭해보면, 해당 컴포넌트 레이아웃의 스타일 객체를 열어볼 수 있다.
잘 확인해보면 minHeight나 minWidth, margin, padding 등이 어떻게 들어가있는지 객체 형태로 확인 및 실시간으로 값을 변경해서 적용해보는 것도 가능하다.
'S급 프론트엔드 개발자로 회귀하다' 카테고리의 다른 글
S급 프론트엔드 개발자로 회귀하다 007화. Blocked aria-hidden on a <button> element 에러 해결 (포커싱 에러) (0) | 2024.08.01 |
---|---|
S급 프론트엔드 개발자로 회귀하다 006화. 너의 모든 순간, 날짜 데이터를 관리해줄게 - moment.js (0) | 2024.07.11 |
S급 프론트엔드 개발자로 회귀하다 004화. List 구현하기 - 스크롤링을 하면 스크롤바가 덜덜 떨리네 (0) | 2024.07.08 |
S급 프론트엔드 개발자로 회귀하다 003화. 나는 리엑트의 새로운 페이지가 필요해 (0) | 2024.05.16 |
S급 프론트엔드 개발자로 회귀하다 002화. 웹프론트엔드, 시작은 개발 환경 설정부터 (0) | 2024.04.25 |