함수형 컴포넌트 vs 클래스 컴포넌트

https://overreacted.io/ko/how-are-function-components-different-from-classes/

의 요약본이자 뇌피셜이 들어간 글입니다.

 

기존 react에서는 class 컴포넌트가 function 컴포넌트 보다 state등의 더 많은 기능을 제공한다고 믿어왔다.

하지만 Hook의 등장으로 이 특징은 이제 크게 와닿지 않게 되었다.

 

둘 중에 성능이 뭐가 좋으냐, 많은 실험이 있었으나 유의미한 결과를 도출해내지는 못했다.

 

그럼 도대체 무엇이 다른것인가.

 

 

함수형 컴포넌트는 렌더링된 값들을 고정시킨다.

 

 

위 코드는 아주 유명한 예제이다. https://codesandbox.io/s/pjqnl16lm7

 

겉으로는 함수 컴포넌트, 클래스 컴포넌트가 같은 동작을 하는 것처럼 보여진다.

코드는 Follow버튼을 누르면 3초뒤에 Follow하는 메시지를 보여주는 예제이다.

 

가장 중요한 차이점은, Click후 3초 이내에 Follow 대상을 바꿔보는 것이다.

그러면 클래스형 컴포넌트는 3초후에 바뀐 대상이 alert에 노출될 것이고,

함수형 컴포넌트는 클릭한 시점의 값을 alert에 노출시킬 것이다.

 

즉, Follow하는 대상을 변경해서 브라우저에 다시 렌더링이 되었다.

class 컴포넌트는 prop값이 불변이어야 함에도 불구하고 바뀐 값이 노출되었다.

function 컴포넌트는 prop이 불변상태로 동작하였다.

클래스 컴포넌트를 위와 같이 변경하면 정상적으로 동작할 것이다.

왜냐하면 click당시의 user값을 3초후에 전달해주기 때문이다.

 

하지만 이런 방법은 코드를 복잡하게 만든다. this.props.user를 사용하는 모든 곳에 이렇게 사용해야해서 근본적인 해결책이 되지 못한다.

alert을 handleClick 내부에 넣는 것도 좋은 해결책이 아니다. (함수를 합쳐야할 이유가 없는데 합치는 행위)

 

이러한 문제점을 클로저로 해결할 수 있다.

(클로저는 자식 스코프가 부보 스코프의 변수 환경의 정보를 기억하고 접근할 수 있는 것이다.)

 

 

위와 같이 render함수 내에 메서드들을 선언함으로써, 부모 스코프인 this.prop에 접근할 수 있다.

즉, render시점에 props을 값을 고정해둔것이다.

 

클로저 안에 있는 코드들은 render시점의 props를 그대로 사용할 수 있게 된다!

근데 당연히 render안에 render 로직 말고 다른 로직들이 있으니 꺼림칙할 것이다.

 

결국 이런 코드는 함수 컴포넌트의 구조와 똑같아진다.

 

이제 "함수형 컴포넌트는 렌더링된 값들을 고정시킨다."라는 의미를 알게 되었다.

(useState도 같은 원리이다. 저장된 state를 호출되었을 때의 고정시켜놓는 것이다)