State vs Props

 

리액트에서 컴포넌트의 상태를 관리하는 방법은 크게 2가지다.

하나는 변경할 수 있는 상태를 다루는 것이고 → state

하나는 변경할 수 없는 상태를 다루는 것이다 → props

 

props와 state의 구분하기 전에 공통점부터 알아보자면

• props와 state는 Javascript의 일반 객체이다.
• props와 state는 화면의 렌더링을 발생시킨다.

Props(Properties)

Props의 가장 큰 특징은, 부모 컴포넌트로부터 내려오는 상태라는 것이다. 따라서 props는 읽기 전용(read-only)이고, 이 특성을 위해서 리액트는 자바스크립트의 Object.freeze() 메서드를 사용하여 props를 읽기 전용 데이터로 만든다.

 

특정 상황에서는 props가 부모 컴포넌트로부터 안 내려오면, props의 기본 값을 설정해줄 수도 있는데 이것이 바로 defaultProps이다. defaultProps는 정의해놓은 props가 부모 컴포넌트로부터 아예 내려오지 않았을 때, 미리 정의해놓은 값을 props에 할당한다.

 

const Card = ({ cardOwner }) => (
  <>
    <div>카드 소유자 이름(선택)</div>
    <div>{cardOwner}</div>
  </>
);

Card.defaultProps = {
    cardOwner: 'NAME',
};

export default Card;

State

state는 컴포넌트가 스스로 만들어낸 데이터이다. 읽기 전용의 데이터인 props와 다르게 state는 컴포넌트 내에서 생성할 수도, 수정할 수도 있다.

state의 가장 큰 특징은 state를 변경할 때에 직접 변경하는 것이 아닌 setState() 메소드를 통해서만 변경하여야 한다는 것입니다.

setState()?

setState()는 상태를 변경시켜주는 리액트 함수이다. 리액트는 setState() 메소드가 실행되어야만, 변경된 데이터를 가지고 컴포넌트가 리렌더링이 되도록 설계되어 있기 때문에 setState를 통해서만 state를 변경해야 한다. 이때 상태는 immutable 하게 관리해야 한다.

       

리액트에서 상태를 immutable하게 관리하는 이유 https://hjuu.tistory.com/19

Immutable이란?

 

출처

https://velopert.com/3629

https://ooeunz.tistory.com/135