Material UI와 Chakra UI의 차이점

 

 

 

 

 

 

 

기존 프로젝트에서 chakra UI를 이용하여 모달을 구현하였다. 그리고 다른 프로젝트에서 만들어놓은 모달을 그대로 사용하고자 하였는데 충돌이 발생하였다. 알고 보니 그 프로젝트에서는 이미 MUI를 사용하고 있었다.

스택오버플로우를 찾아보니 가능하면 UI 라이브러리를 함께 사용하지 말라고 하였다. 충돌을 방지하게 위해 나에게 더 맞는 UI 프레임워크를 고를려고 했다. 당연히 MUI는 유명하기 때문에 도입하고자 하였지만 반응형을 제어하기에는 너무나 불편하였던 경험이 있었다.

chakra ui는 처음 써보는 것이었고.. 그래서 이 둘의 차이점을 알아보고자 한다. 아래는 chakra ui 레퍼런스에서 타 라이브러리를 비교하는 것 일부를 번역하였다.

 

Material UI와 Chakra UI의 차이점은 무엇일까요?

 

Material UI React 라이브러리는 UI 레이아웃 도구를 제공하지만, 가장 유명한 것은 개발자가 기본 스타일을 덮어쓰는 사용자 지정 스타일을 적용할 수 있는 사전 스타일 UI 구성 요소의 큰 폭을 제공하는 것입니다.

 

 

Chakra UI는 더 강력한 레이아웃 중심 라이브러리로, Material UI가 제공하는 것과 유사한 UI 구성 요소를 개발자에게 제공하지만, 유연하고 구성 가능하며 확장성 있는 코드를 생성하는 데 더 중점을 둡니다.

 

 

두 프레임워크를 비교할 때 고려해야 할 핵심 개념은 '수정 용이성'입니다. 비교적 Material UI는 내보낸 구성 요소와 레이아웃에 대한 개별 HTML 태그에 훨씬 더 많은 클래스를 추가하여 사용자 지정 인터페이스를 사용자 정의할 때 기본 스타일과 싸우도록 개발자를 강요합니다.

 

 

Chakra는 내보낸 구성 요소와 레이아웃의 CSS 클래스를 더 자유롭게 조작할 수 있도록 해주며, 이를 위해 종종 덜한 코드가 필요합니다.

 

반응형

 

예를 들어, Material UI는 뷰포트 변경에 따라 반응형 스타일링을 제어하기 위해 별도의 코드가 필요하지만, Chakra는 CSS 클래스나 미디어 쿼리를 생성할 필요 없이 반응형 스타일링을 내장 지원합니다.

 

사용자 지정 스타일링이 프로젝트에서 주요 관심사가 아니라면, 라이브러리에서 제공하는 사용자 정의 구성 요소 작성을 피할 수 있으므로 Material UI가 유용합니다.

 

확장 가능하고 사용자 정의 디자인이 프로젝트에 중요한 경우(대개 그렇습니다), 프로젝트가 시간이 지남에 따라 확장될 때 Chakra의 개발자 편의성이 Material UI보다 더 빛납니다.

 

요약하자면,

material ui는 스타일과 기능을 그대로 사용하고 싶을 때 용이하고, chakra ui는 스타일과 기능을 좀 더 유연하게 커스터마이징 하고자 할 때 용이하다.

 

아래는 이 두 라이브러리를 비교하는 아티클인데 잘 설명해놨으니 꼭 읽어보면 좋을 것 같다.

 

Chakra UI vs Material UI—A Comprehensive Comparison