React - props와 state 차이

Props

 
props는 읽기 전용
 
함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트 자체 props를 수정해서는 안됩니다.
 
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.
 
 
순수 함수

 

• 동일한 입력값에 대해 항상 동일한 결과를 반환하는 함수
• 외부 상태를 변경하거나 영향을 받지 않는 함수

 
 
한마디로, 부수효과가 없고 같은 입력에 대해 같은 출력을 반환하는 함수입니다.
 
 
부수효과 ( side effect )
 

• 함수 외부 변수 혹은 상태값 변경
• 함수로 들어온 인자값 변경
• console.log
• XHR/fetch call

 
 
예로
 

function sum(a, b) {
    return a + b;
}

 
위의 sum 함수는 순수 함수입니다.
 
 
 
반면에 다음 함수는 자신의 입력값을 변경하기 때문에 순수 함수가 아닙니다.
 

function withdraw(account, amount) {
    account.total -= amount;
}

 
 
 
그렇다면 React 컴포넌트 내부에서 변경되는 데이터는 어디에 저장할까요? 
 
-> State
 

 

State

 

State는 컴포넌트 내부에서 변경되는 데이터를 저장하기 위해 사용됩니다.
 
State값이 변경되면 내부적으로 render() 함수가 호출되어 컴포넌트가 다시 렌더링됩니다.
 

 

 

State 이용 시 주의할 점

 

1. 직접 State 수정하지 말것
2. State 업데이트는 비동기적
3. State 엡데이트는 병합됨

 

 

1. 직접 State 수정하지 말 것

 

setState를 이용하세요

 
 
state를 직접 수정하면 shallow compare이 꼬이게됩니다.
 
state의 업데이트는 이전 state와 새로운 state를  얕은 비교(shallow compare) 후 다른 점을 병합하는 방식으로 이루어집니다.
 
this 키워드를 통해 state값을 직접 수정하면 이전 state값의 불변성(immutability)이 훼손되어 이전 state와 현재 주어진 state간의 차이를 파악할 수가 없게되어 React 생명 주기 싸이클이 꼬이게되고 render 함수가 호출되지 않거나, 버그가 생기거나 앱이 죽어버릴 수 도 있습니다.
 
 
예로, 아래 코드처럼 state를 직접 수정하지 않습니다.
 

this.state.comment = "Hello";

 
 
this.state 대신 setState를 사용해야합니다.
 

this.setState({comment: "Hello"});

 

 

2. State 업데이트는 비동기적일 수 있음

 

React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한꺼번에 처리할 수 있습니다. this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state값을 계산할 때 위 두 값에 의존해서는 안됩니다.
 
 
예로, 다음 카운터 코드는 업데이트에 실패할 수 있습니다.
 

this.setState({
    counter: this.state.counter + this.props.increment,
});

 
 
위 문제는 다른 형태의 setState로 해결합니다.
 

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

 
 
첫 번째 인자는 이전 state값이고, 두 번째 인자는 업데이트가 적용된 시점의 props입니다.
 
 

3. State 업데이트는 병합됩니다.

 

setState()를 호출할 때 React는 제공한 객체를 현재 state로 병합합니다. 예로, state는 다양한 독립적인 변수를 포함할 수 있습니다. 
 

constructor(props) {
  super(props);
  this.state = {
    posts: [],
    comments: []
  };
}

 
별도의 setState() 호출로 이러한 변수를 독립적으로 업데이트할 수 있습니다
 

componentDidMount() {
  fetchPosts().then(response => {
    this.setState({
      posts: response.posts
    });
  });
 
  fetchComments().then(response => {
    this.setState({
      comments: response.comments
    });
  });
}

병합은 얕게 이루어지기 때문에, this.setState({comments})는 this.state.posts에 영향을 주진 않지만 this.state.comments는 완전히 대체됩니다.
 
 
 

결론

 

 
State는 컴포넌트 내부에서 생성되고 값를 변경할 수 있지만
 
Props는 부모 컴포넌트에서 상속받는 데이터로, 읽기 전용이다(변경 불가)
 
 
 
출처 
https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

https://ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React