[React.js] 컴포넌트 종류

컴포넌트란? 하나의 블록이고, 리액트 앱은 컴포넌트로 구성된다. 

 

 

종류

• 함수형 컴포넌트 : return문으로 JSX를 반환한다.

import React from 'react';

function App(){
	return(
    	<div>Hello</div>
    );
}

export default App;

 

• 클래스형 컴포넌트 : render()함수로 JSX를 반환한다. 
  • 조건 및 특징
    • 리액트 컴포넌트 클래스를 반드시 상속 받아야한다.
    • state(동적 데이터를 다루는 객체)를 사용하기 위해서 필요한 컴포넌트

import React from 'react';

class App extends React.Component {
	state = {
    	isLoading: true,
    }
    render(){
    	const { isLoading } = this.state;
        return(
        	<div>
            	{
                	isLoading ? 'Loading...' : 'Ready.'
                }
            </div>
        );
    }
}

export default App;

JSX란?

• 정의 : HTML과 Javascript 를 조합한, 컴포넌트를 만드는데 쓰이는 표현식
• 특징 : HTML 형식과 비슷하게 생겼다. 

참고 서적 :

Do it! 클론 코딩 영화 평점 웹서비스:노마드 코더 니꼴라스와 만드는 진짜 리액트 앱