[React] 7. State and Lifecycle

State

• 리액트컴포넌트의 상태.
• 리액트 컴포넌트의 변경 가능한 데이터.
• state는 개발자가 정의하여 사용한다.
• 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.
• 자바스크립트 객체

Lifecycle

• 생명주기
• 리액트 컴포넌트의 생명주기 

  

1. 생성자 constructor
2. 렌더링 render
3. 언마운트 componentWillUnmount 상위컴포넌트에서 현재컴포넌트를 더이상 화면에 표시되지 않게 될 때 componentWillUnmount가 호출됨

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

알림 실습

• React Developer Tools ( React Developer Tools ) 크롬 확장 프로그램 설치 후 사용
• 콘솔 대신 이것을 사용

 

Notification.jsx

import React from "react";

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

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

    this.state = {};
  }

  componentDidMount() {
    console.log(`${this.props.id} componentDidMount() called.`);
  }

  componentDidUpdate() {
    console.log(`${this.props.id} componentDidUpdate() called.`);
  }

  componentWillUnmount() {
    console.log(`${this.props.id} componentWillUnmount() called.`);
  }

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

export default Notification;

NotificationList.jsx

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

const reservedNotifications = [
  {
    id: 1,
    message: "안녕하세요 안녕하세요~",
  },
  {
    id: 2,
    message: "반갑습니다 반가워요~",
  },
  {
    id: 3,
    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 index = notifications.length;
        // js의 list는 push로 값을 넣어준다.
        notifications.push(reservedNotifications[index]);
        this.setState({
          // 클래스 컴포넌트에서 state를 업데이트하려면 반드시 setState를 사용한다.
          notifications: notifications,
        });
      } else {
        // notifications 비우기
        this.setState({
          notifications: [],
        });
        clearInterval(timer);
      }
    }, 1000);
  }

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

export default NotificationList;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
//import App from "./App";
import reportWebVitals from "./reportWebVitals";

//import Library from "./chapter_03/Library";
// import Clock from "./chapter_04/Clock";
// import CommentList from "./chapter_05/CommentList";
import NotificationList from "./chapter_06/NotificationList";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <NotificationList />
  </React.StrictMode>
);

reportWebVitals();

 

결과