MUI Select 공통 컴포넌트 만들기

이번 작업은 select 컴포넌트를 모바일에서만 native select로 렌더링 하고, 웹에서는 기존대로 MUI Select 컴포넌트를 보여주도록 하는 작업이었다. 기존에 만들어둔 select도 하나씩 바꿀 예정.

Native Select란?

nativeSelect는 안드로이드, ios 등 각 운영체제에서 정한 style에 맞게 select 컴포넌트를 렌더링 해주는 컴포넌트다. 그래서 실제로 native select를 사용하면 안드로이드와 ios에서 렌더링 되는 컴포넌트의 스타일이 다르다. 같은 컴포넌트가 모바일에서는 다음과 같이 운영체제에 맞게 다르게 보인다.

ios

android

컴포넌트

const NativeSelect = ({
  mobileEnvironment,
  options,
  ...props
}: NativeSelectProps) => {
  return (
    <MUISelect {...props}>
      {options.map(option => {
        if (mobileEnvironment) {
          return (
            <option
              key={option.key}
              value={option.value}
              className="s-select-listItem"
            >
              {option.label}
            </option>
          );
        }
        return (
          <MUIMenuItem
            key={option.key}
            value={option.value}
            className="s-select-listItem"
          >
            {option.label}
          </MUIMenuItem>
        );
      })}
    </MUISelect>
  );
};

export default NativeSelect;

NativeSelect를 렌더링하는 곳에서 native={mobileEnvironment} 속성을 줘서 모바일일 경우 native=true가 되도록 했다. 원래는 select 아래에 들어갈 children 컴포넌트도 분리했다가 지금은 select 자식 컴포넌트에 들어갈 값을 배열 구조로 props로 받아서 사용하는 방법을 사용했다. 분리했을 때 여러 버그가 발생했기 때문. 몇가지는 수정했는데 다 수정되지는 않아서 사수 분께서 추천해준 방법으로 컴포넌트를 만들었다.

참고 : props를 하나씩 받지 않고 구조분해할당으로 받기 때문에 type은 extends SelectProps로 상속받아야 한다.