Skip to content
This repository has been archived by the owner on Sep 18, 2024. It is now read-only.

Latest commit

 

History

History
28 lines (15 loc) · 1.81 KB

3functionVsClass.md

File metadata and controls

28 lines (15 loc) · 1.81 KB

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

아티클 함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?

클래스가 더 뛰어나다?

클래스가 함수형 컴포넌트에 비해 성능면에서 더 뛰어나다는 것은 신뢰하기 어렵다는 결론을 내렸다.

차이점은 무엇일까?

저자는 무엇이 더 뛰어난지를 밝히는 아티클이 아님을 먼저 이야기한다.

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

저자는 자신의 라이브 데모를 통해서 버튼을 누른 뒤 지연되는 시간동안 class에서는 this의 값이 바뀔 때, 출력해주는 데이터 값이 고정되지 않고 바뀐다고 한다.(의도한 것이 아니기 때문에 오류라고 부른다.) 반면에 함수형 컴포넌트는 값이 인자로 전달되기 때문에 props가 보존되고 this와 다르게 리액트가 함수가 받는 인자를 변경할 수 없다고 한다.

만약 render될 값을 미리 가져와서 쓰고 싶다면?

class에서는 this가 변할 수 있는 값이기 때문에 this.props, this.state를 읽어오면 리액트가 알아서 처리해준다. 함수형 컴포넌트는 ref사용한다. 그러나 ref는 this와 다르게 직접 관리해야한다.

데모

자동으로 최신값을 불러올 때는 effect와 함께 사용한다.

데모

함수를 쓰면서 고민해야하는 부분은 "만약 리액트에서 대부분의 코드를 함수로 쓴다면 코드 최적화나 시간에 따라 어떤 값이 변할 수 있는가에 대해서 다시한번 생각해 볼 필요가 있을 것이다."라고 말한다.