REACT 💬4

🎈 Components 🎈

 

📌 어떻게 컴포넌트를 합치고 유지하기 쉽게 만드는지 배워봅시다

📌 페이지의 다른 것들에는 영향을 미치지 않고 컴포넌트만 바꾸고 업데이트 하는 것을 가능하게 해줍니다

 

 

App.jsx

import React from 'react';

class App extens React.Component {
	render() {
    	return (
			<div>
        		<Header />
            	<Content />
        	</div>
        );
    }
}

class Header extends React.Component {
	render() {
    	return (
        	<div>
            	<h1>Header</h1>
            </div>
        );
    }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export default App;

 

🔧 이 페이지를 렌더링하려면, main.js파일을 import하고 reactDOM.render()를 불러야한다.

 

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

 

이렇게 코드를 작성했다면 

 

💻

이러한 화면이 나타나게 된다.

 

 

📌 Stateful 예제

App 컴포넌트가 가지는 상태를 만들어보자.

Header 컴포넌트는 상태를 가지지 않은 채로 추가된다.

content tag 대신에, 동적으로 삽입할 TableRowtable가 있는 table과 tbody elements를 만들어줄 것이다.

'=>' 문법을 사용하여 예전 JavaScript 문법보다 더 깔끔하게 코드를 짤 수 있다.

 

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key={i} data={person}/>)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
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'));

 

💻

 

🔧 key={i} inside map() 함수를 이용하는데, 이것은 React가 필요한 elements만 업데이트 할 수 있게 도와준다. 전체를 re-rendering하는 것보다 훨씬 performance를 올려준다.