State and Lifecycle

State와 Lifecycle의 정의

 

State

리액트 Component의 상태(리액트 Component의 변경 가능한 데이터)

 

state는 개발자가 정의한다

렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함!

state는 js객체이다

 

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

 

state는 직접 수정할 수 없다(하면 안된다)

//state를 직접 수정 (잘못된 사용법)
this.state = {
    name: 'Inje'
};

//setState 함수를 통한 수정 (정상적인 사용법)
this.setState({
    name: 'Inje'
});

 

 

 

 

---

 

 

 

 

Lifecycle

리액트 Component의 생명주기

 

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

 

---

 

 

<실습> - state 사용하기

 

[src>>chapter_06>>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: 10,
    },
};

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;

 

 

[src>>chapter_06>>NotificationList.jsx]

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

const reserveNotifications = [
    {
        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;
                notifications.push(reservedNotifications[index]);
                this.setState({
                    notifications: [],
                });
            }else{
                clearInterval(timer);
            }
        }, 1000);
    }
    render() {
        return (
            <div>
                {this.state.notifications.map((notification)=>{
                    return (
                        <Notification 
                            key={notification.id}
                            id={notification.id}
                            message={notification.message}
                        />
                    )
                })}
            </div>
        );
    }
}
export default NotificationList;

 

 

 

[src>>index.js]

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

import Library from './chapter_03/Library';
import CommentList from './chapter_05/CommentList';
import NotificationList from './chapter_06/NotificationList';

ReactDOM.render(
  <React.StrictMode>
    <NotificationList/>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();