state, class component

state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 

변하는 데이터, 존재하지 않는 데이터, 생기고 사라지고 변경되는 데이터....

 

지금까지 해왔던 것은 function component이었다.

이제는 class component를 사용해 보려고 한다. 

function이 아니기 때문에 return이 없다. 대신 render를 써주면 된다.

function component는 function이고 뭔가를 return한다 그리고 screen에 표시가 된다.

class component는 class이다. 하지만 react component로부터 기능을 상속받아 screen에 표시가 된다.

그걸 render method안에 넣어야한다. react는 자동적으로 모든 class component의 render method를 실행하고자 한다.

우리가 이제부터 말할 state를 사용하기 위해서는 function component방식으로 안되고 class component를 사용해야만 한다.

state는 object이다. component의 data를 넣을 공간이 있고 이 데이터는 변한다.

state를 직접 바꾸려고 하면 다음과 같은 경고창이 뜬다.

Do not Mutate state directly Use setState()

this.state.count = 1 등과 같은 코드를 적어도 유효하지 않다. 왜냐면 react는 render function을 refresh하지 않기 때문이다. 매번 state의 상태를 변경할 때 react가 render function을 호출해서 바꿔주길 원한다. 그러기 위해선this.setState()를 사용해줘야 한다.

 

react는 똑똑해서 setState를 호출하면 state를 refresh하고 render function을 호출해준다.

우리가 setState를 사용하지 않으면 새 state와 함께 render function이 호출되지 않는다.

 

Javasrcript에서는 다른 onClick이나 eventListener를 등록해야 한다. 여기 react에서는 자동적으로 주어진onClick을 가지고 있다.

 

다시한번 ! setState를 호출할 때마다 react는 state를 refresh하고 render한다.

state에 선언한 변수만 setState에서 쓸 수 있는 건 아니다. 즉 미리 선언하지 않아도 된다.

 

다음은 Component life cycle이다. 컴포넌트가 만들어질때 혹은 사라질때 혹은 업데이트 될 때 일련의 과정을 거친다.

먼저 만들어 질때 (Mount)이다. 빨간 선 친 부분은 범위에 벗어나는 내용이다.

constructor는 javascript에서 class를 만들 때 호출되는 것이다. 따라서 component가 mount될 때, component가 screen에 표시될 때, component가 우리의 website에 올 때 constructor를 호출 한다.그리고 나서 render가 호출이 된다. 그다음 componentDidMount가 있는데 이건 render후에 실행이 된다.

 

Updating은 일반적으로 업데이트되는 것이다.

Add를 클릭해서 state를 변경할 때 와 같은 상황이 업데이트다. 이것도 마찬가지로 

render가 된 후에 componentDidUpdate가 실행이된다.

 

Unmounting은 component가 사라질 때이다.

사라지면 componentWillUnmount가 실행이 된다.

 

 

axios는 좀 시간이 걸린다. 따라서 JS에게 componentDidMount함수가 끝날 때까지 약간 시간이 걸릴 수 있다고 말해야한다. 그리고 그걸 기다려야 한다. async await를 사용하여 비동기처리를 해준다.