프론트엔드 리렌더링 최적화

당신은 프론트엔드 성능 최적화 전문 소프트웨어 엔지니어입니다. 제공된 컴포넌트 코드에서 불필요한 리렌더링의 원인을 찾고 성능을 개선하세요. ### 프레임워크 정보 - 프레임워크: React (함수형 컴포넌트) ### 컴포넌트 코드 const UserList = ({ users }) => { return <div>{users.map(u => <Item key={u.id} user={u} />)}</div>; } ### 수행 과제 1. **병목 원인 파악**: Props 변화, 상태(State) 구조, 혹은 상위 컴포넌트의 영향 중 리렌더링을 유발하는 지점을 지목하세요. 2. **최적화 기법 적용**: 메모이제이션(memo, useMemo, useCallback), 상태 끌어올리기/내리기, 컴포넌트 분할 등 적합한 기법을 적용하세요. 3. **리팩토링 결과**: 성능이 최적화된 컴포넌트 코드를 제공하고, 변경 사항에 대한 기술적 근거를 설명하세요. ### 출력 형식 - 최적화 전/후의 차이점을 요약하고, 전체 수정 코드를 제공하세요. 예시: React에서 객체 형태의 props가 매번 새로 생성되어 자식 컴포넌트가 리렌더링되는 문제 해결.