리렌더링안하는 법을 따라해보는데 잘 안된다.

프로젝트를 진행하면서 특정 리스트를 기준으로 반복을 돌면서 요소를 그려주는 방법을 사용했었다.

const [items, setItems] = useState([
  { value: "" },
  { value: "" },
  { value: "" },
]);


return(
{items.map((value, index) => (
  <div key={index}>
    <input type="text" onChange={(e) => onChange(e, index)} />
  </div>
))}
)

문제가 하나 생겼다면
특정 input 하나에서 onChange 이벤트가 발생해 해당 Input 값을 다시 list에 할당 하면, list로 그려진 모든 input이 다시 렌더링 되는 상황이 발생했다.

어찌됬든 성능적으로 좋은 결과는 아니었다.

지금은 React-Hook-Form에서 useForm과 useFieldArray를 이용해 요소를 그려주는 방식으로 리 렌더링을 막아놨지만,
생각해보면 그냥 onChange를 사용 안해서 우회한거지 문제를 직접 해결한 방식은 아닌거 같다.

물론 요소를 추가할때 React-Hook-Form을 도입하면서 2 중으로 곂쳐서 반복되는 상황에 렌더링을 최소화 하는 등의 이점 같은건 생겼지만, 가끔은 라이브러이에 의존해서 경험을 얻을 기회를 날린건 아닐까 생각이 든다.

그래서 라이브러리 없이 리렌더링을 막는 방법을 공부하고자 했다.
https://alexsidorenko.com/blog/react-list-rerender/
글을 가장 잘 쓴거 같은 블로그를 참조해서 별도로 작업을 해봤지만,
의외로 문제는 해결되지 않았다.
환경문제일까 뭔가 다른게 있는지 똑같이 가져다 구성을 해봐도 리렌더링은 일어나고, 오히려 input에 change가 발생하면 focus를 상실하는 문제까지 발생했다.

결국에는 포기하고 컴포넌트 분리시켜서 내부적으로 이벤트 돌고, react-hook-form 가져다가 쓰면서 넘어갔다.
급하면 그냥 가져다 쓰는게 편하다는 말이 괜히 있는게 아니었다.
일단 해결은 됬지만, 왜라는 의문은 품어야할꺼 같다.