[ React ] state 사용해서 데이터를 전달하기 (props와 state의 차이점)

저번 포스팅에서는 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 props를 사용했습니다. 

 

여기서 주목할 점은 props는 오직 읽기만 가능한 값이라는 것입니다. 

 

React 공식 document에서는 두개의 코드를 예로들어 설명하고 있습니다. 

 

값의 변경없이 읽기로만 사용되는 경우

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

함수가 실행되더라도 a와 b의 값에는 영향이 없습니다. 

 

값의 변경이 있는 경우 

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

함수가 실행되면 account.total의 값이 변경이 됩니다. 

 

props는 위의 두가지의 경우에서 전자에 해당하는 경우에만 사용할 수 있다는 것입니다. 

하지만, 개발하는데 있어서 후자로 설계하는 함수가 더 많을 것 입니다. 

 

그럴 경우에 사용되는 것이 바로 state입니다. 

 

결국 props와 state의 차이점은 ?? 

props

외부에 값을 보여주기 위해 사용되어 읽기만 가능한 값

state

컴포넌트 내부에서 사용되어 바깥으로 노출될 필요도 없고, 노출되서도 안되는 값들을 다루는 경우

 

---

state의 사용방법

state를 사용하기 위해서는 기존에 함수형이었던 컴포넌트를 class형으로 변경해야 합니다. 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      header: {title: 'WEB', subject: 'World Wide Web'}
    };
  }

  render() {
    return (
      <div>
        <Header title={this.state.header.title} subject={this.state.header.subject} />
      </div>
    );
  }
}

그리고 처음에 constructor (생성자)를 이용해서 props를 초기화 하는 과정이 필요합니다. 

객체지향에 대한 지식이 조금 필요하지만, 그냥 이런식으로 문법처럼 사용한다는 정도만 알고있어도 괜찮습니다. 

 

props를 초기화하는 이유를 설명하기 위해서, 우선 초기화하지 않는 경우에는 어떻게 되는가를 생각해보면 

클래스 내부에서 this.props를 사용할 수 없는 것입니다. 

그러면, this.props를 사용하는 경우에만 props를 초기화해야 하는가?? 하면, 그것도 또 아닙니다. 사용하지 않는 경우에도 초기화하는 것이 좋다고 합니다. 

 

props를 초기화하는 이유에 대한 참고사이트 

https://min9nim.github.io/2018/12/super-props/

 

 

this.state = {
  header: {title: 'WEB', subject: 'World Wide Web'}
};

state를 위와같이 선언을 했습니다. 

<div>
  <Header title={this.state.header.title} subject={this.state.header.subject} />
</div>

그리고, 이 state값을 위와같이 접근하여 사용하고 있습니다. 

 

그러면, props를 사용할 경우와 똑같이 브라우저에 출력되는 것을 확인할 수 있습니다. 

 

---

여기서 가장 중요했던 것은 

props와 state와의 차이점입니다. 

 

props는 데이터를 읽기 전용으로만 사용된다는 점, 데이터를 변경하는 작업을 하고 싶다. 굳이 외부에 노출시키고 싶지 않은 경우에는 state를 사용한다.