[React]클래스필드(class field)

React에서 사용되는 class field(클래스필드)에 대해 알아보고자 한다. 기본적으로 우리는 클래스컴포넌트와 함수형 컴포넌트에 대해 비교을 해야한다. 그렇다면, 언제 어떻게 클래스 컴포넌트를 사용하는지를 순차적으로 알아보자. 만약 비전공자라 class에 대한 개념이 없다면, 우선은 함수형 컴포넌트로 리액트를 구성해 보는것도 추천한다.

 

 

1. Class Component

React를 처음 공부하면서 무작정 공식문서를 봤다. 그러다 가장 헷갈렸던 것은

1. 컴포넌트 만들 때 언제 class를 쓰나?
2. class에서 construct랑 super은 쓸때가 있고 안쓸 때가 있네?

 

2. 언제 class 쓸까?

결론부터 말하면, state와 Lifecycle 사용할 때 쓴다. 지금은 함수형 컴포넌트에서 Hook()을 사용하여 useState, useEffect를 활용하여 state와 Lifecycle 관리가 가능하다. 하지만, Hook이 없었던 시절에는 함수형 컴포넌트에서 state와 LIfecycle 관리를 하지 못했다. 따라서 어쩔 수 없이 클래스 컴포넌트를 사용을 한것이다. 현재는 클래스 컴포넌트에서 할 수 있는 것들이 거의 대부분 함수형 컴포넌트에서도 할 수 있기 때문에, 대부분 함수형 컴포넌트를 사용하여 리액트를 만든다.

 

함수형 컴포넌트 만들기

useState 기초

useEffect 기초

 

만약 당신이 초급자라면, 함수형 컴포넌트로 공부를 시작해도 전혀 문제 될 것이 없다. 그러나 과거에 작성된 코드를 봐야하는 경우가 있다면, 클래스형 컴포넌트 코드를 이해할 수 있긴 해야하게 때문에 아래의 간단한 개념을 읽고 넘어가자.

 

 

3. super, constructor

2번의 질문에 대한 개념을 정리해 보려한다.

대부분 super와 constructor을 많이 사용한다. 하지만 클래스필드 문법을 사용하면 super와 constructor를 사용하지 않아도 된다.

ex

class Checkbox extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hanPy: true };
    };
    // ...
};
class Checkbox extends React.Component {
        state = { hanPy: true };
    // ...
};

2015년 리액트 버전 0.13부터 기본 클래스 문법을 보조하기 위해 클래스 필드를 지원하였다. 그 전에는 constructor를 정의하고 super(props)를 호출하는 것이 항상 필요했다. 여기서는 ES6만 사용하는 예제로 돌아가서 생각해 보자.

 

 

super

자바스크립트에서는 super는 부모 클래스 생성자를 가리킨다. 리액트에서는 React.Component를 가리킨다. 핵심은 리액트에서는 super(props) 선언전까지 constructor에서 this 키워드를 사용 할 수 없다. 그러나, 어떤 경우에는 super 키워드 안에 props를 작성하지 않아도 render 메서드에서 this.props를 사용 할 수 있다. 리액트가 클래스 문법에 대한 지원이 추가 되었을때, 단지 ES6 클래스로써의 지원만을 한것은 아니였다. 클래스의 넓은 범위의 추상화를 지원하는 것이 목표였다. 물론 리액트는 constructor가 실행된 후 this.props를 할당된다. 그러나 constructor에서 super()가 불려진 이후에도 this.props는 여전히 undefined 일 것이다. 그러면 super에 props를 넣라는 건가 말라는건가?? 디바깅을 위해 꼭 필요한 것은 하니지만 super(props)로 작성하는 것을 추천한다.

 

 

props와 state 비교

props 부모컴포턴트가 자식 컴포넌트에게 주는 값으로 자식 컴포넌트는 props를 받아오기만 하고, 받아온 props를 직접 수정 할 수 없다. state는 컴포넌트 내부에서 선언하면 내부에서 값을 변경 가능하다.

 

 

setState

메소드에 this.setState라는 것이 있다. state에 있는 값을 바꾸기 위해서는 this.setState를 무조건 거쳐야 한다. 리액트는 이 함수가 호출 시 컴포넌트가 리렌더링 되도록 설계되어 있다.

setState는 객체로 전달되는 값만 업데이트를 해준다.

 

state = {
    number : 0,
    han : 'Py'
}

 

여기서 this.setState({ number:1 })을하면, han은 그대로 있고, namber가 0에서 1로 바뀐다. 그러나 setState는 객체의 깊숙한 곳까지는 확인하지 못한다. state 안에 객체가 들어있을 떄는 객체내부의 값을 바꾸려면, 객체 내부에서 불러오고 싶은 위치를 재지정해야한다.