Props와 State

State 와 Props는 React Component 에서 빠질 수 없는 기본적이면서 중요한 개념이다.
이 두 가지 개념을 이용하여 부모 컴포넌트와 자식 컴포넌트 간 데이터를 전달 하고 컴포넌트의 데이터를 변화 시킨다.

Props

Props 는 properties 의 줄임말로 Props는 Component 로 데이터를 전달 합니다. 

function MoviePoster (posterUrl) {
	<img src={posterUrl}/>
	<h6>{posterUrl}</h6>
}

function App() {
	<div>
		<MoviePoster posterUrl={image_url} title="title"/>
		<h1>Hello movies!</h1>
		<h6>title</h6>
	</div>
}

 

위 코드와 같이 Props는 데이터를 컴포넌트 간에 전달한다.
여기서 주의 할 점은 Props는 예전에 setProps와 replaceProps로 변경이 가능 했지만 지금은 지원을 하지 않습니다. Props는 단지 데이터를 전달 하기 위해 쓰일 뿐 데이터를 변경 하지는 않습니다 즉, Props가 입력 되면 항상 동일한 출력으로 렌더링 되어야 합니다.

 

State

State는 데이터를 유지하고 저장한다. 데이터를 유지한다라는 측면에서 보면 Props와 같아 보이지만, State는 컴포넌트 내에서 생성하고 사용한다. 그리고 데이터를 변경 할 수 있다. 아래 코드는 클릭을 하면  클릭 수를 카운터하는 코드입니다.

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

 

위 코드를 보면 알 수 있듯 state는 컴포넌트 내에 state = {}와 같이 초기화 할 수 있으며, 중간에 setState()를  사용 하여 업데이트 할 수 있습니다. 참고로 this 키워드는 this가 어디에 위치하느냐에 따라 가르키는게 달라지는데 지금 코드상에서는 현재 컴포넌트를 가르키고 있다. 

State 생성

  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

 State를 변경 할 수도 있다.

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

클릭이 되면 updateCount()가 호출 되고 setState() 를 통해 state가 업데이트 된다. 그리고 state가 업데이트 되면,

 render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }

render()가 실행 되면서 다시 렌더링 된다. State가 변화가 일어나면 항상 자동으로 실행되면서 다시 렌더링 된다. 그런데 여기서 두 가지 주의 할 점이 있다.

1. 코드를 보시서 this.state.count = this.state.count + 1; 이렇게 "state를 직접 변경하면 되는거 아니야?" 라고 생각 하실 수 있다. 하지만 이렇게 하게 되면 React는 state의 변화를 감지 하지 못하게 되어 다시 렌더링 하지 않는다. 그렇게 되면 state가 변경 되었다하더라도 화면상으로는 값이 변경 되지 않게 된다.

// DO NOT USE
this.setState({
    count: this.state.count + 1
});

2. 위 코드는 문제가 없는 코드라 느끼실 수 있겠지만 이는 setState()의 비동기 성질을 고려 하지 않았으며, 동기화 되지 않은 상태의 데이터를 사용 할 수 있기 때문에 오류를 발생 시킬 수 있다. 

 

추가적으로 React는 Component를 꼭 Class로 만들어야 하는 것은 아니다. Function 을 이용해서도 Component를 만들 수 있다.

 

https://lucybain.com/blog/2016/react-state-vs-pros/