[React] Class / Functional Component

✅ Class Component

---

• 이제는 잘 사용하지 않는다.

• 그래도 알아둘 필요는 있다. 클래스형 컴포넌트를 사용하는 프로젝트를 유지보수하게 되는 일이 있을 수도 있고,

• 옛날에 만들어진 리액트 관련 라이브러리의 경우에는 Hooks 지원이 아직 안되는 경우도 있다.

선언 방식

// app_class.jsx

import React, { Component } from "react";

class AppClass extends Component {
  render() {
    return <div>Class</div>;
  }
}

export default AppClass;

• 클래스형 컴포넌트에서는 render() 메서드가 꼭 있어야 한다. 이 메서드에서 렌더링하고 싶은 JSX 를 반환하면 된다.

• 클래스는 React에서 제공하는 Component라는 클래스를 extends, 상속해서 만들 수 있다.

State

import React, { Component } from "react";

class AppClass extends Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <>
        <h1>Class</h1>
        <div>{this.state.count}</div>
      </>
    );
  }
}

export default AppClass;

• 클래스에서는 직접 state 오브젝트를 만들고, this를 이용하여 접근해 count를 보여줄 수 있다.

props

import React, { Component } from "react";

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

  onIncrese = () => {
    const newCount = this.state.count + 1;
    this.setState({ count: newCount });
  };

  onDecrese = () => {
    const newCount = this.state.count - 1;
    this.setState({ count: newCount });
  };

  render() {
    return (
      <>
        <h1>Class</h1>
        <div>{this.state.count}</div>
        <button onClick={this.onIncrese}>+1</button>
        <button onClick={this.onDecrese}>-1</button>
        <div>{this.props.hello}</div>
      </>
    );
  }
}

export default AppClass;

• class에서는 this.props를 호출하여 props에 접근한다.

LifeCycle

componentDidMount() {
    console.log("Component did Mount!!");
  }

  componentDidUpdate() {
    console.log("Component did Update!!");
  }

  componentWillUnmount() {
    console.log("Component will unMount!!");
  }

• componentDidMount() : 컴포넌트가 마운트된 직후

• componentDidUpdate() : 갱신이 일어난 직후

• componentWillInmount() : 컴포넌트가 마운트 해제되어 제거되기 직전

💡 클래스 컴포넌트를 이용하면 다 할 수 있는데 왜 React Hook이 도입이 되었을까?

• 이유는 단순하게 클래스가 어렵기 때문이다.
• 클래스를 이용하면 맴버변수에 접근할 때 항상 this 바인딩을 해야하는데, 이렇게 반복적으로 호출하는 것이 불편하다.

✅ Functional Component

---

• 함수로 만들 수 있다.

• 반면 함수에는 그런 기능이 없다. 하지만 리액트 16.8 버전부터 React Hook이 도입되면서 함수에서도 스테이트도 가지고, 라이프사이클 메소드도 사용할 수 있게 되었다.

💡 React Hooks란?

React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리

  const [value2, setValue2] = useState()

선언 방식

// app_func.jsx

import React from "react";

const AppFunc = () => <h1>Function</h1>;

export default AppFunc;

State

import React, { useState } from "react";

const AppFunc = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>Function</h1>
      <div>{count}</div>
    </>
  );
};

export default AppFunc;

• 함수에서는 useState 로 state를 사용한다.

• 이것을 사용해 컴포넌트에서 상태를 관리한다.

• 첫번째 원소는 현재 상태, 두번째 원소는 상태를 바꿔주는 함수를 설정한다.

props

import React, { useState } from "react";

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

  const onIncrese = () => {
    const newCount = count + 1;
    setCount(newCount);
  };

  const onDecrese = () => {
    const newCount = count - 1;
    setCount(newCount);
  };
  return (
    <>
      <h1>Function</h1>
      <div>{count}</div>
      <button onClick={onIncrese}>+1</button>
      <button onClick={onDecrese}>-1</button>
      <div>{props.hello}</div>
    </>
  );
};

export default AppFunc;

• props 값을 바로 전달받을 수 있다.

LifeCycle

useEffect(() => {
    console.log("마운트 될때만 실행!");
  }, []);

    useEffect(() => {
    console.log("렌더링 될 때 마다 실행!!");
  });

    useEffect(() => {
    console.log("count의 값이 변할 때만 실행!!!");
  }, [count]);

    useEffect(() => {
    return () => {
      alert("컴포넌트가 제거될때만 실행");
    };
  }, []);