3. STATE

#3.0 Class Components and State

 

State --> 동적 데이터와 함께 작업하는 경우 만들어진다.

변하는 데이터, 존재하지 않는 데이터, 생겨나고 사라지는 변경되는 데이터, 하나인 데이터, 두개가 되고 또는 0이 되는 종류의 것들

 

Class Component

Class컴포넌트는 함수가 아니기때문에 return을 가지지 않고, render method를 가지고 있다.

 

이런식으로 선언을 해준다.

왜 갑자기 classComponent를 사용? --> classComponent에서 state를 사용할 수 있다.

state는 object이고, component의 data를 넣을 공간이 있고, 이 데이터는 변하게 된다

 

class이기 때문에 this를 꼭 써주어야한다.

 

어떻게 하면 데이터를 바꿀 수 있을까?

setState를 용해서 state의 값을 변경 가능하다.

단, 직접적으로 변경은 불가능 왜? React.js의 경우 state가 변경될 때마다 변경된 부분을 감지하여 리렌더링을 하는데 setState 메소드를 사용하지 않고 직접 state값을 수정할 경우 변경을 감지하지 못해서 리렌더링을 하지 못하기 때문에

 

setState가 실행이되면, state객체를 refresh해주고 render() function을 다시 호출해준다

 

+버튼 누름

-버튼 누름

숫자의 값이 바뀌는 것을 확인할 수 있다.

 

하지만, 이런식으로 this.state.count + 1과 같은 코드는 좋은 코드가 아니다.

 

current를 사용해서 구현할 수 도 있다.

 

implicit return을 사용해서 구현해줄 수 있다

implicit return이란?

보통 화살표 함수를 통해 함수를 나타내는 경우 ()=>{}형식을 띄게 된다.

뒤의 {}부분이 return 할 대상으로 표현되는 경우가 많다. 만약, return시에 객체를 반환활 경우

js는 return을 나타내기 위한 {}인지, 객체를 나타내기 위한{}인지 구분을 잘 못하게된다.

따라서 둘을 구분하기 위해서 객체를 반환하는 경우에는 ({})를 사용해준다.

 

#3.2 Component Life Cycle

 

life cycle method란? --> react가 component를 생성하고 없애는 방법

mounting --> 다시 태어나는 것

updating --> 일반적인 업데이트를 의미

unmounting --> 컴포넌트가 죽는 것

 

componentDidMount() => component가 처음 render될때 호출됨

componentDidUpdate() => compoonent가 업데이트 될때 호출됨

componentWillUnmount() => component가 사라질때 호출 된다.

생성자 hello출력 --> render메소드 'I'm rendering'출력 --> componentDidMount메소드 'component rendered'출력

+버튼,-버튼 누름 --> setState실행 --> render메소드 'I'm rendering'출력 --> componentDidUpdate메소드 'I'm just updated'출력

 

#3.3 Planning the Movie Component

 

처음 render를 하면 호출되는 life cycle method는 무엇일까? -->  componentDidMount()이다

실행 순서 App 랜더링 --> componentDidMount실행 --> 6초후 setState로 인해 isLoading값 변경 --> 다시 리랜더링