⌚️ 1. element 생성방식과 state
class : 일반 class 생성자 함수처럼 new를 통해 객체생성 후, 내부에 있는 render 메서드를 호출해 리턴된 JSX를 babel로 컴파일하여 element 반영한다
위에서 Component 클래스의 타입정의를 살펴보면
이렇게 React Element 객체를 만들기 위해 필요한 각종 프로퍼티와 메서드들이 정의되어 있다.
new를 통해 생성한 객체의 내부사항은 위와 같다.
참고로 재미있는점은, 상속받는 Component 클래스에는 이미 state 가 있기 때문에 undefined로 초기화될 것 같지만, 실제로는 react가 랜더링을 할 때 state가 정의되지 않았으면 프로퍼티를 생성을 하지 않는다. 직접 constructor을 통해 생성을 해주었을 때만 state으로 정의되게 된다.
이렇게 생성한 element 객체 내에 있는 JSX 문법은 Babel에 의해 컴파일되어 React.createElement로 치환된 뒤 호출되게 된다.
리엑트에서 제공하는 babel 컴파일 테스트를 통해 jsx가 어떻게 치환되는지 확인해보면 다음과 같은 인자가 들어가는 것을 알 수 있다
- 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를 참조하는 형태로 가져와야 한다.
function : 함수 컴포넌트에서는 props를 인자로 바로 전달받아 내부의 렉시컬 환경에 저장하는 형태로 이루어진다.
따라서, 내부 구조에서는 함수에서 인자를 사용하듯이 그대로 사용하면 된다.
3. 📱 life cycle
class : 클래스는 Component 클래스의 static 메서드를 이용하여 생명주기를 관리한다.
참고로, 해당 메서드들은 타입 정의에는 존재하지만 인스턴스 자체에는 구현되지 않는다. 왜냐하면 해당 메서드들은 static 메서드이기 때문이다.
그래서, 좀 안타깝지만 현재 타입정의에는 static을 넣는걸 깜빡하지 않으셨나 하는 생각이 든다.(내 착각일것이지만)
위의 생명주기 함수 중, 공식문서에 따르면 잘 사용되지 않는 것이 몇몇 있다.
1. getDerivedStateFromProps = 현재 가져오는 props로 상태 역시 업데이트하여 서로 동기시키고 싶을 떄 사용한다.
- shouldComponentUpdate = 인자로 받아오는 nextProps와 nextState을 현재의 props와 state과 비교하여 리턴되는 boolean 값을 통해 리랜더링을 시킬지 말지를 결정할 수 있지만, 리엑트 공식입장으로는 이 비교를 잘 만들 자신이 없으면 (즉, 효율적인 비교 알고리즘을 할 자신이 없으면) 그냥 얕은 비교를 하는 PureComponent를 extends 하여 사용하라고 권장한다.
function : useEffect 훅을 이용하여 생명주기를 관리한다. 두번째 인자로 들어오는 의존성 배열의 형태에 따라 class 컴포넌트에서 사용하던 생명주기 함수를 대체하고 있다.
