react에서 component는 함수형 컴포넌트와 클래스형 컴포넌트가 있는데 react 16.8버전 이전에는 이 두 컴포넌트의 차이는 state와 lifecycle 였지만 16.8버전 이후부터는 react Hooks의 등장으로 인해 이러한 차이가 사라지게 되었다.

Class component

기본적인 클래스컴포넌트의 형태를 보면 아래와 같다

import React, { Component } from "react";

class App extends Component{
  constructor() {
    super();
    this.state = {
      counter: 0 
    }
    console.log("constructor");
  }
  
  componentDidMount() {
    console.log("componentDidMount");
  }
  
  render(){
    console.log("render");
    return(
      <>
        <div>컴포넌트 생성시 라이프 사이클</div>
        <div>state 초기값 {this.state}</div>
      </>
    );
  }
}

export default App;

라이프 사이클에 대한 자세한 내용은 따로 글을 적을것이기때문에 여기서는 간단한 설명만 할것임.
위의 코드에서 보이는 constructor(), componentDidMount(), render()는 라이프사이클메서드로 React.Component를 상속한 클래스 컴포넌트에서 저런식으로 특정시점에 특정기능을 실행시키고 싶을때 시점에 맞는 라이프사이클메서드를 사용하면 된다.

그리고 constructor메서드 안에서 state값을 적어줄수있다. state값을 변경할때는 setState메서드에 변경하고자 하는 값을 넣어주게되면 컴포넌트가 update되면서 re-rendering 된다.

Functional component

위에서도 언급했듯이 react 16.8 버전부터 react hooks의 등장으로 인해 함수형 컴포넌트에서 state와 라이프사이클을 관리할수있게 되었다.
함수형 컴포넌트는 아래와 같은 방식으로 작성할 수 있다.

import React, { useState, useEffect } from 'react';

function Profile({userID }) {
 ❶const [user, setUser] = useState(null);	


 ❷ useEffect (()=> {
      getUserApi(userId).then(data => setUser(data) );
    },[userId]);
    
  return (
    <div>
      {!user && <p>사용자 정보를 가져오는 중...</p>
        { user $$ (
          <>
            <p>{`name is ${user.name}`} </p>
            <p>{ `age is ${user.age}`} </p>
         </>
          )}
    </div>
}

useState

함수를 선언하는 방식으로 컴포넌트를 만들면 되는데 함수형 컴포넌트는 jsx로 만든 엘리먼트를 return 해준다. 위의 코드에서 useEffect와 useState를 import 해서 사용하는데 바로 이것들이 react hooks이다.

우선 함수형컴포넌트에서 state를 다루기 위해 사용되는것이 useState이다.

const [value, setValue] = useState("초기값");

useState를 호출하게 되면 useState는 배열을 return 하게되는데 위의 코드에서는 구조분해할당으로 value에는 현재 state, setValue에는 state를 변경할 수 있는 메서드가 할당된다. 클래스 컴포넌트와는 다르게 value에 this로 접근하지 않고 사용할수 있다. 그리고 state값이 update되면 re-rendering 된다.

useEffect

useEffect는 lifecycle 의 메서드 중 componentDidMount(), componentDidUpdate(), componentWillUnmound()가 합쳐진 걸로 생각하면된다.

(useEffect에 대한 자세한 내용은 다른 글에서 설명할것임)