ReactJS 기본教程

ReactJS Keys

keys동적으로 생성된 컴포넌트나 사용자가 목록을 변경할 때 React는 매우 유용합니다.key값은 변경된 컴포넌트가 고유한 식별자를 유지하도록 합니다.

Keys 사용

고유한 인덱스(i)를 가진 Content 요소를 동적으로 생성하겠습니다. map 함수는 데이터 배열에서 세 개의 요소를 생성합니다. 각 요소에 대해 키와 값이 고유해야 하므로, 생성된 각 요소에 i를 키로 할당합니다.

App.jsx

import React from 'react';
class App extends React.Component {
　　　constructor() {}}
　　　　　　super();
　　　　　　this.state = {
　　　　　　　　　data:[
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　component: 'First...',
　　　　　　　　　　　　　　　id:　1
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　component: 'Second...',
　　　　　　　　　　　　　　　id:　2
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　component: 'Third...',
　　　　　　　　　　　　　　　id:　3
　　　　　　　　　　　　}
　　　　　　　　　]
　　　　　　}
　　　}
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　{this.state.data.map((dynamicComponent, i) => <Content　
　　　　　　　　　　　　　　　　　　key = {i} componentData = {dynamicComponent}/>)}
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Content extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<div>{this.props.componentData.component}</div>
　　　　　　　　　　　　<div>{this.props.componentData.id}</div>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from '.'/App.jsx';
ReactDOM.render(<App/> document.getElementById('app'));

각 요소의 키 값에 대해 다음과 같은 결과를 얻습니다.

미래에 요소를 추가하거나 제거하거나 동적으로 생성된 요소의 순서를 변경할 경우 React는 이를 사용합니다.key각 요소를 추적하기 위해 값을 사용합니다.

ReactJS Router ReactJS Refs