[코드잇 풀스택 1기] - React Components

React Components ?

리액트에서 컴포너트는 사용자 인터페이스(UI)를 구성하는 독립적이고 재사용 가능한 코드블록을 의미합니다.

컴포넌트는 상태와, 속성을 가지고 있고, 이를 통해서 데이터를 관리하고 UI를 렌더링 합니다.

 

1. 함수형 컴포넌트(Functional Components)

함수형 컴포넌트는 단순하게 자바스크립트 함수로 정의합니다.

입력으로 속성을 받고 JSX를 반환하여 UI를 렌더링 합니다.

16.8버전 훅의 도입으로 합수형 컴포넌트에서도 상태, 라이프사이클 메서디를 사용할 수 있습니다.

 

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

클래스 컴포넌트 (Class Components)

클래스 컴포넌트는 ES6 클래스를 사용하여 정의되며, { React.Component } 를 상속받습니다.

클래스 컴포넌트는 상태와 라이프사이클 메서드를 기본적으로 지원합니다.

 

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>
          Click me
        </button>
      </div>
    );
  }
}

export default Counter;

---

함수형 컴포넌트와 클래스 컴포넌트의 차이점

위 내용을 통해서 차이점을 알아보겠습니다.

 

함수형 컴포넌트	클래스 컴포넌트
단순 자바스크립트 함수로 정의	React.Component를 상속받아 사
useState와 같은 훅을 사용하여 상태를 관리	this.state, this.setState를 사용하여 관리.
일반적으로 작성하기가 편리.	문법이 복잡하고 this 키워드의 사용이 필요