React 컴포넌트 작성방법

React 컴포넌트 작성방법

• react 에서는 기존에 컴포넌트를 작성하기 위해서는 Component 를 상속받는 class 문법을 이용하였음

import React, {Component} from 'react';

class App extends Component {

	render() {
    	return (
    		<div>
        	난 클래스기반 컴포넌트야
        	</div>
    	)
    }
}

export default App

• render() 가 정의한 컴포넌트를 DOM 에 랜더링 하고자 사용 (React.createElement() 를 반환할거다)

• react 로 랜더링 프로세스를 관리할때는 하나의 책임, 작은것이 아름답다라는 사상으로 해야한다. (render() 안에 로직처리하는 구문을 작성이 가능하나 이게 커지면 책임이 많아지고 복잡해진다)

• react 에서는 함수형 컴포넌트 작성방법도 지원한다.(16.8 이상)

import React from 'react';

funtion App() {
	
    return (
    	<div>
        난 함수형기반 컴포넌트야
        </div>
    )

}

export default App

• 함수형 컴포넌트도 클래스형 컴포넌트처럼 상태와 소품을 가진다.

• 만약 컴포넌트에서 다른 컴포넌트를 랜더링하고 싶다면?

import React from 'react';
import Hello from './Hello.js';

funtion App() {
	
    return (
    	<div>
          난 함수형기반 컴포넌트야
          <Hello/>
        </div>
    )

}

export default App