React) Props 와 State

오늘은 리액트에 대해서 다뤄 볼 예정입니다.

학회랑 개인적으로 공부를 하면서 정리를 하면 좋겠다고 생각해 글을 써봅니다.

리액트 공식 문서를 참고하면서 진행했습니다.

https://ko.reactjs.org/docs/getting-started.html

---

👍🏻 리액트에서 데이터를 다룰 때 핵심적인 Props 와 state 에 대해서 알아보겠습니다.

Props

• Props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값을 의미합니다. => 받아 오기만 할 수 있을 뿐 수정이 불가능합니다. (읽기 전용)

• 아래 예시를 통해서 확인할 수 있습니다. (클래스형)

import React, { Component } from 'react';

class MyName extends Component {
  render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.   // this. 을 통해서 props 에 접근할 수 있습니다. 
      </div>
    );
  }
}

export default MyName;

• defalutProps => props의 기본값을 설정해줄 수 있습니다.

import React, { Component } from 'react';

class MyName extends Component {
  static defaultProps = {       //defaultProps 를 통해서 기본값을 설정해줄 수 있다. 
    name: '기본이름' 
  }
  render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
      </div>
    );
  }
}

export default MyName;

---

State

• 자식이 가지고 있는 값을 의미합니다.
• state 값을 바꾸기 위해서는 무조건 setState()를 통해서 바꿔야 합니다.
• 객체로 전달되는 값만 업데이트 해줍니다.

this.setState(
  (state) => ({
    number: state.number     
  })
);

//////////////////////////////////

this.setState(
  ({ number }) => ({    // 비구조화 할당.
    number: number + 1
  })
);


//////////////////////////////////

const { number } = this.state;
this.setState({
  number: number + 1
})