S급 프론트엔드 개발자로 회귀하다 005화. Material-UI 사용기 - 레이아웃 미세 조정이 힘들면 개발자 도구로

material ui를 써보니 처음에는 여러 컴포넌트를 가져다 쓰려니 Document를 계속 찾아보면서 사용하느라 너무 힘들었다... 특히 배치를 하려면 결국에는 sx 속성을 이용하여 width, height 같은 style 속성을 잘 넣어줘야하고, display 속성값도 flex나 relative, absolute 등 특정 상황에 맞는 옵션을 잘 선택하여 사용해야하고, 반응형 레이아웃 관련 컴포넌트 중, Grid 컴포넌트 이해하는 것이 조금 어려운 편이였던 것 같다. 다만, 전체적인 react와의 호환성과 TypeScript로도 잘 짜여진 Example 코드 등 문서화가 아주 잘 되어있어서 일주일정도 사용하다보니 손에 익어서 이제는 일반 컴포넌트로 만들기가 싫을 정도로 아주 좋은 퀄리티로 잘 사용하고있다.

다만, 한가지 에러사항이 있었는데 작은 크기의 버튼이나 이미지 등을 배치하거나, IconButton 등의 컴포넌트를 사용할 때, 내가 원하는 형태로 사이즈 조절이 잘 안되거나 margin, padding, minSize 속성이 들어가있는 경우가 있었는데, 생각보다 많이 이러한 상황이 펼쳐졌다.

 이러한 경우, 일일이 옵션을 넣어서 레이아웃이 잘 맞춰지나 확인하는 작업이 필요하게 되는데, 조금 더 간단한 방법을 깨달았다.

 

개발자 옵션에서 컴포넌트 탭으로 들어가면

선택

아이콘이 보이는데, 선택 아이콘을 클릭하여 페이지의 컴포넌트를 클릭해보면, 해당 컴포넌트 레이아웃의 스타일 객체를 열어볼 수 있다.

잘 확인해보면 minHeight나 minWidth, margin, padding 등이 어떻게 들어가있는지 객체 형태로 확인 및 실시간으로 값을 변경해서 적용해보는 것도 가능하다.