클래스형 컴포넌트가 아닌 함수형 컴포넌트를 사용하는 이유

1. 클래스 컴포넌트는 장황 합니다
   • 클래스 선언, 이름, 익스텐즈 설명 등 여러 일을 해야합니다.
   • 객체지향 관점에서는 필요하지만 JSX 엘레먼트를 만든다는 관점에서는 불필요한 일을 반복한다고 느껴집니다.

2. 누가봐도 함수형 컴포넌트가 간단합니다.
   • 동일한 작업을 진행하더라도 조금 더 직관적입니다.

3. 이전에 함수형 컴포넌트를 사용하지 않았던 이유
   • 라이프사이클(생명주기) : 화면 내에서 리액트 컴포넌트의 변화를 캐치하는 것
   • 이전에 함수형 컴포넌트에서 리렌더(re-render)시점에 대한 것들을 제어 하는게 함수형 컴포넌트에서는 불가능 했었습니다.

4. 지금은 리액트에서 훅스(Hooks) 라는 개념이 나왔습니다.
   • 훅스 : A 라는 액션이 실행될때 A 라는 액션과 동시에 실행되는 함수를 지칭합니다.
   • 훅스를 통해 스테이트의 변화나 컴포넌트가 화면에 노출되는 것들을 캐치할 수 있기때문에 함수형 컴포넌트 활용이 가능 해졌습니다.

클래스형 컴포넌트와 함수형 컴포넌트 동일 동작시 코드 비교

• 클래스형 컴포넌트

// 클래스형 컴포넌트

class ChoEun extends React.Component {
  constructor() {
    super();

    this.state = {
      name: "eun",
    };
  }

  render() {
    return <div>{this.state.name}</div>;
  }
}

• 함수형 컴포넌트

// 함수형 컴포넌트

const Eun = () => {
  const [name, setName] = useState("eun");
  return <div>{name}</div>;
};

클래스형 컴포넌트가 함수형 컴포넌트보다 더 장황하다고 하는 이유

• 클래스형 컴포넌트 사용시 불필요한 코드(함수형 컴포넌트 사용할시 안 적어도 되는 코드)를 많이 작성하게 됩니다.

함수형 컴포넌트가 클래스형 컴포넌트보다 실행속도가 조금 더 빠릅니다.

• 단순하게 장황한 문제가 아니라 안정적인 코드를 만드는데 함수형 컴포넌트가 더 도움이 됩니다.
• 훅스를 활용해서 생명주기에 대한 제어도 기존의 클래스 컴포넌트보다 더 명확하게 수행할 수 있습니다.

훅스는 기본적으로 함수로 뺄 수 있습니다.

• 훅스의 함수를 별도의 파일에 커스텀 훅스로 만들어서 여러 파일에 임포트하여 쓰는 방법을 통해 하나의 비즈니스 로직을 여러 컴포넌트에서 재활용 할 수 있게 만들 수 있습니다.
  (클래스형 컴포넌트에서는 불가능 했었습니다.)
• 따라서 UI 로직과 비즈니스 로직을 분리할 수 있습니다.

결론 : 함수형 컴포넌트 사용은 1)코드의 간결함, 훅스를 2)커스텀 훅스로 활용 가능