React에서 중요한 개념인 state와 props의 대해서 정리를 다시 글로 써보려 한다.

우선 전에 정리했던 컴포넌트에 대해서 다시 정의하면 컴포넌트는 재활용 가능한 UI 단위를 말하며, 이 컴포넌트 안에 컴포넌트의 관계 즉, 부모와 자식 관계가 형성되고 이 컴포넌트들이 모여서 하나의 페이지가 만들어진다.

React state

state는 컴포넌트 내부에 가지고 있는 상태 값을 말한다.

state의 이름과 초기값을 constructor(생성자)에서 설정해준다.
(state 값을 초기화하거나 메서드를 바인딩할 때 constructor()를 사용)

나는 이 코드에서 super(props)라는 것이 무엇인지 왜 사용해야 하는지 궁금해서 찾아봤는데, javascript에서 super 는 부모클래스 생성자의 참조를 한다고 나와있다.(리액트에서는 React.Component) 또한 언어적 제약사항으로서 생성자에서 super() 를 호출하기 전에는 this 를 사용할 수 없다고 한다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

state 값을 바꾸기 위해서는 setState()를 사용해서 바꿔줘야 한다.

// Wrong
this.state.comment = 'Hello';
대신에 setState()를 사용합니다.

// Correct
this.setState({comment: 'Hello'});

React props

Props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 상태 값을 말한다.

props는 수정이 불가능하고 only-read만 가능하고 부모에게 받아온 값은 this.props를 이용해 사용할 수 있다.

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

defaultProps default 값을 지정할 수 있다.

Greeting.defaultProps = {
  name: 'Stranger'
};

참조 : https://ko.reactjs.org/