ReactJS에서 keys의 중요성은 무엇인가요?
ReactJS에서 작업할 때 이해해야 할 중요한 개념 중 하나는 키(keys)의 사용입니다. 키는 React에게 컬렉션의 요소 중에서 변경된, 추가된 또는 제거된 항목을 식별하는 데 도움을 줍니다. 키는 요소에 안정적인 식별자를 제공하여 컴포넌트의 효율적인 렌더링 및 업데이트를 보장합니다.
왜 키가 중요한가요?
요소들의 동적인 컬렉션을 렌더링하거나 컴포넌트를 동적으로 추가하는 등의 작업을 할 때, 키는 컴포넌트 상태를 유지하고 예기치 않은 동작을 방지하는 데 중요한 역할을 합니다. 배열 내의 각 자식 컴포넌트는 이러한 변경 사항을 제대로 관리하기 위해 고유한 “key” 속성을 가져야 합니다.
숫자 목록을 사용한 예제를 살펴보겠습니다:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => (
<li key={number.toString()}>
{number}
</li>
));이 예제에서 “key” 속성은 숫자의 문자열 표현으로 설정됩니다. 이를 통해 React는 각 목록 항목에 안정적인 식별자를 제공받게 됩니다. 키를 사용함으로써 React는 리스트의 변경 사항을 효율적으로 조정할 수 있으며, 항목이 추가되거나 제거되거나 재정렬될 경우에도 대응할 수 있습니다.
키를 사용하지 않았을 때의 결과
동적인 컴포넌트를 렌더링할 때 키를 사용하지 않으면 예기치 않은 동작과 성능 문제가 발생할 수 있습니다.
적절한 키를 사용하지 않으면 React가 상태를 업데이트하는 대신 DOM 노드를 손상시키거나 재사용할 수 있습니다. 이는 노드에서 추적되지 않은 상태의 손실을 야기할 수 있으며, 잘못된 데이터의 렌더링이나 컴포넌트 간의 의도하지 않은 변경 전파를 초래할 수 있습니다.
또한 고유하고 일정한 키를 사용하지 않으면 애플리케이션의 성능에 영향을 줄 수 있습니다. React는 렌더링 및 업데이트 과정을 최적화하기 위해 키를 사용하며, 키가 없는 경우 React는 여러 개의 DOM 노드를 다시 생성하거나 불필요하게 컴포넌트를 업데이트해야 하므로 최적의 성능을 발휘할 수 없게 됩니다.
키를 사용하지 않은 결과를 보여주기 위해 다음 라이브 데모를 고려해 보세요: http://jsfiddle.net/frosas/S4Dju/. 항목을 추가하고 변경하고 더 많은 항목을 추가하면 키를 사용하지 않을 때의 부정적인 영향을 볼 수 있습니다.
React 키의 추가적인 용도
동적인 요소를 렌더링할 때의 중요성에 더해, 키는 요소의 키가 변경될 때 요소를 재설정하는 데에도 사용할 수 있습니다. 예를 들어 파일 입력 요소를 다룰 때, 키를 사용하여 입력을 초기 상태로 재설정할 수 있습니다.
다음은 예제입니다:
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
fileInputKey: Date.now(),
// 다른 속성들
};
}
resetFileInput = () => {
this.setState({ fileInputKey: Date.now() });
}
render() {
return (
<Child
fileInputKey={this.state.fileInputKey}
resetFileInput={this.resetFileInput}
/>
);
}
}
class Child extends React.Component {
render() {
return (
<input
key={this.props.fileInputKey}
type="file"
onChange={this.props.resetFileInput}
/>
);
}
}이 예제에서 파일 입력 요소는 키가 변경될 때마다 재설정되어 입력이 항상 초기 상태로 초기화됩니다. 이는 파일 업로드를 다루고 렌더링 간 일관된 동작을 보장해야 하는 시나리오에서 유용할 수 있습니다.
React에서 키 사용에 대한 더 많은 정보는 공식 React 문서의 리스트와 키를 참조할 수 있습니다.
기억해야 할 것은 React에서 키를 올바르게 사용하는 것이 컴포넌트 상태를 유지하고 성능을 최적화하며 예기치 않은 동작을 피하는 데 필수적이라는 것입니다. 모범 사례를 따르고 배열의 각 자식이 고유하고 일정한 키를 갖도록하는 것으로 React의 렌더링 및 업데이트 기능의 전체 장점을 활용할 수 있습니다.
