ainochi-kor commented 1 year ago

https://ko.legacy.reactjs.org/blog/2015/10/07/react-v0.14.html#stateless-function-components

// A function component using an ES2015 (ES6) arrow function:
var Aquarium = (props) => {
  var fish = getFish(props.species);
  return <Tank>{fish}</Tank>;
};

// Or with destructuring and an implicit return, simply:
var Aquarium = ({species}) => (
  <Tank>
    {getFish(species)}
  </Tank>
);

// Then use: <Aquarium species="rainbowfish" />

여기서 문제!

이 패턴은 앱의 많은 부분을 구성해야 하는 이러한 간단한 구성 요소의 생성을 장려하도록 설계되었습니다. 앞으로는 불필요한 검사와 메모리 할당을 피함으로써 이러한 구성 요소에 특정한 성능 최적화를 수행할 수도 있습니다.

해당 부분에서 클래스 컴포넌트의 불필요한 검사와 메모리 할당이 무엇일까요?!

havenothorn commented 1 year ago

클래스 컴포넌트에서의 라이프 사이클 로직이 필요없고, 별도의 인스턴스 생성도 일어나지 않습니다.

해당 코드에 나온 Stateless components는 Pure Components, Dumb Components라고도 하며 State로 선언되지 않아 상태 객체가 없으며, 다른 리액트의 라이프사이클 이벤트 또는 메서드를 갖지 않습니다. 동일한 프로퍼티가 주어졌을 때 동일한 마크업을 반환하는 컴포넌트로 오직 뷰를 렌더링하는 목적만을 갖고 있습니다.

리액트 교과서 : 상태비저장 컴포넌트와 상태저장 컴포넌트의 비교 React Stateless Functional Components: Nine Wins You Might Have Overlooked

다만 React v16부터는 성능상의 이점이 없다는 의견을 보게 되어서 최근까지 유효한 이점인지는 생각해보아야 될 것 같습니다.

However, as of React v16, there are no performance benefits from using stateless functional components over class components.

Stateful vs. Stateless Functional Components in React Component Rendering Speed in React

ainochi-kor commented 1 year ago

저는 추론이란 방법으로 접근을 해보고 싶어요!

기존 클래스 컴포넌트의 경우 React.Component를 상속받아야 한다는 사실을 알 거에요! 그리고 상태를 사용하기 위해선 constructor에 super(props)를 선언해줘야 하구요.

이 과정을 통해 클래스로 만드는 리액트 컴포넌트의 가장 초기의 상태로 이후 작업들을 시작할 수 있습니다. 그러나 리액트 컴포넌트에서 제공하는 기능 중 일부 사용하지 않는 간단한 UI를 그리는 컴포넌트를 만들기 위해 Stateless 함수형 컴포넌트가 나왔다고 생각해요.

그리하여서 React.Component를 상속 받지 않고도 DOM을 그릴 수 있는 가장 기본적인 형태가 Stateless 함수형 컴포넌트이기 때문에 그릴 컴포넌트를 선언하는 것 외에 다른 동작이 필요하지 않습니다. 불필요한 기능들을 제거한 순수 함수이기 때문에 불필요한 검사와 메모리 할당을 피했다고 생각합니다!

fe-drilling / gurren-lagann

최초의 함수형 컴포넌트 #5

여기서 문제!