[React] 공식 문서 5. State와 생명주기

https://ko.reactjs.org/docs/rendering-elements.html

 

 

 

이전 내용 복습

[WEB] - [React] 공식 문서 3. 엘리먼트 렌더링

[React] 공식 문서 3. 엘리먼트 렌더링

• UI를 업데이트 하는 한 가지 방법
  • 새로운 엘리먼트를 생성 후 이를 ReactDOM.render()로 전달
• 렌더링 된 출력값을 변경하기 위해 ReactDOM.render() 호출

 

 

 

 

5. State와 생명주기

 

목표 :

1. Clock 컴포넌트를 완전히 재사용하고 캡슐화 하기

2. 컴포넌트가 스스로 타이머 설정 and 매초 스스로 업데이트하기

 

 

원래 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function tick(){
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

 

 

1. Clock 컴포넌트를 완전히 재사용하고 캡슐화 하기

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Clock(props){
  return(
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick(){
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

 

 

2. 컴포넌트가 스스로 타이머 설정 and 매초 스스로 업데이트하기

-> Clock 컴포넌트에 state 추가

 

 

 

 

함수에서 클래스로 변환하기

함수 컴포넌트 -> 클래스 컴포넌트 변환 5단계

1. React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다.

-> Clock.js 생성

 

2. render()라고 불리는 빈 메서드를 추가합니다.

-> function Clock(props)을 class Clock extends Component로 변경

-> 클래스 내부에 render() 메소드 추가

 

3. 함수의 내용을 render() 메서드 안으로 옮깁니다.

-> 함수 내부 내용을 render() 내부로 이동

 

4. render() 내용 안에 있는 props를 this.props로 변경합니다.

-> props 앞에 this. 추가

 

5. 남아있는 빈 함수 선언을 삭제합니다.

 

<Clock.js>

import React from 'react';

class Clock extends React.Component{
    render(){
        return(
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

export default Clock;

• render() 메소드는 업데이트가 발생할 때마다 호출
• 같은 DOM 노드로 <Clock />을 렌더링하는 경우, Clock 클래스의 단일 인스턴스만 사용
  -> 로컬 state와 생명주기 메소드와 같은 부가적인 기능 사용 가능하게 함

 

 

 

 

클래스에 로컬 State 추가하기

date를 props에서 state로 이동하기 3단계

1. render() 메서드 안에 있는 this.props.date를 this.state.date로 변경합니다.

-> props를 state로 변경

 

2. 초기 this.state를 지정하는 class constructor를 추가합니다.

    constructor(props){
        super(props);
        this.state = {date: new Date()};
    } // 초기 state 지정

• 클래스 컴포넌트는 항상 props로 기본 생성자 호출

 

3. <Clock /> 요소에서 date prop을 삭제합니다.

 

 

<Clock.js>

import React from 'react';

class Clock extends React.Component{
    constructor(props){
        super(props);
        this.state = {date: new Date()};
    } // 초기 state 지정

    render(){
        return(
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

export default Clock;

 

<index.js>

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Clock from './Clock';

function tick(){
  ReactDOM.render(
    <Clock />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

 

=> 여기까지 완료하고 렌더링하면 초 업데이트가 안되는 것이 맞음! 이제부터 할거에요~

 

 

 

 

생명주기 메서드를 클래스에 추가하기

마운팅 : Clock이 처음 DOM에 렌더링 될 때마다 타이머를 설정한다.

언마운팅 : Clock에 의해 생성된 DOM이 삭제될 때마다 타이머를 해제한다.

 

많은 컴포넌트가 있는 어플리케이션에서 컴포넌트가 삭제될 때 해당 컴포넌트가 사용 중이던 리소스를 확보하는 것이 중요!

 

생명주기 메서드 선언하여 컴포넌트가 마운트 or 언마운트 될 때 일부 코드를 작동할 수 있다.

 

이 코드에서 사용된 생명주기 메서드는

constructor

componentDidMount

componentWillUnmount

render

 

<Clock.js>

import React from 'react';

class Clock extends React.Component{
    constructor(props){
        super(props);
        this.state = {date: new Date()};
    } // 초기 state 지정

    componentDidMount(){
        this.timerID = setInterval(
            () => this.tick(),
            1000
        ) // 타이머 설정(timerID 저장)
    } // 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행

    componentWillUnmount(){
        clearInterval(this.timerID);
    } // 타이머 분해

    tick() {
        this.setState({
            date: new Date()
        }); // setState는 컴포넌트 로컬 state 업데이트
    } // Clock 컴포넌트가 매초 작동하도록 하는 메서드

    render(){
        return(
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

export default Clock;

 

 

 

 

State를 올바르게 사용하기

setState() 에 대해서 알아야 할 3가지

 

1. 직접 State를 수정하지 말기 -> 대신 setState() 사용!

this.state.comment = 'Hi'; // Wrong
this.setState({comment: 'Hi'}); // Correct

 

* this.state를 지정할 수 있는 유일한 공간은 constructor

 

 

2. State 업데이트는 비동기적일 수도 있다.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

// Correct (arrow function 사용)
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

// Correct (arrow function 사용x)
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

 

 

3. State 업데이트는 병합된다.

state는 다양한 독립변수를 포함할 수 있음

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

 

별도의 setState() 호출로 변수를 독립적으로 업데이트 가능

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

 

병합은 얕게 이루어지기 때문에 this.setState({comments})는 this.state.posts에 영향을 주진 않지만 this.state.comments는 완전히 대체된다.

 

 

 

The Data Flows Down (데이터를 아래로 흐른다.)

컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.

 

"하향식(top-down)" 또는 "단방향식" 데이터 흐름

 

 

 

 

전체 코드 링크

github.com/NakyungIm/React/tree/master/clock-app

NakyungIm/React