React 의 동작 및 작성 방식 -1

React는 render 방식을 이용해서 화면을 구현한다. 별도의 페이지 이동 없이 변경되는 내용만 새롭게 화면에 그려낸다.

 

작성 방식으로는 크게 두 가지가 있다.

 

1.Class 형식으로 작성한 Component 방식

 

컴포넌트는 개념적으로 props를 input으로 하고 UI가 어떻게 보여야 하는지 정의하는 React Element를 output으로 하는 함수 이다.

import React,{Component} from "react";

class App extends Component {
 
 state ={num:0}
 
 componentWillMount() {
 
 }
 
 componentDidMount() {
 
 }
 
  render() {
     const{num} = this.state
    return (
      <div>{num}</div>
    )
  }
}

해당 방식은 대표적으로 다음과 같은 Lifecycle 함수를 통해 움직인다. 

  

 

  1) componentWillMount()  -> 컴포넌트가 DOM 상에서 제거될 때에 호출된다.

 

  2) componentDidMount()  -> 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출된다.

                                     -> DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지면 된다.

                                     -> 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치이다.

  3) render() ->클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드

 

import React,{Component} from "react";


class App extends Component {
  state ={num:0}

  componentDidMount(){
    console.log("동작")
  }

  componentWillMount(){
    console.log("동작2")
  }

  click = () => {
    const{num} = this.state
    console.log(num)
  }

  
  render() {
    const{num} = this.state
    const {click} = this;
    return (
    <div>
    <button onClick={click}>{num}</button>   
    </div>
    )
  }
}


export default App;

다음과 같은 코드의 콘솔에서는 

 

동작2 -> 0 -> 동작의 순서로 나타난다. componentWillMount()가 Dom 호출 전에 실행되고 화면 렌더링이 진행되고 바로 componentDidMount()이 실행됨을 알게 되었다.