[2023 신입부원 심화 스터디] 조현상 #마지막주차 React.js 섹션3~6

이번 3~6 섹션을 들으면서 개인적으로 어려웠던 부분과 궁금했던 부분들을 정리해보겠습니다.

 

첫번째로 React에서 constructor() 생성자 사용법 관한 것이다.

state 값을 초기화하거나 메서드를 바인딩할 때 constructor() 을 사용하는데 

super() 을 써줘야하는 이유에 대해서 궁금하였다.

constructor(props){
    super(props);
}

그 이유는 super() 를 불러주지 않으면 this 를 사용할 수 없다는 점이었다.

 

render(){
    return <div>Hello { this.props.world }</div>;
}

constructor 가 아닌 대표적으로 render() 같은 경우에는 this를 사용할 수 있었는데

constructor 내부는 super() 없이 사용하면 this 를 사용할 수 없다고 한다.

 constructor(){
    console.log(this) //Error: 'this' is not allowed before 
 }

그래서 super() 을 부르면서 this를 초기화 해줌으로써 super()가 꼭 필요한 존재인 것이었다.

 

두번째로는 props를 넣는 것이었다. 아래 두 개의 코드를 보면

constructor(props){
    super(props);
 }

constructor(props){
    super();
 }

super() 에서 props 의 유무 차이가 궁금했다.

constructor(props){
    super();
    console.log(this.props); // this.props is undefined
 }

두 개의 차이는 props 를 넣어주지 않으면 constructor 안에서 props 접근이 불가능 하기 때문에 console.log(this.props); 를 썼을 경우 오류가 발생한다.

따라서 constructor 을 쓸 경우에는 super(props) 와 함께 써주는 것이 습관화 되어야 할 것 같다.

 

마지막으로 this.setState 에 관해서 추가적으로 조사해봤다.

1. this.state내부의 값을 변경하기 위해선 this.state를 직접적으로 바꿔주는 것이 아니라 this.setState 함수를 호출해서 내용을 변경해줘야 한다.

2. this.setState 함수는 비동기함수이기 때문에 fetch와 같은 비동기 함수를 같이 사용할 경우 값이 안 넘어갈 수 있으니 주의해야 한다.3. this.setState()가 실행되고 나면 컴포넌트는 다시 랜더링이 이루어진다.