React 정복기(2) - Component

애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러 가지 컴포넌트로 구성되어 있음

• 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 줌
• 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있음
• 임의 메서드를 만들어 특별한 기능을 붙여 줄 수 있음

컴포넌트는 함수형, 클래스형 두 가지로 만들 수 있음
컴포넌트의 속성 값 : props
컴포넌트의 상태 값 : state

함수형 컴포넌트

app.js

import React from 'react';
import './App.css';

function App() {
    const name = 'React';
  return (
    <div>{name}</div>
  );
}

export default App;

클래스형 컴포넌트

app.js

import React from 'react';
import './App.css';

class App {
    render(){
        const name = 'react';
        return(
            <div>{name}</div>
        );
    }
}

export default App;

두 컴포넌트의 기능은 동일하다.
함수를 사용하여 만드는 것과 클래스를 사용하는 것의 차이가 있을 뿐이다. 하지만 차후 부가 기능들을 사용할때 제공하는 기능의 사용법이 상이한 부분이 있다는 것을 알아두자!