-
[React] StateFront-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.jsximport 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;
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