Mui AutoCompelete OnChange()

DressCode 개발일지

•발단

유저들이 스타일을 추가하고 그 스타일에 맞는 스타일 태그를 만들 수 있도록 하기 위한 작업이었고
데이터는 기본적으로 운영자가 큰 틀로 제공하는 adminTag를 사용하고 유저가 더 디테일하게
나눌 수 있는 userTag를 사용하려고 했다.

❎문제점

const [adminTag,setAdminTag] = useState("")
const [userTag,setUserTag] = useState("")

const handelTag = (event) => {
	const {target:{name,value}} = event;
    if(name === "adminTag") {
    	setAdminTag(value);
    } else {
    	setUserTag(value)
    }
}

<AutoComplete
	disablePortal
	options={styleTag}
    renderInput={(params) => {
    	return (
			<TextField name="adminTag" {...params} placeholder="Select a default tag." onChange={handleTag}/>
        );
    }}
/>

<TextField
	placeholder="Create your own tag."
	name="userTag"
	onChange={handleTag}
/>

일반적인 <TextField>와 다르게 드랍다운된 옵션을 선택해서 input란이 채워져도 onChange가 돌지 않는 문제가 생겼다.

Mui AutoComplete Api를 읽어봤지만

function(event: React.SyntheticEvent, value: T | Array<T>, reason: string, details?: string) => void

위의 설명을 이해하지 못하고 결국에는 다른 방법을 찾게 되었다.

🧑🏻‍💻해결과정

우선은 AutoComplete에서 드랍다운 된 선택지를 선택하면 TextField에서 어떤 변화가 발생하는지 알아보기 위해서 event를 콘솔에 출력해보았다.

하지만 AutoComplete에 값이 들어갔음에도 불구하고 TextField에는 아무런 변화가 없었는지 콘솔에는 출력되는 값이 없었다.

그래서 TextField가 아닌 AutoComplete에 onChange를 넣고 다시 콜솔에 event를 출력해보았다.

<Autocomplete
  disablePortal
  name="adminTag"
  options={styleTag}
  onChange={(ev)=>console.log(ev)}
  renderInput={(params) => {
  	return (
		<TextField name="adminTag"{...params} placeholder="Select a default tag." />
	);
  }}
/>

❗️출력된값❗️: SyntheticBaseEvent {_reactName: 'onClick', _targetInst: null, type: 'click', nativeEvent: PointerEvent, target: li#:r4:-option-0.MuiAutocomplete-option.Mui-focused, …}

그러자 출력된 값이 있었고 천천히 값을 읽어 내려갔다...🧐

쭈우우욱 내리다가 눈에 띄는 key값이 보였는데 일반적으로 onChange를 사용할 때 paramemter로 입력했던 target이 있었고 다시 한번 target을 풀어봤더니 AutoComplete는 TextField와 다르게 value가 없었지만 innerText에 내가 선택한 옵션의 값이 있었다.👏

내가 원하는 값의 위치를 알았다면 이제 그 값을 adminTag에 적용하면 되었지만 한가지 문제가 남았다.

나는 handleTag라는 함수를 만드 때 name의 값을 이용해서 조건문을 만들었는데 AutoComplete의 event에는 name이 없다는 것이다.

그래서 TextField와 AutoComplete가 공통된 key를 가지있고 그 value가 다른 것을 찾던 중 type이 onClick과 onChange로 다른것을보고 이걸 조건문에 사용하였다.

✅수정코드

const [adminTag,setAdminTag] = useState("")
const [userTag,setUserTag] = useState("")


 const handleTag = (event) => {
    const {target : {value, innerText},type} = event
    if (type === "click") {
      setAdminTag(innerText);
    } else if (type === "change") {
      setUserTag(value);
    }
  };
  
  
<Autocomplete
	disablePortal
	options={styleTag}
	onChange={handleTag}
	renderInput={(params) => {
		return (
        	<TextField
				name="adminTag"
				{...params}
				placeholder="Select a default tag."
			/>
		);
	}}
/>

📝마치며

Mui에서 여러 컴포넌트들을 가져다가 사용하면서 api문서를 보고 길을 헤맸던건 처음이어서 문제를 해결하는데 꽤 오랜시간이 걸렸다. api문서를 이해하지 못해서 검색을 해도 결국에는 이해를 하지 못 했다. 하지만 문제를 붙잡고 계속해서 다른 방식으로 접근을 하다보니 결국에는 해결을 할 수 있었다. 그 과정에서 여러번의 시행착오가 있었지만 구글링을 해서 방법을 찾은게 아닌 온전히 내 힘으로 문제를 파헤쳐서 해결했다는 점에서 뿌듯함이 크게 남았다.

다만 문제 해결을 하고도 마음에 걸리는 점이라면 문제를 해결한 방법이 정석적인 방법이 아니라는게 신경이 쓰인다. 다음에 시간이 나거나 비슷한 문제가 다시 생긴다면 이번에 이해하지 못 했던 api문서 자체를 이해할 수 있도록 해봐야겠다.