왜 함수형 컴포넌트(Functional Component)를 사용하는가

feat.면접에서 함수형 컴포넌트와 클래스형 컴포넌트의 차이를 물어보는 이유

옛날 옛적 호랑이가 담배피던 시절...

예전에는 클래스형 컴포넌트에서만 리액트의 state와 Lifecycle 기능을 사용할 수 있었다.
(라떼는 말야... 진짜로 그랬어...🤭)
하지만 이제는 함수형 컴포넌트에서 Hook을 이용하여 상태관리 및 생명주기에 따른 부수 효과(side effect)를 얼마든지 구현할 수 있게 되었다.

그래 그건 알겠는데, 그래서 왜 함수형 컴포넌트를 사용할까?

제일 많이 듣는 그 대답

클래스형 컴포넌트에 비해 함수형 컴포넌트가 작성하는 코드가 적다.
(의식의 흐름대로 필요한 것만 적어봐도 Class 선언, render() 함수 선언, Component를 상속(extend)해야하고 상태관리 위해서 constructor - 생성자 메소드도 선언해야하고... 상상만 했는데 벌써 코드 50줄 이상 짠 듯🤦)

이것 만으로는 함수형 컴포넌트가 주로 사용되며 심지어 권장 까지 되는 이유를 충분히 설명하지 못한다.

그렇다면, 클래스형 컴포넌트를 쓰지 않는 이유를 먼저 얘기해보자

클래스형 컴포넌트가 불러일으킨 재앙

class ProfilePage extends React.Component {
	showMessage = () => {
		alert(`${this.props.user} 를 팔로우 했습니다`);
	}

	handleClick = () => {
		setTimeout(this.showMessage, 5000);
	}

	render() {
		return <button onClick={this.handleClick}>Follow</button>;
	}
}

A 유저를 팔로우 한 후 빛의 속도로 3초만에 B 유저 프로필로 이동하면, "B를 팔로우했습니다" 라는 alert 메세지가 나타날 것이다.
다시 한번 말하지만, 나는 A 유저를 팔로우 했다!🤷

위의 예제는 팔로우 한 당시의 유저가 아니라 showMessage()가 호출되었을 때의 유저를 바라보고 있기 때문에 생긴 버그이다.

즉, this는 mutable(변경가능)하다. 그리고 이러한 현상 때문에 예기치 못한 결과(결국 production에서는 버그임)가 발생할 수 있다.

아, 그래서 함수형 컴포넌트를 쓰는구나!

function ProfilePage(props) {
	showMessage = () => {
		alert(`${props.user}를 팔로우 했습니다`);
	}

	handleClick = () => {
		setTimeout(showMessage, 5000);
	}
	return (
		<button onClick={handleClick}>Follow</button>
	)
}

자, 이번에는 팔로우를 눌렀을 시점의 유저 이름이 정상적으로 출력될 것이다.

this는 mutable하지만, props는 immutable하다.

그럼 이제 함수형 컴포넌트를 쓰는 이유(장점)를 말할 수 있다.
1. 리랜더링 될 때의 값을 유지한다. 즉, immutable 하다는 것. (위의 예제임)
2. 함수형 컴포넌트는 props에 따른 랜더링 결과를 보장받는다.
(immutable한 props를 받기 때문에 결국엔 랜더링 결과가 보장된다는 것. 함수형 프로그래밍의 특징과 일맥상통함이 있음)
3. 매개변수로 받는 props의 destructuring을 활용해 가독성을 보장받을 수 있다.
4. 함수의 모든 장점을 이용할 수 있다. (결국 함수니까)
5. 위에서도 말했지만, 함수형 컴포넌트를 사용했을 때 코드가 간결해지고 가독성도 좋다! 💅

Reference

함수형 컴포넌트와 클래스, 어떤 차이가 존재할까? by Dan Abramov aka 리액트의 아버지