class vs function component

devAnderson·2022년 2월 18일
0

TIL

목록 보기
59/103

⌚️ 1. element 생성방식과 state

class : 일반 class 생성자 함수처럼 new를 통해 객체생성 후, 내부에 있는 render 메서드를 호출해 리턴된 JSX를 babel로 컴파일하여 element 반영한다

스크린샷 2022-02-18 오전 9 17 57

위에서 Component 클래스의 타입정의를 살펴보면

스크린샷 2022-02-18 오전 9 12 06

이렇게 React Element 객체를 만들기 위해 필요한 각종 프로퍼티와 메서드들이 정의되어 있다.

스크린샷 2022-02-18 오전 9 16 53

new를 통해 생성한 객체의 내부사항은 위와 같다.

참고로 재미있는점은, 상속받는 Component 클래스에는 이미 state 가 있기 때문에 undefined로 초기화될 것 같지만, 실제로는 react가 랜더링을 할 때 state가 정의되지 않았으면 프로퍼티를 생성을 하지 않는다. 직접 constructor을 통해 생성을 해주었을 때만 state으로 정의되게 된다.

스크린샷 2022-02-18 오전 9 22 41

이렇게 생성한 element 객체 내에 있는 JSX 문법은 Babel에 의해 컴파일되어 React.createElement로 치환된 뒤 호출되게 된다.
스크린샷 2022-02-18 오전 9 25 50

스크린샷 2022-02-18 오전 9 25 54

리엑트에서 제공하는 babel 컴파일 테스트를 통해 jsx가 어떻게 치환되는지 확인해보면 다음과 같은 인자가 들어가는 것을 알 수 있다

스크린샷 2022-02-18 오전 9 26 10 스크린샷 2022-02-18 오전 9 26 15 스크린샷 2022-02-18 오전 9 29 55
  • 1째 인자, 타입 : 해당 타입은 html 태그타입이 될 수도 있고, 리엑트의 컴포넌트가 될 수도 있다
  • 2째 인자, 프로퍼티 : className 등과 같은 다양한 attributes의 내용이 들어가게 된다.
  • 3번째 인자, 자식 : 태그 안에 존재하는 자식들을 인자로 건네준다.

function : 호출되면 일반 클로져 함수처럼 주변의 렉시컬 환경을 기억하는 상태로 리턴되는 JSX 문법을 createElement를 통해 치환한 후 호출한다.

이로 인해 함수 컴포넌트는 내부에 원래 본질적으로는 상태를 가지고 있지 않았다.
다만, Hook을 이용하여 렉시컬 환경에 상태를 만들어둔 후 만들어지는 element의 UI에 반영하는 방식으로 이루어져 있다.
또한 hook의 특성상 어떠한 값이든 들어올 수 있다는 것도 특징이다. class형태의 state은 객체로 결정되어 있다.

2. 📱 props

class : 클래스 컴포넌트에서 객체 생성 시 전달받는 props는 super인 Component의 constructor에 의해 this.props 인 프로퍼티 형태로 초기화되어 객체 내부에 저장된다.

이로 인해 class 컴포넌트 내에서 props를 조회하려면 this.props를 통한 미래에 만들어질 인스턴스 "this"의 프로퍼티 props를 참조하는 형태로 가져와야 한다.

스크린샷 2022-02-18 오전 9 44 10

function : 함수 컴포넌트에서는 props를 인자로 바로 전달받아 내부의 렉시컬 환경에 저장하는 형태로 이루어진다.

따라서, 내부 구조에서는 함수에서 인자를 사용하듯이 그대로 사용하면 된다.

3. 📱 life cycle

class : 클래스는 Component 클래스의 static 메서드를 이용하여 생명주기를 관리한다.

참고로, 해당 메서드들은 타입 정의에는 존재하지만 인스턴스 자체에는 구현되지 않는다. 왜냐하면 해당 메서드들은 static 메서드이기 때문이다.
그래서, 좀 안타깝지만 현재 타입정의에는 static을 넣는걸 깜빡하지 않으셨나 하는 생각이 든다.(내 착각일것이지만)
스크린샷 2022-02-18 오전 9 48 27

스크린샷 2022-02-18 오전 9 48 39 스크린샷 2022-02-18 오전 9 48 58

위의 생명주기 함수 중, 공식문서에 따르면 잘 사용되지 않는 것이 몇몇 있다.
1. getDerivedStateFromProps = 현재 가져오는 props로 상태 역시 업데이트하여 서로 동기시키고 싶을 떄 사용한다.
스크린샷 2022-02-18 오전 10 01 25

  1. shouldComponentUpdate = 인자로 받아오는 nextProps와 nextState을 현재의 props와 state과 비교하여 리턴되는 boolean 값을 통해 리랜더링을 시킬지 말지를 결정할 수 있지만, 리엑트 공식입장으로는 이 비교를 잘 만들 자신이 없으면 (즉, 효율적인 비교 알고리즘을 할 자신이 없으면) 그냥 얕은 비교를 하는 PureComponent를 extends 하여 사용하라고 권장한다.

function : useEffect 훅을 이용하여 생명주기를 관리한다. 두번째 인자로 들어오는 의존성 배열의 형태에 따라 class 컴포넌트에서 사용하던 생명주기 함수를 대체하고 있다.

profile
자라나라 프론트엔드 개발새싹!

0개의 댓글