[React] React Component

1. Class Component

---

예전의 리액트에서는 Class Components가 중요한 역할을 맡았다. 주로 컴포넌트에서 나중에 배울 LifeCycle API와 state를 위해서는 꼭 class 문법을 활용한 컴포넌트를 정의해야 했다.

그러나 React 16.8.0 업데이트 이후로 Hooks에 대한 기능이 추가되면서, Functional Component에서 LifeCycle API와 state 기능을 구현할 수 있어 이제는 class component를 잘 사용하지 않는다.

그래도 React Hooks를 배우기 전까지는 class component를 사용해야하니 예시를 확인해보며 알아보자

// Class Component Example

import React, { Component } from 'react';

class Component1 extends Component {
  render() {
    return (<div>Hello World!</div>);
  }
}

export default Component1;

1-1. import React, { Component } from 'react';

react 라이브러리에서 함수 또는 클래스를 import 한다.
import 문법은 export된 다른 파일의 함수 또는 클래스를 불러와 사용할 수 있도록 하는 기능

1-2. class Component1 extends Component

Component1이라는 컴포넌트를 class 문법을 사용해 선언

1-3. render();

리액트에서 사용하는 컴포넌트를 생성

1-4. return(<div>Hello World!</div>);

render 함수를 통해 컴포넌트를 만들기 위한 HTML을 반환

1-5. export default Component1;

다른 자바스크립트 파일에서 Component1이라는 class를 사용할 수 있게 export

2. Functional Component

---

예전에는 단순히 부모 컴포넌트로 받은 값을 출력만 해주는 컴포넌트였지만, 최근 리액트 업데이트 이후로 Functional Components는 거의 모든 컴포넌트 선언에 사용되어 리액트 프로젝트에서 빠질 수 없는 부분이 되어버렸다.

React Hooks 업데이트 이후로 Functional Components에서도 상태 관리(state)와 LifeCycle API 사용이 가능해짐

// Functional Component Example

import React from 'react';

const Component2 = () => {
return (
  <div>Hello World!</div>
);
}

export default Component2;