자동완성 검색창 구현을 위해 사용해본 MUI의 AutoComplete과 그 안의 Textfield를 알아보자
나는 왜 많은 UI 라이브러리 중 MUI(Material UI)를 선택하여 사용했을까?
MUI는 React 기반의 UI 컴포넌트 라이브러리이다. 현재 내 토이 프로젝트에서의 프론트는 리액트의 환경에서 개발하고 있기에 함께 사용하면 좋을 거 같았다.
한국어로는 아니지만 영어로 구글링하면 관련 문서 또한 쉽게 많이 찾을 수 있었다.
유튜브, 공식 문서 등 찾아보면서 하나씩 적용해보면 괜찮을 거라 생각!
Tailwind로 디자인을 하고 있지만, MUI를 설치한 이유는 컴포넌트 기반이라서 선택했다. Tailwind css라면 하나씩 스타일링을 하여 컴포넌트를 만들어서 사용해야 하지만, 이 라이브러리는 그냥 컴포넌트를 import 해와서 간단한 커스터마이징만 해주면 되기에 사용했다.
(Tailwind의 skeleton 코드 예시)
(MUI의 skeleton 코드 예시)
하지만! 일관된 코드와 규칙을 잘 따르기 위해서라면, 그냥 사용하고 있던 라이브러리를 활용하여 개발하는 쪽이 좋을 거 같다는 생각을 하게 되었다 :)
자, 그래서 나는 AutoComplete이 왜 필요했을까?
지역 검색명에 따른 데이터를 보여주기 위해, 검색창이 필요했다.
나는 검색할 때 그 밑에 드랍다운으로 필드에 입력된 값와 유사한 지역명을 보여주고 싶었음
그런 디자인의 검색창을 구현하기 위해서는 MUI의 AutoComplete과 TextField 컴포넌트가 필요하다.
AutoComplete은 말그래도 자동완성 기능을 해주는 컴포넌트인데, 사용자가 입력하는 값에 따라서 드랍다운을 보여주고 싶으니깐 값을 입력할 필드를 함께 해줘야겠지?
그게 Textfield를 같이 써주는 것이다.
그럼 AutoComplete을 사용할 때, 사용할 수 있는 옵션은 굉장히 많다.
커스터마이징을 할 수 있는 방법이 많다는 장점이기도 하지만, 또 사용할 때 열심히 찾아서 적용을 해봐야 알 수도 있다.
내가 사용한 옵션은 굉장히 심플하다. freeSolo, options, renderInput, 그리고 inputValue와 여러 이벤트 핸들러(onInputChange, onKeyDown 등..)를 사용했다.
사용한 옵션을 하나씩 살펴보자.
-
freeSolo:
이 친구는 boolean 값으로, true면 options에 없는 값도 입력할 수 있게 해준다. -
options:
자동완성 드랍다운에 보여줄 데이터 값이다. 이거는 배열로 값을 주면 된다. -
renderInput:
위에서 말했던 TextField 컴포넌트를 여기서 사용해주는 거다. 이 옵션은 입력 필드를 렌더링하는 함수인 것이다.
이 함수에서는 params를 인수로 받고, params를 통해 이 TextField의 속성과 스타일을 커스터마이징 할 수 있음!
위의 예시에서 보이는 것처럼, params를 받아오고 뭐 label이나 variant 같은 옵션을 사용하여 커스터마이징을 할 수가 있다.
그럼 params는 무엇을 가지고 있는지 알아볼까?
(MUI 공식 사이트에서 가져온 문서의 일부분이다)
여기서 보면 InputLabelProps, inputProps, InputProps, inputRef가 있다.
(v7 이후로 InputLabelProps, inputProps, InputProps는 deprecated된 상태이며, 새로운 이름은 밑에 정의했다)
-
InputLabelProps (현재 slotProps.inputLabel):
텍스트 필드 위에 표시되는 라벨과 관련된 속성을 포함하는데, 이는 라벨의 스타일이나 동작을 조정할 때 사용된다. -
inputProps (현재 slotProps.htmlInput):
유저가 입력하는 텍스트 필드의 속성을 정의하는 부분이다. 기본적으로 value나 onChange 등과 같은 속성들이 포함하고 있음!(input의 속성같은 것들 말이다) -
InputProps (현재 slotProps.input):
텍스트 필드에 요소를 추가하거나, 동작을 변경할 수 있게 해주는 요소이다. 예를 들어, 이 검색창의 텍스트 필드에 돋보기 모양의 아이콘을 추가하고 싶을 때 사용한다 (실제, 돋보기 모양의 아이콘을 삽입할 때 사용함!) 또는 마진이나 패딩 같이 디자인을 조정할 때도 사용함!
-> startIndornment나 endIndornment 같이 위치에 대한 키를 설정해주고 그의 값으로는 원하는 요소(컴포넌트)를 놓아준다. -
inputRef:
텍스트 필드의 참조를 설정하는 요소이다. 우리가 아는 그 ref와 같다!
TextField의 더 자세한 내용이 궁금하다면 MUI 공식 문서를 찾아보는 것도 좋다 :)
https://mui.com/material-ui/api/text-field/
이렇게 자세히 찾아보며 다시 공부해보니, 내가 검색창을 구현했을 때의 코드에서 고칠 점들을 발견할 수 있었다!
빨리 기능을 구현만 하려고 하다보니 조금 더 딥하게 보지 않는 경향이 있는데, 이렇게 다시 되새김질 하는 것도 좋은 듯 :)
기능 하나하나를 구현하면서, 한번도 멈추지 않고 넘어간 적이 없다. 작은 함수 하나, 에러 하나 같은 고칠 점들이 너무 많고 알아가는 것도 많아진다. 이렇게 고쳐나가는 것들이 늘어남에도 불구하고 다음 기능을 위해서는 또 계속 멈춰야 하는 시간들이 올 것이다. 지금처럼 공부하면서 코드를 짜고, 언젠가 멈추지 않고 기능을 구현하는 날이 오면 좋겠다~!~!~!~!
