[코드캠프 3주차]Class Component vs Functional Component

리액트는 초창기에는 클래스 컴포넌트로 컴포넌트 구성을 했다. 기본적으로 함수형 컴포넌트와 클래스형 컴포넌트가 하는 동작은 같다.요즘에는 함수형 컴포넌트에서 HOOKS를 이용하여 클래스형 컴포넌트 보다 좀 더 코드가 단순화 되고 함수로 모든 부분을 짜기 때문에 명시적으로 어떤 역할을 하는지 알 수 있기 편해서 최근에는 함수형 컴포넌트로 많이 사용하지만_** 클래스 컴포넌트는 state를 이용한 상태를 나타내거나 component lifecyle(생명주기)에 정의된 메소드를 이용해 원하는 순서에 특정한 동작을 하도록 할 수 있다.

[클래스 컴포넌트]

간단한 클래스 구조이다.

class classComponent extends React.Component{
state={
//...여러 상태 값들
}
render(){
  return(
    <div className="container">
      //...
    </div>
    }
}

state를 자기가 정의 할 수 있고,render 함수의 return 값에 따라 원하는 UI를 보여줄수 있다.
여기에서 리액트 생명주기에서 필요한 componentWillMount(), componentDidMount()등과 같은 lifecycle에 정의된 메서드를 이용할 수 도 있다.

[함수형 컴포넌트]

함수형 컴포넌트에서 state를 생성하는 방법은 useState 라는 HOOKS를 사용해서 할 수 있다.

import {useState} from "react";
const [propsValue,newSet]=useState("initialValue");

코드 구조를 보면 상태값을 state에 담아서 HOOKS를 통해서 컴포넌트를 직접 조작하는 지금 필자가 배우고 있는 구조이다.두가지 컴포넌트는 서로 장단점이 있지만, 좀 더 깔끔한 구조를 필요로 하는 함수형 컴포넌트가 더 좋은 듯 하다.
useEffect hooks 로도 충분히 리액트 라이프 사이클을 구현할 수 있기 때문에 함수형 컴포넌트를 선호하는게 아닐까 싶다.
클래스 컴포넌트도 한번 다시 공부를 해봐야겠다.