라이프사이클(클래스형 vs 함수형),

1. React LifeCycle란?
   

이 LifeCycle은 클래스형 컴포넌트에만 해당되는 내용입니다.
라이프 사이클은 컴포넌트가 브라우저상에 나타나고, 업데이트 되고, 사라지게 될 때 호출되는 메서드들 입니다.

그럼 함수 컴포넌트는 어떻게 해야할까요?

함수 컴포넌트는 v16.8 업데이트 이후 Hook 기능이 생기면서 해결되었다고 합니다

클래스형은 앞으로 쓰이지 않으므로 대충 저런것들이 있구나 하고 넘어가겠습니다.

react hooks

Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다.

React Hokks를 사용 했을 때와 안했을 때의 차이를 간단한 예제로 살펴보도록 하겠습니다.
class component

import React, { Component } from 'react';

class App extends Component {
  state = {
    count: 0,
  };

  countUpdate(n) {
    this.setState({
      count: n,
    });
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <div>
          <h1>{count}</h1>
          <button
            onClick={() => {
              this.countUpdate(count + 1);
            }}
          >
            증가
          </button>
        </div>
      </div>
    );
  }
}

export default App;

hooks

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

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      {count}
      <button onClick={() => setCount(count + 1)}>증가</button>
    </>
  );
};

export default App;

1. useState

useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다. 만약에 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 이 Hook 을 사용하시면 됩니다.

2. useEffect

useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook 입니다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방합니다.

3. useContext

이 Hook 을 사용하면 함수형 컴포넌트에서 Context 를 보다 더 쉽게 사용 할 수 있습니다.

4. useReducer

useReducer 는 useState 보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 Hook 입니다.
Redux 에서는 액션 객체에는 어떤 액션인지 알려주는 type 필드가 꼭 있어야 하지만, useReducer 에서 사용하는 액션 객체는 꼭 type 를 지니고 있을 필요가 없습니다. 심지어, 객체가 아니라 문자열이나, 숫자여도 상관이 없습니다.

등등.... 다양하게 있습니다.

다음주에 백엔드와 협업하게되는데 내가...?
지금 이딴 실력으로 협업을...?
서버 만들어놨는데 왜 연결 못하나요? 하고 욕먹는거 아니냐고.....