[React] class component와 state 활용- 라이프 사이클, React.Component

우리는 function App 컴포넌트를 사용해 뷰를 만들어주었습니다. 

function App(){
	return(
    	<div>
           <h1>hello</h1>
        </div>
    )
}

하지만, 여기서 즉 function에서는 우리가 state를 사용해줄수없습니다. 

 

state를 사용해 주기위해서 class component와 state를 같이 써주어야합니다. 

 

**중요** 우리가 class를 써줘야하는 이유는 function에서는 react.component에있는 state를 쓸수없기때문에 class를 써주는것입니다. 반대로 state가 필요없다면 function을 써줘도됩니다. 

 

 

 

Class를 사용해주는 이유

우선 class를 생성해주는 방법입니다. function App()을 지워주고 아래와 같은 class를 작성해줍니다.

import React from 'react'

class App extends React.Component{

}

export default App;

그렇다면 왜 기존에 function compoenent를 사용하지않고 class component를 사용해주어야할까요?

 

class component는 class이며 react Component로 부터 확장됩니다. 그리고 react는 자동적으로 class componenet의 render method를 실행합니다. 그러므로 state를 사용할수있는 환경이 만들어집니다.

 

 

Tip: 확장 의미

- 여기서 확장이라는 의미가 햇갈릴수있어 쉽게 설명하자면 App이라는 이름의 클래스는 react.component가 가진 역할들을 같이 가지라는것입니다.

- 즉 class의 extends를 통해서 react component를 클래스 안에서 사용할수있게됩니다. 

- 핸드폰으로 예를 들자면 아이폰이라는 클래스 이름에 스마트폰의 속성들을 extends해주는 것입니다.

- 그러면 아이폰은 스마트폰의 속성인 OS, 스크린, 홈버튼, 스마트폰이 가지고있어야할 기본적인 속성들을 부여받습니다. 

 

 

그럼 class안에서 React.Component의 속성중 사용할수있는 속성이 무엇이있을까요?

 

React.Component - Render

React.Componenet중 하나가 Render입니다 이 이외에도 여러 컴포넌트가 존재하지만, 먼저 state를 구현한후 알아보겠습니다. 

import React from 'react'

class App extends React.Component{ 

  render(){
    return (
      <div>
  
      </div>  
    )
    
  }

}


export default App;

State

render가 구현됬음으로, 우리는 벨류가 바뀔때마다 render가 필요한 state를 사용할수있게되었습니다. 

 

class안에 state를 구현하기전 state의 개념을 알고 오셔야합니다.

 

state는 우리가 바뀌는 변수 값을 뷰에 업데이트 해주기위해 사용되는 함수입니다. state에는 값을 엑서스하는 것과 그값을 수정할때쓰는 setState두개를 구현해주어야 state를 사용할수있게됩니다. 

 

예를들면, 버튼이 눌릴때마다, count라는 값이 1 씩 증가하고 뷰에 나타내주고싶을때, function app component에서는 표현이 불가능하지만, class를 통해 state를 class 내부에서 사용할수있게되어, state값이 변할때마다 뷰가 렌더되게 할수있습니다. 

 

아래 코드를 살펴보겠습니다. 

import React from 'react'

class App extends React.Component{ //extends는 약간 인터페이스 역할 react component의 인터페이스를 가져오는것
  state = { //state 는 object이고 데이터를 여기에 넣어줘야한다. 엑서스할때 state.count로 엑서스 class내부에서 엑서스할땐 this.state
      count: 0
  }
  add = () => { //setState를 여기서 불러와서, 현재값+1을 하도록한다. 
    console.log("add");
    this.setState(currnet => ({ count: currnet.count + 1}))
  }
  minus = () =>{
    console.log("minus")
    this.setState(current => ({count: current.count -1}))
  }
  render(){
    return (
      <div>
        <h1>The number is {this.state.count}</h1> //state object에서 count를 불러온다. 
        <button onClick = {this.add}>Add</button>
        <button onClick = {this.minus}>Minus</button>
      </div>  
    )
      // set state 를 호출할때마다, react는 render를 호출한다.
    
  }

}


export default App;

 

React.Component - lifecycle

렌더 이외에도 여러 리엑트 컴포넌트가 존재합니다.

 

아래와같이 마운팅 아래에 render가 포함되어있는것을 볼수있습니다. 

 

마운팅은 컴포넌트 처음 만들어질때입니다. 

 

updating은 말그대로입니다. 

언마운팅은 페이지가 닫히거나 바뀔때같이 컴포넌트가 없어질때입니다..

안드로이드에서 앱을 만들때 메인엑티비티에서 oncreate과 on resume과 같이 라이프사이클 역할을 하는 것같습니다. 

 

리엑트 공식 문서를 살펴 보시면 다양한 컴포넌트가 존재하는것을 확인하실수있습니다. 

React.Component – React