React 💬12

🎈 Keys 🎈

 

📌 React에서 keys는 동적으로 컴포넌트를 만들어서 일하거나, 사용자들이 목록을 바꿀 때 유용하다.

📌 key값을 설정하면 컴포넌트들이 변경된 후에도 식별 가능하다

 

 

🔧 고유한 index(i)값을 사용하여 동적으로 Content 요소를 만들어보자. 

🔧 map 함수는 data 배열에서 3rodml 요소를 만들고, 고요한 key값이 모든 요소에 할당 될 수 있다록 i를 key 값으로 하여 요소를 생성해보자.

 

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값을 가지고 해당 요소들을 찾아갈 것이다.