💗 State?

✍ 리액트 Component의 상태, 변경가능한 데이터

state는 개발자가 정의하며
렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야함

state는 JacaScript의 객체이다.

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

state는 직접 수정할 수 없으므로 setState 함수를 통해서 변경해야함

💗 LifeCycle

Class 컴포넌트 개념에서 기억할 것이므로 이런 것이 있다+컴포넌트 마지막 특징만 생각해두기

✍ 리액트 클래스 컴포넌트의 생명주기

출생: Mounting, 컴포넌트 state 호출됨

인생: Updating

사망: Unmounting, 상위 컴포넌트에서 해당 컴포넌트를 더이상 사용하지 않게 될 때

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

💗 코드 예시

const styles = {
  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 = {};
  }
  
  componentDidMount(){
    console.log(`${this.props.id} "componentDidMount() called."`) };
  componentDidMount(){
    console.log(`${this.props.id} "componentDidUpMount() 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;

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: [], //state에서 초기화
    };
  }

  componentDidMount() {
    const {notifications} = this.state;
    timer = setInterval(() => { //1초마다 정해진 배열 수행
      if(notifications.length<reservedNotifications.length){
        const index = notifications.length;
        notifications.push(reservedNotifications[index]);
        this.setState({ //state 업데이트 하기 위해서
          notifications: notifications,
        });
      }else{
        this.setState({
          notifications: [],
        });
        clearInterval(timer);
      }
    }, 1000);
  }

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