[React] Where to Initialize State in React

React에서 state를 초기화하는 방식엔 여러가지가 있다.

state 초기화의 2가지 방법

1. constructor 에서 선언
2. class 안에 바로 속성으로 선언

Constructor 안에서 선언

constructor 안에서 선언하는 방식은 아래와 같다.

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loggedIn: false
    }
  }

  render() {
  }
}

class가 만들어질 때, constructor는 가장 처음으로 호출된다. 그래서 초기화하는 곳으로 적절하다. class instance 는 이미 메머리에 만들어졌기 때문에, this 를 사용할 수 있다.

state 를 초기화할 때, euqal의 왼쪽에 this.state로 정의하면 되며 만약 state값을 변경하고 싶을 때는 this.setState함수를 이용하면 된다. (this.state.whatever = ...를 사용하면 안됨)

이 때, consturctor를 사용시에 중요한 점은 super(props)를 통해 부모의 constructor를 호출해 줘야 한다는 것이다. default constructor (class를 만들 때 JS에 의해 생성됨)는 자동으로 super를 호출해 주지만, constructor를 overriding을 했으므로 super를 직접 호출해 줘야 한다.

class 속성으로 선언

우리는 class 속성으로 state를 바로 선언할 수 있다.

class App extends React.Component {
  state = {
    loggedIn: false
  }

  render() {
  }
}

하지만 위와 같이 사용하려면 CRA(Create React App)에선 바로 사용 가능하지만, webpack 설정을 처음부터 하신 분들은 추가 코드가 필요하다.

npm install --save-dev babel-plugin-transform-class-properties

babel plugin을 설치 후에 아래와 같이 설정하면 바로 사용할 수 있다.

...
presets: [
  "@babel/preset-env",
  "@babel/preset-react"
],

// plugins 추가
plugins: [
  "transform-class-properties"
]
...

참조

• https://daveceddia.com/where-initialize-state-react/