props vs. state 2 (그리고 this)

전 포스팅에 조금 설명이 부족한 부분이 있어서 한번 더 말해보겠습니다..

props state this

State는 private 하다.

state는 private 합니다. state를 변경할 수 있는 건 오직 자기 자신의 Component 뿐입니다.

그렇다면 일반적으로 쓰이는 setState를 props로 자식에게 넘겨주어 부모 state를 변경하는 건 어떻게 받아들여야 될까요?

	props	state
부모 Component에 의해 변경되는가?	O	X
그 Component 안에서 변경되는가?	X	O
자식 Component 안에서 변경되는가?	O	X

다음 표와 같이 state는 자식 Component안에서 변경이 되지 않는다고 하였는데,

setState로 부모 Component의 state를 변경하는 경우는 어떻게 설명할까요?

 

그것은 일종의 context로 설명할 수 있습니다.

setState를 props로 넘겨받을 때, "this"를 출력해봅시다. this가 자식 component가 아닌 부모 component일 것입니다.

 

setState를 props로 넘겨줄 때, 그 setState의 코드를 복사해서 넘겨주는 것(call by value)이 아니고,

그 setState의 시작 주소를 넘겨주는 것(call by reference)입니다.

일종의 함수 포인터라고 할 수 있습니다.

화살표 함수로 setState를 감싸고 넘겨주어도 결과는 같습니다.

 

다음은 예시 코드입니다.

import React from "react"

class Child extends React.Component {
 constructor(props){
   super(props)
   console.log("child this is ",this)
 }
 componentDidMount(){
   this.props.handleName("k c s")
 }
 render(){
  return <p>{this.props.name}</p>
 }
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.handleName = this.handleName.bind(this)
    this.state = { name: "h g d" }
    console.log("parent this is ", this)
  }

  handleName = (name) => {
    console.log("when setState is", this)
    this.setState({name:name})
  }
  render() {
    return <Child name={this.state.name} handleName={this.handleName} />
  }
}

export default App

 

다음의 실행 콘솔 화면입니다.

setState

보면 setState가 실행될 때의 this가 App인 것을 확인할 수 있습니다.

즉, 그 실행 context가 state의 주인인 자기 자신인 것이죠.

이 때문에, state는 private 하고, 자기 자신만이 변경 가능하다고 하는 것입니다.

 

참고로, hook에 서 실행하면 다음과 같이 나옵니다.

hooks

hooks에서는 this는 모두 undefined일 뿐이죠.

hooks를 사용하면 어느 정도 this에게서 벗어날 수 있습니다.

props와 state를 구분하는 질문들

1. 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
2. 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
3. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

이런 구분을 왜 짓는 건가요?

데이터가 바뀌는 것을 최소화하여 최적화된 React 애플리케이션을 만들기 위해서입니다.

리액트의 lifecycle은 오직 state에 관한 것이기 때문에, 적절하게 props와 state를 구분하면 리 렌더링 되는 횟수를 줄여 최적화할 수 있습니다.

정말 필요할 때만, state를 쓰는 것입니다. 또, props만 사용한다면, 단방향 데이터 흐름을 만들 수 있습니다. 단방향 데이터 흐름을 만들면 다음과 같은 이점이 있습니다.

... 모든 것을 모듈화하고 빠르게 만들어줍니다.
-react로 사고하기-

 

참고한 사이트:

컴포넌트 State – React