React 제대로 알기 (공식문서)
리액트로 프로젝트를 여러번 했지만, 리액트가 바라는 방식으로 제대로 잘 사용하고 있는지
React 학습 부분에서 UI표현하기 주제를 다루고 있습니다.
컴포넌트에 props 전달하기
props 기본값 설정 가능 생각하고 있기 (자주 사용하지 않으면 까먹는 것ㅠ)
리액트에서 props의 기본값을 설정하는 것은 매우 유용합니다. 특히 여러 곳에서 재사용되는 컴포넌트가 있을 때, 예를 들어 name이라는 prop을 넘겨받아 대부분의 사용처에서 같은 값을 사용하고, 소수의 경우에만 다른 값을 사용해야 한다면 기본값 설정이 매우 유용할 수 있습니다.
spread 문법으로 props 전달하기
(모든 props를 자식 컴포넌트에 전달)
1function Profile({ person, size, isSepia, thickBorder }) { 2 return ( 3 <div className="card"> 4 <Avatar 5 person={person} 6 size={size} 7 isSepia={isSepia} 8 thickBorder={thickBorder} 9 /> 10 </div> 11 ); 12} 13
위 코드는 가독성을 높일 수 있지만, 아래의 코드를 사용할 때 간결함을 가져갈 수 있습니다.
1function Profile(props) { 2 return ( 3 <div className="card"> 4 <Avatar {...props} /> 5 </div> 6 ); 7} 8
List Rendering
React를 사용하면 배열 데이터를 map을 이용해 렌더링하는 경우가 자주 발생합니다. 이때, 반드시 key라는 프로퍼티를 사용해야 합니다. key를 사용하는 이유와 규칙을 이해하는 것이 중요합니다.
Key가 필요한 이유
key는 React가 각 컴포넌트가 어떤 배열 항목에 해당하는지 추적하고, 나중에 일치시킬 수 있도록 도와줍니다. 이는 배열 항목이 정렬되거나, 이동되거나, 삽입되거나, 삭제될 때 특히 중요합니다. 적절한 key를 선택하면 React가 DOM 트리를 올바르게 업데이트하고, 효율적으로 리렌더링할 수 있습니다.
Key 규칙
- Key는 형제 간에 고유해야 합니다: 같은 배열 내의 형제 요소들 간에는 고유한 key를 가져야 합니다. 그러나 서로 다른 배열에서는 같은 key를 사용할 수 있습니다.
- Key는 변경되어서는 안 됩니다: 렌더링 중에 key를 생성하거나 변경하지 마세요. key가 변경되면 React는 항목을 재정렬하거나 새로 생성된 것으로 인식할 수 있습니다. 이는 성능 저하와 예기치 않은 버그를 초래할 수 있습니다.
주의 사항 !!
리스트를 컴포넌트로 변환할 때, 특정 아이디를 나타내는 데이터가 없을 때, 인덱스를 key로 사용하는 경우가 있습니다. 하지만 이는 권장되지 않습니다.
사실 저도 귀찮아서 많이 사용했습니다 ㅠ
- 인덱스를 key로 사용하지 마세요: 항목이 삽입되거나 삭제되거나 배열의 순서가 변경되면, 인덱스를 key로 사용하면 버그가 발생할 수 있습니다. 이는 항목의 순서가 바뀔 때, React가 항목을 제대로 추적하지 못해 잘못된 업데이트를 할 수 있기 때문입니다.
- 즉석에서 key를 생성하지 마세요: key={Math.random()}처럼 즉석에서 key를 생성하면, 렌더링 간에 key가 일치하지 않아 모든 컴포넌트와 DOM이 매번 다시 생성될 수 있습니다. 이는 성능 저하와 예기치 않은 문제를 초래할 수 있습니다.
리스트 렌더링 시 key를 올바르게 사용하는 것은 성능 최적화와 버그 방지에 매우 중요합니다.