별건 없고...성능이슈에 대한 끄적거림.

리액트에서 JS를 쓰다보면, 성능이슈를 종종 겪는다.

원래 배울때 보통 스프레드 연산자를 통해서 새로운 배열을 만들고, 해당 값만 갱신해서 사용하길 권장하는데

이때, 새로운 배열을 만들때 성능이슈가 발생하는 경우를 보았다.

해당 값만 갱신하는 경우 문제가 없는 부분...
정말 짜증나는 부분이었다.

 

왜 해당 부분만 이슈가 발생하는지는 원리는좀 더 찾아봐야하지 않나 싶다.

const [allList, setAllList] = useState([]);

<input onChange={(e)=> inputHandler(e, index)} value={text} />

const inputHandler = async(e, index) => {
	const inputList = [...allList];
    inputList[index] = e;
    setAllList(inputList);
}

// 위 함수가 원래 부분이었다.
// 하지만 성능이슈가 너무 심해 글자 하나하나 칠때마다 inputfocus가 풀릴정도로 성능이슈가 발생하였다.

const inputHandler = async(e, index) => {
    allList[index] = e;
    setAllList(allList);
}

 

라이브러리떄문인지 아닌지는 모르겠지만 조금 더 분석해봐야겠다.
원인은 모르지만, 문제는 해결된 상태니까