class, function 컴포넌트 차이

props나 state가 변경이 될 경우 차이

class App extends Component {

  handleDelete = (habit) => {
    const { habits, index } = this.copyFindIndex(habit);
    habits.splice(index, 1);
    this.setState({ habits });
  };
  
    render() {
    const { habits } = this.state;
    return (
      <>
        <Nav totalCount={habits.filter((item) => item.count > 0).length} />
        <div className="main-container">
          <Habits/>
        </div>
      </>
    );
  }
}

✅ class 컴포넌트의 경우는 클래스가 만들어질때 멤버변수(function포함)들은 한 번만 만들어지고 render 함수만 반복적으로 호출됩니다.

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

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

  return (
    <li className="habit">
      <span className="habit-name">Reading</span>
      <span className="habit-count">{count}</span>
      <button className="habit-button habit-increase" onClick={handleIncrement}>
        <i className="fas fa-plus-square"></i>
      </button>
    </li>
  );❗
};

export default SimpleHabit;

✅ function 컴포넌트의 경우 ❗코드블럭❗ 전부 다(지역변수포함)계속 반복적으로 호출이 됩니다. 즉, 지역변수에 있는 함수들을 새롭게 계속 만들어서 사용한다. useState의 경우 반복적으로 호출되어도 React가 따로 기억하고(저장) 있어서 초기화가 아닌 계속 동일(변경된)한 값을 받아 올 수 있다.

import React, { useCallback } from "react";

  반복호출이 되어도 동일한 콜백함수 전달
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  });

👍 React Hoot (use API)를 사용하면,

동일한 값을 메모리에 저장해놓고 있다.