[TIL] 241127_React: 왜 함수 컴포넌트를 사용해야 할까?

⚡️ 클래스 컴포넌트와 함수 컴포넌트의 차이를 아는가

단순히 처음 React를 배울 때 함수 컴포넌트를 사용하라고 해서, 함수 컴포넌트가 더 간단하다고 해서, 코드를 짤 때 그냥 함수 컴포넌트를 사용하는 것은 아닌지!
이번 기회에 더 구체적으로 비교해보고, 왜 우리가 함수 컴포넌트를 사용해야 하는지 분석해본다.

💻 코드의 양

🅲 클래스 컴포넌트

• 리액트 컴포넌트를 상속해야한다.
• 생성자에서는 super를 호출한다.
• render 메서드를 반드시 구현해야 한다.

Architecture >

class Page extends React.Component {
	constructor(props) {
    	super(props); 
    }
  
  	render() {}
}

🅵 함수 컴포넌트

• 리액트 엘리먼트를 반환해야 한다.

Architecture >

function Page(props) {
	return (<div>React-Component</div>);
}

↩️ 변경

🅲 클래스 컴포넌트

• 변경에 취약하다.
• 언제라도 외부에서 만든 인스턴스를 통해 속성에 접근해 다른 값으로 변경할 수 있다.

Example >

class Contract extends React.Component {
  render() {
    // 기본적으로는 렌더링 시점의 값 고정이 불가능.
    // 따라서 아래와 같이 클로저를 이용하여 렌더링 시점의 값을 고정시키고 사용.
    const props = this.props;
    const sign = () => {
      setTimeout(() => console.log("서명인: ", props.name), 3000);
    }

    return <button onClick={sign}>서명</button>;
  }
}

위와 같이 클로저를 이용해 값을 저장해놓지 않으면, _setTimeout_ 함수에 지정해놓은 시간이 지나기 전에 인스턴스를 통해 값을 변경할 수 있다.

🅵 함수 컴포넌트

• 내부 상태를 Closer로 관리하기 때문에 외부에서 접근할 방법이 없다.
• 따라서 컴포넌트 내부에 존재하는 상태를 변경할 수 없다.

Example >

function Contract(props) {
  // 렌더링 시점의 값을 고정시킬 수 있음(!)
  const sign = () => {
    setTimeout(() => console.log("서명인: ", props.name), 3000);
  }

  return <button onClick={sign}>서명</button>;
}

☝🏻 this

🅲 클래스 컴포넌트

• UI, XHR 등 비동기로 동작할 때 콜백 인자로 메소드를 전달하려면 this 를 고정해야 한다.
• 멤버 변수에 화살표 함수로 정의해 블록 스코프를 사용할 수도 있지만, 앞에서 언급한 것처럼 멤버 변수는 조작할 수 있다. 전용 데코레이터를 사용하는 경우도 있다.

🅵 함수 컴포넌트

• this 가 없다.
  
  

🧐 컴포넌트 동작을 이해하는 관점

🅲 클래스 컴포넌트

• 컴포넌트 생명 주기에 따라 로직을 작성한다. 컴포넌트가 생성되고, 렌더링되고, 이것이 돔에 mount되는 순서를 따라야 한다.
• 마운트 시점에 부수 효과를 발생시켰다면, unmount 시점에 부수 효과를 정리해야하는 작업을 각각 해야한다.
  Ex> componentDidMount(), componentWillUnmount()

🅵 함수 컴포넌트

• 값의 변화에 따라 로직을 작성한다. 이를 의존성이라고 한다.
  
  

〰️ 상속과 조합

🅲 클래스 컴포넌트

• 클래스 기반이라서 상속하기 쉬운 구조이다.
  
  

결론

다양한 부분에서 비교해봤을 때 비교적 함수 컴포넌트의 사용법이 단순하고, 코드가 간결하다. 또한 요즘 클래스 컴포넌트로 구현한 프로젝트도 함수 컴포넌트로 변경하는 추세이다.

Reference

👩🏻‍🏫 [리액트 2부] 고급 주제와 훅
https://www.inflearn.com/course/리액트-고급주제와-훅-2부

[리액트 2부] 3.1 클래스/함수 컴포넌트
https://jeonghwan-kim.github.io/2023/06/24/lecture-react-season2-part3-ch1#비교