[React] props, state

*props

아래와 같이 Subject 라는 컴포넌트를 만들었다. 이제 Subject 라는 컴포넌트를 자유롭게 사용할 수 있을 것이다.

// 컴포넌트를 정의하고
class Subject extends Component {
  render(){
    return ( 
      <header> 
        <h1> WEB </h1>
        world wide web!
      </header>
    );
  }
}

// 요렇게 사용하면 됨
<Subject></Subject>

 

하지만 조금 더 욕심을 내볼 수 있다. Subject 내부의 내용이 꼭 'WEB' 이라던가 'world wide web!' 이라는 고정값을 가져야 할까? 사용할 때마다 동적으로 내용을 바꿔서 쓸 수 있다면 훨씬 효율적으로 이용할 수 있지 않을까?

HTML DOM에서는 '속성'을 사용해 태그에 개별적인 성격을 부여한다. 리액트DOM에서도 이와 유사한 방법을 이용해 컴포넌트 사용 시 개별성을 부여할 수 있다. 엘리먼트 내 중괄호를 이용해 사전 설정해놓은 후, 사용 시에는 마치 DOM '속성(Attribute)'을 활용하듯 원하는 내용을 넣어주었다. 리액트에서는 Attribute 가 아닌 props 이라는 용어를 사용한다. 

 

class Subject extends Component {
  render(){
    return ( 
      <header> 
        <h1> {this.props.title} </h1> 
        {this.props.sub}
      </header>
    );
  }
}

// 요렇게 사용하면 됨. 똑같은 컴포넌트를 '다르게' 사용할 수 있게 됨.
 <Subject title="Starbucks" sub="Grapefruit Honey Black Tea"></Subject>
 <Subject title="ATwoSomePlace" sub="CreamCaramel"></Subject>

 

props는 사용자가 컴포넌트에 전달해서 보관하길 원하는 데이터다. 컴포넌트 내에 데이터가 보관되면, 데이터는 수정될 수 없다. 말하자면 props는 읽기 전용인 것이다. 

*state
props는 기본적으로 부모에게서 물려받은 것이다. 물려받은 속성(props)은 내가 지니고 사용할 수는 있어도, 수정할 수는 없다. . 내가 내 상태(state)를 원하는 대로 수정하고 싶을 때 사용하는 것이 state 이다.

 

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      subject:{title:'McDonalds', sub:'BigMac'}
    }
  }
  render(){
    return (
      <div>
      // 상위 컴포넌트(App)의 상태(state)를 하위 컴포넌트(Subject)의 prop 으로 보내는 것이 가능
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}>
        </Subject>
      </div>
    )
  }
}

 

위 코드를 보면 super()를 통해 props 를 가져오는 것을 볼 수 있다. 내가 내 상태를 수정하기 위해서는 constructor 하단에 state 라는 것을 만들어 사용하면 된다. props와 달리 데이터를 '쓸 수' 있게 된 것이다. (*주의할 점은 state를 변경하고자 할 때는 재할당 방식이 아닌 항상 setState() 메소드를 사용해야 한다는 점이다. )

 

state 내 내가 원하는 내용을 넣으면, 하위클래스에서 이를 가져와 사용할 수 있다. 하위 클래스 입장에서는 내가 사용하는 것이 상위 클래스의 prop인지, state인지는 알 수도 없고 관심도 없다. 하위 클래스가 넘겨받은 정보는 모두 props가 되어 사용된다. 

리액트에서는 Props나 State 값이 바뀌면 Render() 가 다시 호출된다. 이에 따라 Render 함수 내의 하위 컴포넌트들에 있는 렌더함수들도 다시 호출된다. 

* Reference : 생활코딩 React (https://opentutorials.org/module/4058), Veloport blog(https://velopert.com/3629), 리액트 공식페이지(https://reactjs.org/), fe-note(https://trustyoo86.github.io/react/2017/11/18/props-state-react.html)