SOAPLE 처음 만난 리액트 State and Lifecycle

State (상태) ---> 자바스크립트 객체 형태

리액트에서 State 란?

리액트 Component의 상태, 즉 변경 가능한 데이터를 의미한다.

state를 변경 시 재렌더링 되므로 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함

class LikeButton extends React.Component {
	constructor(props) {
    	supeer(props);
        
        this.state = {
        	liked : false
        };
    }
}

class 컴포넌트는 위처럼 constructor(생성자) 안에서 state를 정의해주고,

function 컴포넌트는 useState 라는 훅을 사용하여 state를 정의해준다.

*** state는 직접 수정이 불가 (된다고 해도 하면 안된다!)

// X, state를 직접 수정하는 예
this.state = {
	name : '길동'
};


// O, setState 함수를 통한 수정
this.setState({
	name : '길동'
});

수정을 위해선 위처럼 setState() 함수로 수정해줘야 한다.

Life Cycle (생명주기)

리액트 component의 생명주기는 정해져 있다.

리액트 Component의 생명주기

component가 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다.

1. 생성될 때 (Mounting)

가장 먼저 constructor 가 실행 -> render -> componentDidMount() 실행

2. 업데이트할 때 (Updating)

new props 되거나, setState(), forceUpdate() 되는 세가지 경우에 의해 render ->

componentDidUpdate() 실행

3. 제거될 때 (Unmounting)

상위 컴포넌트에서 하위 컴포넌트를 더이상 렌더링하지 않을 때 componentWillUnmount() 실행

state 사용

import React from "react";

const style = {
  wrapper : {
    margin : 8,
    padding : 8,
    display : 'flex',
    flexDirection : 'row',
    border : '1px solid gray',
    borderRadius : 16,
  },
  messageText : {
    color : 'black',
    fontSize : 16,
  },
};

class Notification extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return (
      <div style={style.wrapper}>
        <span style={style.messageText}>{this.props.message}</span>
      </div>
    );
  }
}
export default Notification;

import React from "react";
import Notification from "./Notification";

const reservedNotifications = [
  {
    message : '안녕하세요, 오늘 일정입니다.',
  },
  {
    message : '곧 미팅이 시작됩니다.',
  },
  {
    message : '미팅 이후에는 스케쥴이 없습니다.',
  },
];

var timer;

class NotificationList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      notifications : [],
    };
  }

  componentDidMount() {
    const {notifications} = this.state;
    timer = setInterval(() => {
      if(notifications.length < reservedNotifications.length) {
        const idx = notifications.length;
        notifications.push(reservedNotifications[idx]);
        this.setState({
          notifications : notifications,
        });
      } else {
        clearInterval(timer);
      }
    }, 1000);
  }

  render() {
    return (
      <div>
        {this.state.notifications.map((notification) => {
          return <Notification message={notification.message} />;
        })}
      </div>
    );
  }
}

export default NotificationList;

React Developer Tools

리액트 전용 개발자 도구

개발자 도구에 Components 탭이 추가되면서 컴포넌트의 props와 state를 확인 가능

주니어 개발자