React 자습서 따라하기 (1) Constructor

오랜만에 본 React가 하나도 기억이 안 나서 다시 시작하는 Tic-tac-toe 게임! (https://reactjs.org/tutorial/tutorial.html#inspecting-the-starter-code)

 

 

 

튜토리얼을 따라가며 배운 것:

 

 

 

1. Constructor 사용하기

class Square extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    value: null,
  };
}
}

 

 

Constructor를 사용하는 경우

 

1) React가 DOM에 Mount되기 전에 (즉, Rendering 전에) Component의 초기 state을 설정해야 할 필요가 있을 때

2) Event Handling을 통해 User의 반응에 따라 State이 변할 때 (ex. onClick)

 

 

Constructor을 사용할 때의 규칙

 

this.props을 사용하기 전에 super(props)을 사용해야 한다. 

이렇게 하면 Constructor가 존재하기 전에도 this.props를 생성할 수 있기 때문에 불필요한 에러를 막을 수 있다.

super(props)을 사용하면 Parent Constructor을 가져올 수 있는데 위 코드 예시에서는 React.Component가 된다.