ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [React] State
    Front-end/react 2022. 8. 10. 23:17

     

    State란?

     React의 핵심 개념

     

    - 리액트 컴포넌트의 변경 가능한 데이터

    - 개발자가 직접 정의한다

    - 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다(나머지는 instance에 정의하면 된다)

    - state는 자바스크립트 객체이다

     

    // 클래스 컴포넌트
    class LikeButton extends React.Component {
        constructor(props) {
            super(props);
    
            this.state = {
                liked: false
            };
        }
    }

     

     

    state는 한번 정의되면 직접 수정하면 안 된다(setState 함수를 통해 수정해야 한다)

     

    //직접 수정한 잘못된 예시
    this.state = {
        name: 'yeonsu'
    };
    
    //setState 함수를 이용한 올바른 예시
    this.setState ({
        name: 'yeonsu'
    });

    Lifecycle

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

     

     

    Mounting Updating Unmounting
    constructor(생성자) render  
    componentDidMount componentDidUpdate componentWillUnmount

     

     


    React state 실습하기

     

    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() is called.`);
        }
        componentDidUpdate() {
            console.log(`${this.props.id} componentDidUpdate() is called.`);
        }
    
        componentDidUnMount() {
            console.log(`${this.props.id} componentDidUnMount() is 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 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 < reserveNotifications.length) {
                    const index = notifications.length;
                    notifications.push(reserveNotifications[index]);
                    this.setState({     //state를 업데이트 하기 위해 setState 함수 사용
                        notifications: 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;

     

    1000ms마다 알림이 나타난다

     

    React Dev Tools를 이용하면 각 컴포넌트를 눌렀을 때 props와 state 확인 가능하다!

     

     

    'Front-end > react' 카테고리의 다른 글

    [React] component / props / state  (0) 2023.01.17
    [React] JSX 문법 사용 시 지켜야 할 규칙  (0) 2023.01.17
    [React] 댓글 컴포넌트 만들기  (0) 2022.08.08
    [React] 시계 만들기  (0) 2022.08.08
    [React] React Element, Component  (0) 2022.08.07
Designed by Tistory.