[React] 함수 컴포넌트를 사용하는 이유

1. this로 인한 문제

 

아래 코드를 보자

class TestComponent extends React.Component {
  render() {
    return <h1> 테스트 {this.props.text} </h1>;
  }
}
function TestComponent(props) {
  return <h1> 테스트 {this.props.text} </h1>;
}

 

첫번째 코드가 클래스 컴포넌트이고, 두번째 코드가 함수 컴포넌트이다.

 

클래스와 함수, 두 컴포넌트 사이의 가장 큰 차이점은 "라이프 사이클"이라고 할 수 있다.

 

클래스 컴포넌트는 componentDidMount, getDerivedStateFromProps 등의 라이프사이클 메소드를 사용할 수 있었지만,

기존 함수 컴포넌트는 이러한 라이프 사이클을 사용할 수 없고 render만 구현할 수 있었다고 한다.

 

(그래서 Hook이 등장하기 했지만, 그전에)

이러한 문제점을 두고 왜 함수 컴포넌트를 사용하기 시작했을까?

 

아래 코드를 보자

겉보기에는 같은 동작을 하는 것처럼 보인다.

 

사용자를 선택하고 follow 버튼을 누르면 3초 이후에 선택한 사용자의 이름을출력하는 예제인데,

그런데 class 컴포넌트에서 유저를 선택하고, follow 버튼을 누른 후에,

그 3초 사이에 다른 유저로 바꾼다면?

그 바꾼 이름의 유저가 출력되게 된다.

 

이는, class 컴포넌트가 props를 재사용하기 때문에 생기는 문제로, 타임아웃이 지나기 전에 props가 2번째 유저로 변경되었기 때문에 두번째 유저가 출력되는 것이다.

 

즉, this가 보존되기 때문에 3초 이후의 바뀐 시점의 this.props를 불러오는 것이다.

이는 상위에 const {user} = this.props로 값을 고정시켜놓고 setTimeout을 돌려서 해결할 수 있긴하다.

 

구현할 때마다 이런 점을 신경써가면서 구현해야하는 것이다.

 

하지만 함수 컴포넌트는 props가 보존되므로 추가적인 고려사항이 사라진다.

 

 

2. 간단하다.

 

class를 사용한다면 언젠가 라이프 사이클이 다양해지고, componentDidMount같은 메소드에 수 없이 많은 로직이 들어가게 된다면 코드도 복잡해지고 테스트도 어려워지고 작게 쪼개는 것도 어려워진다.

또한, 유지보수 비용 증가 및 잦은 버그로 이어질 수 있다.

 

하지만 함수 컴포넌트를 사용하게 되면, Hook으로 상태관리를 간단하게 할 수 있고, 컴포넌트를 잘게 나누는 것이 class기반 보다 원활해진다.