[React.js] 노마드코더 Movie App 서비스 만들기 #3 State

여태 사용한 Component는

function App( ){} 가 function component 형태라면,

class App extends React.Component {} 는 class component형태이다. 여기서 class는 javascript에서 왔다.

 

이때 extends React.Component 를 하는 이유?

React.Component가 가진 것들 중 State를 불러오겠다는 의미이다.

왜냐하면 컴포넌트를 만들 때마다 모든 것을 만들고 싶지 않으니까 있는 것에서 가져다 사용하여 쓰겠다는 것이다. 이러한 예 : Human에서 확장된 Baby, Cell phone에서 확장된 iphone 정도가 있겠다.

 ex) Baby가 Human에서 확장되고, Human의 모든 것(특징)을 가져올 수 있으니까
 ex) iPhone은 Cellphone으로부터 확장된다. class Cellphone에 camera, screen, charger를 넣은 다음 class Cellphone에서 확장한 class iPhone 을 가질 수 있다

 

 이제 class App은 React Component에서 확장되고 있으니 App Component는 React Component 이다.

 

React Component는 어떻게 동작할까?

class React Component는 return을 가지고 있지 않다. 왜? function이 아니기 떄문에

하지만 render(method){ } 를 가지고 있기 때문에  이제 class App에서도 render(method){ } 를 사용할 수 있다

	Function Component	Class Component
	Function	Class
형태	function App( ){                    return (                    )                         } ;	Class App extends React.Component { render( ) {                          retrun (               )                     }                                   };
출력	return     ->    screen에 표시	React Component로부터 확장된 render( ){ } ->       screen에 표시
용도	정적 데이터 prop	동적 데이터 state

React Component 는 자동적으로 class component & render method 를 실행하고자 한다

 

State

그럼 왜 Function Component 대신 Class Component를 사용하는가? 바꾸고 싶은 data를 state에 넣기 위하여

Class Component는 State를 가지고 있다.

이 State는 Object로써( { } ) Component에 변하는 data(동적데이터, 존재하지 않는 데이터)를 넣고 싶을 때 사용한다.

여기서 변하는 데이터는 Count가 되겠다.

state를 render method 에 넣는 방법

state를 render method 에 넣는 방법

Class Component 안에서 이루어지기 떄문에, 즉 class 이기 때문에 {this.state.count} ( {state.count} X )

이제 class내부에 Javascript를 사용하여 각각의 button을 위한 2개의 function을 작성한다.

-React에서 button은 onClick(prop)을 기본적으로 가진다.

이것을 이용하여 함수를 호출한다.

onClick={ this.add } : 클릭할 때 호출된다.

onClick={ this.add ( ) } : 함수라고 불리고 즉시 호출된다. ( )은 즉시를 의미한다.

 

State 업데이트하기 - setState()

 절대 state는 직접적으로 변경하면 안된다.

state를 직접 변경했을 때 오류

왜 state를 직접 변경하면 안될까?

- React가 render function을 refresh하지 않기 때문에

- 즉, state의 상태를 변경할 때마다 React가 render function을 호출해서 바꿔주어야 한다는 것이다.

언제는 리액트가 멍청해서 key prop을 줘야 한다 그러고 이번엔 react가 매우 똑똑해서 setState function을 호출하면,우리가 setState를 호출할 때와 view&render function을 refreshing하는걸 바라는 것을 안다고 한다. 니꼴라스 선생님 참 재밌으셔 ㅎㅎ!

그럼 어떻게 해야 state의 상태도 바꾸면서 react가 refreshing해줄 수 있을까?

바로, setState()을 사용한다

<setState() 사용법>

state는 object이기 때문에, setState는 새로운 state를 받아야 한다.

원리 : 내가 setState 호출 -> React가 state를 refreshing + render() { } 호출 with 새로운 state

<state를 set할 때, React에서 외부의 상태에 의존하지 않는 가장 좋은 방법>

this.state 대신 인수 current 사용

 

⭐setState()를 사용해야 React는 새로운 state와 함께 render 함수를 실행한다 ⭐

 

Life Cycle Method (Mounting / Updating / Unmounting)

 React Component에서 사용하는 유일한 function = render function 이지만, render외에 많은 것들이 있다.

life cycle method 란? React가 component를 생성/제거 하는 방법

component가 생성될 때 -> 몇가지 function 호출 -> render -> 몇가지 function 호출 이런식으로 돌아간다고 간단하게 설명할 수 있겠다.

(예 : add버튼을 클릭해서 +1+1+1이 될 때, component가 update될 때, 호출되는 다른 function들이 있다.)

 

자주 쓰이는 함수들을 살펴보자. (자주 안 쓰이는 건 생략함)

 

Mounting : component 생성 (예 : 아무것도 안하고 새로고침만 했을 때)

- application을 mount되자마자 isLoading은 true

1	constructor()	- render보다 먼저 호출 - React에서 오는 게 아닌, Javascript에서 class만들 때 호출됨 - component가 mount될 떄, screen에 표시될 때, website로 갈 떄 constructor 호출
2	render()	component가 render 중이다
3	componentDidMount()	component가 render가 되었음을 알려준다, 처음에 render하자마자 호출되는 메서드

 

Mount!! 호출 순서를 살펴보자

 

Updating : component 변경

 

1	shouldComponentUpdate()	- component가 update를 할지 말지를 결정한다
2	render()	component가 render 중이다 .
3	componentDidUpdate()	component가 update되었음을 알려준다.

 

Update!! 버튼을 누르니까 render가 한번 더 되고 update가 되었다!

이렇게 버튼을 클릭한다면(=setState를 호출)!!  Component 호출 -> render 호출 -> Update완료

 

Unmounting : component 죽음 (예 : 페이지를 떠날 때)

component가 죽다는 것은? 페이지가 바뀔때, state로 component 교체할 때 등

1

componentWillUnmonut()

- component가 떠날 때 호출 (콘솔창에 찍히진 않는지만,  죽은 컴포넌트의 용량을 확보기 위하여 사용한다 일단은 이렇게 알자..!)

 

 

---

 

  자, 이제 진짜 movie app을 만들어보자! 필자의 경우엔 두번째 연습이기 때문에 리액트앱을 다시 만들어 앞에서 배운것들을 복습하며, 프로젝트 초기화를 시켰다.

1. 로딩창 만들기

- 준비물: componentDidMount(), setState()

 

isLoading이 정의 되지 않았다는 오류가 뜬다? 왜 그럴까?

바로 App Component는 Class Component이기 때문에 this.state 사용해야 한다.

매번 this.state 써주기 귀찮으니 변수로 하나 만들어놓자

es6문법 사용하여 this.state를 담은 변수 isLoading 생성

아주 잘 동작한다!

 로딩창은 웹을 실행했을 때 저절로 render가 되기 때문에, 처음 render가 할 때 호출되는 life cycle method를 떠올릴 줄 알아야 한다. 이때 필요한 life cycle method는 무엇일까? componentDIdMount()

 componentDidMount() 에 setTimeout을 사용하여 5초후에 Loading에서 We are ready라고 바뀌도록 세팅해보자.

 

state와 setState에 대해 좀더 추가하자면..

- setState 안에 다른 무언가를 추가해도 될까? O

- setState안에 추가한 것을 state에도 선언을 해야 할까? O ( 선언 안해도 괜찮지만 좋은 습관! )

- setState를 사용할 때 state 안에 default 값들을 선언할 필요는 없다

내가 나중에 쓰고자하는 state를 필수로 선언할 필요는 없다. 하지만 좋은 습관이라는 거! 이 뜻이... 위에 뜻과 맞나요?

초기값이 나타나지 말아야 할 때 타입별로 다음과 같이 초기화 할 수 있다.

setState={a:'', a:null, b:[], c: {}}

today is {a}, {b}

 

이렇게 로딩페이지를 만든 다음엔

- componentDidMount에서 data를 fetch 한다.

- API로부터 data feting이 완료되면, We are ready라는 글 대신 movie를 reander하고, map을 만들고 movie를 다시 render할 것이다.

과 같은 순서로 진행될 것이다. 그럼 뿅!