[React] Props와 State

1. Props, State

Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터이고,

State는 컴포넌트 내부에서 변경할 수 있는 데이터입니다.

둘 중 하나라도 변경되면 렌더링이 일어납니다.

render 함수는 Props와 State를 바탕으로 컴포넌트를 그립니다.

그리고 Props와 State가 변경이 되면, 컴포넌트를 다시 그리게 됩니다.

컴포넌트를 그리는 방법을 기술하는 함수가 바로 render 함수입니다.

2. Props

2.1 Props 사용 예제 (1)

// {message: 'Hello!!!'}
function Component(props) {
  return (
    <div>
      <h1>{props.message}</h1>
    </div>
  );
}

ReactDOM.render(
  <Component message='Hello' />,
  document.querySelector('#root')
);

 

함수로 컴포넌트를 만들고 props 를 매개변수로 받고 있습니다.

 

2.2 Props 사용 예제 (2)

class Component extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <Component message='Hello' />,
  document.querySelector('#root')
);

클래스로 컴포넌트를 만들고 this 를 사용하여 props에 접근할 수 있습니다.

 

2.3 기본값 사용 예제

function Component(props) {
  return (
    <div>
      <h1>{props.message}</h1>
    </div>
  );
}

Component.defaultProps = {
  message: 'default값'
}

ReactDOM.render(
  <Component />,
  document.querySelector('#root')
);

직접 값을 지정하지 않고, default 값을 설정하여 화면에 출력해보겠습니다.

class Component extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
      </div>
    );
  }
  static defaultProps = {
    message: '기본값!',
  }
}

ReactDOM.render(
  <Component />,
  document.querySelector('#root')
);

<Component mesaage='Not default' />으로 직접 값을 지정한다면, Not default 라는 메세지가 출력됩니다.

3. State

State는 현재 클래스 컴포넌트에서만 사용할 수 있는 기능입니다.

하지만 Hooks을 사용하면, 함수에도 사용이 가능합니다.

class Component extends React.Component {
  state = {
    count: 0,
  }
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
        <p>{this.state.count}</p>
      </div>
    );
  }

  // 라이프사이클: 화면에 올리자마자 바로 실행되는 함수
  componentDidMount() {
    setTimeout(() => {
    // this.state.count = this.state.count + 1
    this.setState({
      count: this.state.count + 1,
    })
  }, 3000)
}

0으로 시작한 state 값이 3초 뒤 1로 변하게 되는 코드입니다.

state는 객체 데이터 형태로 제공이 됩니다. 

다른 방법으로는 constructor, super를 키워드를 사용하여 클래스의 확장 기능을 이용하여 작성하는 방법도 있습니다.

// state = {
//   count: 0,
// }
constructor(props) {
  super(props);

  //
  this.state = { count: 0 };
}

tate 값을 변하게 만들 때에는 아래의 코드처럼 setState를 호출하여 값이 바뀐 상태로 render 메소드가 자동으로 호출되고, 화면이 다시 그려집니다.

// this.state.count = this.state.count + 1
this.setState({
  count: this.state.count + 1,
})

객체를 전달하는 방법 외에 함수를 전달하는 방법도 있습니다.

항상 setState가 가장 최신의 state 값을 사용하도록 보장하도록 해보겠습니다.

객체를 전달하면 0에서 1이 추가되고 끝나지만, 함수를 사용하게 되면 0에서 1, 1에서 2, 2에서 3 이런 식으로 업데이트가 반영되도록 해줍니다.

this.setState((previousState)=>{
  const newState = { count: previousState.count + 1 }
  return newState
})

위와 같이 setState에 전달하는 함수를 updater라 부르며,

이를 통해 이전 state 값에 접근할 수 있습니다. 

setState 호출은 일괄적으로 처리되기 때문에 여러 업데이트 사항이 충돌 없이 차례대로 반영되도록 합니다.