Study/React

Don't Update props

더 멋진 세상을 꿈꾸는 개발자 2020. 6. 1. 21:10

잘했다! 

여러분은 stateful한 컴포넌트에서 stateless component로 정보를 전달했습니다. 

여러분은 이것으로 많은 것을 할것입니다. 

 

여러분은 this.setState()를 호출함으로써 state를 변화시킬 수 있다는 것을 배웠습니다. 

당신은 궁금해할 수 도 있어요 : 그렇다면, porps도 컴포넌트가 변화시킬 수 있는거 아냐?

 

대답은 : 아닙니다!!

 

 

컴포넌트는 this.props를 절대 업데이트 할 수 없습니다. 

 

절대 해서는 안되는 나쁜 예를 봅시다. 

import React from 'react';

class Bad extends React.Component {
  render() {
    this.props.message = 'yo'; // NOOOOOOOOOOOOOO!!!
    return <h1>{this.props.message}</h1>;
  }
}

 

 

이것은 좀 혼란을 가져다 줍니다. 

props와 state는 동적인 정보를 저장합니다.

정의에 의하면, 동적인 정보는 변할 수 있습니다.

 

만약 컴포넌트가 props를 변화시킬 수 없다면, props는 무엇인가?

 

리엑트 컴포넌트는 변할 수 있는 정보를 저장하기 위해 반드시 props를 사용해야만한다. 

그러나 그것은 오직 다른 컴포넌트에 의해 변화될 수 있는 정보이다.

 

리엑트 컴포넌트는 컴포넌트 자체에서 스스로 변화할 수 있는 정보(setState처럼)

를 저장하기 위해서는 state를 사용해야한다. 

 

 

헷갈린다면, 앞으로 나올 예제들을 살펴보며 해결해보자.

 

출처 : 코드카데미 리엑트 2.