React - 보충학습 2: states, Component Life Cycle

노마드코더 사이트: ReactJS로 영화 웹 서비스 만들기 강의를 통한 보충 학습 2

function 컴포넌트 -> class 컴포넌트로 바꿔서 작성

why? 편한 function 컴포넌트 나두고 class 컴포넌트라는 걸 씀?

-> class 컴포넌트가 가진 state를 활용하기 위함이다

state는 객체(Object) : 컴포넌트의 데이터(가변적)를 넣는 공간이라 보면 된다

 

class 컴포넌트는 return 을 바로 갖지 못한다 대신 render 함수를 사용해서 활용

리액트는 자동적으로 모든 class 컴포넌트의 render 함수를 실행한다

//기존의 function 컴포넌트 -> class 컴포넌트로 전환해서 작성
class App extends React.Component{  // React class 컴포넌트에서 상속받아 와서 작성
  
  render(){ // 컴포넌트의 데이터를 바꾸기 위한 작업
   
  };
}

 

state 활용

state를 활용하여 이를 render 함수에 전달하여 컴포넌트의 데이터를 변하도록 할 수 있다

class 컴포넌트의 내부에 state를 작성하고,

 state ={
    count: 0,
  };

렌더링되는 부분인 render 함수에서 이 state를 호출하도록 하면된다

 render(){ // 컴포넌트의 데이터를 바꾸기 위한 작업
    return <div>  
      <h1>The number is : {this.state.count}</h1> {/* 해당 함수에서 사용하려면 this 를 이용*/}
      </div>
  };

여기서 데이터를 바꾸기 위한 임의의 함수 2개(add, minus)를 작성하고

이 함수가 state의 count 값을 바꾸도록 만들자. 단, 이 함수 내부에서 state를 직접적으로 변경 하면 안된다.

why? 그렇게하면 리액트는 render함수를 refrersh하지 않기 때문이다

-> "Do not mutate state directly. Use setState()  react/no-direct-mutation-state" 의 경고문구 출력

 

친절하게 setState() 를 사용해라고 알려준다

 -> setState를 사용하지 않으면 새 state와 함께 render 함수가 호출되지 않는다는 점!
 -> 화살표 함수를 이용해 인자로 받아오는 형태로 작성하면 성능저하(의존성 문제) 이슈 없이 코딩 가능

 

결론적으로 내가 add 버튼을 클릭해서 setState를 호출 할 때 마다 리액트가 새로운 state와 함께 render 함수를 호출하는 방식이다(render 함수가 리렌더링된다는 것으로 이해하면 될듯?)

 add = () => {
    // this.state.count= 1; 이렇게 state를 직접적으로 변경하면 안된다! 경고문구로도 확인가능!
    // this.setState({count: this.state.count+1}) // state는 객체라는 것에 유의!
    // 그런데 위처럼 코드 작성하면 state라는 것에 너무 의존적으로되어 성능저하 이슈
    // 화살표 함수를 이용해 인자로 받아오는 형태로 작성하면 해결 가능!
    
    this.setState(current => ({count: current.count+1}))
  }; 


  minus = () => {
    this.setState(current => ({count: current.count-1}))

  };

 

렌더링 부분에서도 이를 버튼에 적용하여 버튼을 클릭하면 state가 변경되도록 수정

render(){ // 컴포넌트의 데이터를 바꾸기 위한 작업
    return <div>  
      <h1>The number is : {this.state.count}</h1>
      <button onClick={this.add}>add</button> {/* 만약 this.add()하면 즉시 함수가 호출되므로 주의*/}
      <button onClick={this.minus}>minus</button>
      </div>
  };

 

 

Component Life Cycle

리액트 컴포넌트의 생명 주기를 뜻한다. 이 생명 주기는 크게,

 

Mounting 관련 부분: 생성 -> 컴포넌트가 마운트 되는거!

Updating 관련 부분: 업데이트

Unmounting 제거 -> 언제 죽지? 페이지를 바꿀 때!

 

3개의 주기로 구분할 수 있는데, 각 생명 주기와 관련된 대표적인 함수를 알아 보자.

constructor()

해당 컴포넌트가 마운트되기 전에 호출된다

리액트 공식 문서 내용을 참조해보면,

 

메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를
구현하지 않아도 됩니다.

React.Component 를 상속한 컴포넌트의 생성자를 구현할 때에는 다른 구문에 앞서 
super(props)를 호출해야 합니다. 그렇지 않으면 this.props가 생성자 내에서 정의되지 않아
버그로 이어질 수 있습니다.

 

콘솔에서 로그를 찍어보면 가장 처음으로 로그가 찍힘을 알 수 있다

 constructor(props){
    super(props);
    console.log("해당 컴포넌트가 마운트되기 전에 호출")
  }

 

 

componentDidMount()

Mounting 부분에 해당하는 것 중 가장 자주 쓰이고 대표적인 함수이다콘솔에 로그를 찍어보면 render 함수가 호출되고 난 후(렌더링 후) 완료되면 찍힘을 볼 수 있다

// Mounting 부분에 해당하는 것 중 가장 대표적인 함수인 componentDidMount
  componentDidMount(){
    console.log("Component 렌더링됨")
  }

 

componentDidUpdate()

Updating 부분에 해당하는 것 중 가장 대표적인 함수이다

콘솔에 찍히는 순서를 보면 내가 변화를 주는 동작을 취했을 때 render함수가 리렌더링되면서 그 후에 찍힌다

// Updating 부분에 해당하는 것 중 가장 대표적인 함수인 componentDidUpdate
  componentDidUpdate(){
    console.log("이제 막 업뎃했어요")
  }

 

componentWillUnmount()

Unmounting 부분에 해당하는 것 중 가장 대표적인 함수

당장 여기서는 확인하기 힘들지만 다른 페이지로 이동 시에 호출된다.

componentWillUnmount(){
    console.log("잘가 컴포넌트야!")
    // 당장 여기 실습에서는 볼 수가 없지만 동작한다: 다른 페이지로 이동하거나 할때 출력될 것이다 아마...
  }

 

전체 코드 내용 정리(App.js)

class 컴포넌트인 App 에서 데이터가 특정 동작에 의해(버튼 누르기) 변경되는 것을 출력하는 코드

콘솔에서 컴포넌트 생명 주기에 따른 로그를 확인 가능하다

import React from "react";
import PropTypes from "prop-types"; // prop-types를 사용하기 위해 import

// 기존의 function 컴포넌트 -> class 컴포넌트로 전환해서 작성해보자
class App extends React.Component{  // React class 컴포넌트에서 상속받아 와서 작성
  constructor(props){
    super(props);
    console.log("해당 컴포넌트가 마운트되기 전에 호출")
  }

  state ={
    count: 0,
  };

  // 데이터 바꾸기를 위한 2개의 함수 작성
  add = () => {
    this.setState(current => ({count: current.count+1}))
  }; 



  minus = () => {
    this.setState(current => ({count: current.count-1}))

  };

  // Mounting 부분에 해당하는 것 중 가장 대표적인 함수인 componentDidMount
  componentDidMount(){
    console.log("Component 렌더링됨")
    // 콘솔에 찍히는 순서를 보면  console.log("I'm rendering") 이후에 찍힘을 알 수 있다
  }

  // Updating 부분에 해당하는 것 중 가장 대표적인 함수인 componentDidUpdate
  componentDidUpdate(){
    console.log("이제 막 업뎃했어요")
    // 콘솔에 찍히는 순서를 보면 내가 변화를 주는 동작을 취했을 때 render함수가 리렌더링되면서 그 후에 찍힘
  }

  // Unmounting 부분에 해당하는 것 중 가장 대표적인 함수인 componentWillUnmount
  componentWillUnmount(){
    console.log("잘가 컴포넌트야!")
    // 당장 여기 실습에서는 볼 수가 없지만 동작한다: 다른 페이지로 이동하거나 할때 출력될 것이다 아마...
  }


  render(){ // 컴포넌트의 데이터를 바꾸기 위한 작업
    console.log("Rendering 하는중")
    return <div>  
      <h1>The number is : {this.state.count}</h1> {/* 해당 함수에서 사용하려면 this 를 이용*/}
      <button onClick={this.add}>add</button> {/* 만약 this.add()하면 즉시 함수가 호출되므로 주의*/}
      <button onClick={this.minus}>minus</button>
      </div>
  };
}


export default App;