리액트 // 생명주기

Web/ReactJS

리액트 // 생명주기

Jaybon 2020. 7. 29. 17:54

라이프 싸이클

클래스형 컴포넌트

함수형 컴포넌트 - 생명주기를 다룰 수 없다

컴포넌트 하나 만들어 준다

import React, { Component } from "react";

// 클래스형 컴포넌트
class Counter extends Component {
  state = {
    number: 0,
  };

  // 그림을 그려주는 메서드
  render() {
    // 이 공간은 2가지의 값을 컨트롤 할 수 있다
    const temp1 = this.state;
    const temp2 = this.props;

    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
      </div>
    );
  }
}

export default Counter;

const가 있는 것과 없는 것의 차이

데이터 1번만 받고 더 이상 새로운 데이터를 받을 필요가 없을 때 (최초 실행 후 읽기전용)

값이 추후 변경 될 가능성이 있을 경우 const를 뺀다

render는 그림을 그려주는 함수 = setState()가 호출되거나, 최초에 객체 생성시 그림 그려줌

render 내부에서는 state와 props에 접근할 수 있음

return 내부는 JSX 문법이 들어감

import React, { Component } from "react";

// 클래스형 컴포넌트
class Counter extends Component {
  state = {
    number: 0,
  };

  add = () => {
    this.setState({
      number: this.state.number + 1,
    });
  };

  minus = () => {
    this.setState({
      number: this.state.number - 1,
    });
  };

  // 그림을 그려주는 메서드
  //render는 그림을 그려주는 함수 = setState()가 호출되거나, 최초에 객체 생성시 그림 그려줌
  //render 내부에서는 state와 props에 접근할 수 있음
  //return 내부는 JSX 문법이 들어감
  render() {
    // 이 공간은 2가지의 값을 컨트롤 할 수 있다
    // temp1 = this.state;
    // temp2 = this.props;

    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.add}>+</button>
        <button onClick={this.minus}>-</button>
      </div>
    );
  }
}

export default Counter;

import React, { Component } from "react";
import Counter from "./Counter";

class App extends Component {
  render() {
    return (
      <div>
        <Counter />
      </div>
    );
  }
}

export default App;

----

Counter 에서 state 삭제

import React, { Component } from "react";

// 클래스형 컴포넌트
class Counter extends Component {
  add = () => {};

  minus = () => {};

  // 그림을 그려주는 메서드
  //render는 그림을 그려주는 함수 = setState()가 호출되거나, 최초에 객체 생성시 그림 그려줌
  //render 내부에서는 state와 props에 접근할 수 있음
  //return 내부는 JSX 문법이 들어감
  render() {
    // 이 공간은 2가지의 값을 컨트롤 할 수 있다
    // temp1 = this.state;
    // temp2 = this.props;

    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.props.number}</div>
        <button onClick={this.add}>+</button>
        <button onClick={this.minus}>-</button>
      </div>
    );
  }
}

export default Counter;

App.js 에서 state 추가하고 컴포넌트에 프롭스 넘겨주기

import React, { Component } from "react";
import Counter from "./Counter";

class App extends Component {
  state = {
    number: 0,
  };

  render() {
    return (
      <div>
        <Counter number={this.state.number} />
      </div>
    );
  }
}

export default App;

-----------

이렇게 사용 합시다!

App

import React, { Component } from "react";
import Counter from "./Counter";

class App extends Component {
  state = {
    number: 0,
  };

  add = () => {
    this.setState({
      number: this.state.number + 1,
    });
  };

  minus = () => {
    this.setState({
      number: this.state.number - 1,
    });
  };

  render() {
    return (
      <div>
        <Counter number={this.state.number} add={this.add} minus={this.minus} />
      </div>
    );
  }
}

export default App;

Counter

import React, { Component } from "react";

// 클래스형 컴포넌트
class Counter extends Component {
  // 그림을 그려주는 메서드
  //render는 그림을 그려주는 함수 = setState()가 호출되거나, 최초에 객체 생성시 그림 그려줌
  //render 내부에서는 state와 props에 접근할 수 있음
  //return 내부는 JSX 문법이 들어감
  render() {
    // 이 공간은 2가지의 값을 컨트롤 할 수 있다
    // temp1 = this.state;
    // temp2 = this.props;

    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.props.number}</div>
        <button onClick={this.props.add}>+</button>
        <button onClick={this.props.minus}>-</button>
      </div>
    );
  }
}

export default Counter;

----------------