[React] state 와 props

state 와 props란 ? 

 

 

리액트는 모든 뷰의 단위가 컴포넌트라고 하였다. 각 컴포넌트는 상위 컴포넌트에서 하위 컴포넌트를 import 하여 연결 되어 있는 구조인데 import 되어 있는 하위컴포넌트에게 상위컴포넌트가 값을 전달 하여 하위컴포넌트에서 사용 할 수 있다. 이것이 바로 props이다. 그리고 각 컴포넌트는 스스로 state라는 값을 가질 수 있는데 이는 개별적인 컴포넌트에서 각기 다르게 상태를 가질 수 있다. 

 

state란 ? 

state는 각 컴포넌트가 가지고 있는 개별적인 상태값이다. 클래스형 컴포넌트를 작성할때는 해당 클래스 내부 맨 위쪽에 작성하는 것이 일반적이며 state는 객체이다. 

import React, { Component } from 'react'

export default class Count extends Component {
    state = {
        number : 0
    }
    render() {
        return (
            <div style={{backgroundColor : "blue",width : "100px", height : "100px", borderRadius : "100px", textAlign : "center", lineHeight :"100px"}}>
                {this.state.number}
            </div>
        )
    }
}

 

count클래스에서 현재 상태는 number : 0; 이고 render의 return 에서 {this.state.number}로 해당 state의 number값을 사용하고 있다. 

 

 

해당 컴포넌트를 클릭하면 state의 값을 변하게 클래스 내부에 메서드를 추가하고 div에 onClick Event를 추가하겠다.

 

 onClick = e => {
        this.state.number = this.state.number +1
    }

 

이렇게 작성하니 다음과 같이 경고가 뜬다. 

 

 

state를 바로 변이 시키지말고 setState라는 메서드를 사용하라고 경고를 하는데 일단은 이유는 잠시 미루고 setState사용방법을 알아보자 

 

 

vscode로 찍어보니 메서드의 첫번째 인자로 state자체가 들어가는 것을 알 수 있다. 그렇다면 스테이트 자체를 던져서 기존에 있던 값들에 1씩 증가시키게 해보자

 

onClick = e => {
        this.setState({
            number : this.state.number +1
        })
    }

 

클릭시 state값 변경

 

// number : this.state.number++은 안된다. ++은 해당 값을 직접 바꾸는 행위이다. 

 

이제 누를때 마다 해당 값이 바뀌는 모습을 볼 수 있다. 아까 분명 state는 각 컴포넌트끼리 공유하는 값이 아닌 컴포넌트 스스로 가지고 있는 값이라고 했으니 같은 컴포넌트를 2번 call해서 값이 어떻게 변하는지 알아보자 .

 

export default class App extends Component {
  render() {
    return (
      <div>
        <Count></Count>
        <Count></Count>
      </div>
    )
  }
}

 

이 state라는 값을 공유하는 값들이 아닌 개별적인 컴포넌트가 가지고 있는 값임을 확인했다. 

 

props 부모 컴포넌트가 하위 컴포넌트에게 주는 값 

props는 부모 컴포넌트가 하위 컴포넌트에게 주는 값이다. 이 props는 사용하는 것은 가능하나 이 props 자체를 하위 컴포넌트가 변경 시키는 행위는 할 수 없다. 

 

 

현재 예제의 컴포넌트의 상태는 다음과 같다. 그리고 count 컴포넌트가 둘다 퍼런색인것이 마음에 안드니 부모컴포넌트에서 하위컴포넌트에게 색상을 전달 해주어 count 컴포넌트에서 사용할 수 있도록 해보겠다. 

 

<div>
   <Count color={"black"}></Count>
   <Count color={"coral"}></Count>
</div>

 

props를 전달 할때는 상위컴포넌트에서 하위 컴포넌트를 호출 할때 해당 컴포넌트에 // <ComponentName propsName={value}> 형태로 작성한다. 

 

여기까지 한 후 해당 props가 state에 잘 전달 되었는지 count에서 console.log를 찍어보자

render() {
        console.log(this.props)
        return (
            <div onClick={this.onClick} style={{color : "white", cursor : "pointer", backgroundColor : "blue",width : "100px", height : "100px", borderRadius : "100px", textAlign : "center", lineHeight :"100px", margin:"15px"}}>
                {this.state.number}
            </div>
        )
    }

 

각기 다른 컴포넌트에 다른 값들이 온 것을 확인 할 수 있다. 그렇다면 이를 활용해서 div style에 적용시켜보도록 하겠다. 

 

            <div onClick={this.onClick} style={{cursor : "pointer", backgroundColor : `${this.props.color}`,width : "100px", height : "100px", borderRadius : "100px", textAlign : "center", lineHeight :"100px", margin:"15px"}}>

 

style의  value 는 문자열을 취급하니까 자바스크립트 코드를 문자열로 변환시킬 ` 백틱기호를 사용하였다. 

 

 

해당 props에 따라 component의 배경화면이 변하는 것을 볼 수 있다. 

 

정리하며 

state와 props는 react에서 매우 중요한 개념이며 컴포넌트를 컨트롤 하는데 필요한 중요한 개념이다. 그러니 꼭 여러방면으로 만져서 내것으로 만지도록 하자 . 

 

참고자료

https://velopert.com/3629

누구든지 하는 리액트 4편: props 와 state | VELOPERT.LOG

http://www.yes24.com/Product/goods/62597469

리액트를 다루는 기술