[React 기초] State 란?

State

 

 

state는 값을 변수에 할당해서 값을 넣는 방식을 관리하는 것이다.

 

소스를 통해 한번 확인해보자

ex)

class App extends Component{

  state = {
    sampleText : 'Hello World'
  }

  render(){
    return(
      <View>
        <Text>{this.state.sampleText}</Text>
      </View>
    )
  }
}

 

위처럼 state라는 state에 sampleText라는 변수를 만들면 render()안에서

{this.state.sampleText} 를 통해서 해당 변수를 호출이 가능하다.

 

위에서 state는 state 변수명이므로 내가 아무렇게나 설정이 가능하다

sta = {} 이렇게도 설정이 가능한것이다.

다만 사용할때는 변수명에 맞게 this뒤에 붙여야 된다.

(state안에 있는 변수명 내가 원하는대로 설정 가능하고  마찬가지이다.)

그리고 state를 사용할땐 render함수 바깥에서 정의해야한다

 

※State는 class에서만 사용이 가능하고 function에서는 사용이 불가능하다.

(하지만 최근에 업데이트된 ES6 에서는 Hook이란걸 통해서 function에서도 state를 사용할수 있다)

 

자그럼 다른 소스로 state에 설명을 보강해보자.

ex)

class App extends Component{

  state = {
    sampleText : 'Hello World',
    sampleBoolean : false
  }

  inputState = () =>(
    this.state.sampleBoolean
    ?
    <Text>samplBoolean은 true이다.</Text>
    :
    <Text>samplBoolean은 false이다.</Text>
  )

  render(){
    return(
      <View>
        {this.inputState()}
      </View>
    )
  }
}

위소스를 설명하자면 this.inputState() 라는 함수를 호출했고
해당 함수에선 this.state.sampleBoolean 의 값에 대한 삼항 연산자를 만들었다.
이렇게 다른 함수 내에서도 state에 있는 변수에 대한 접근이 가능하다.

 

하지만 우리가 알아야 할것은 state를 다른 곳에서 가져다 쓸수는있지만 

다른 곳에서 state안의 변수값을 수정하는것은 setState를 통해서 하는 방법 말고는 직접 변경하지 못한다.

왜냐하면 화면을 다시 render할떄 변경된값을 반영하지 못하기 때문이다. 

그래서 state안의 값들은 쉽게 변경되지 못하게 하기 위해서 있는 기능이라고 보면 된다.

자 그럼 특정 이벤트를 하게 되면 state가 바뀌는 예제를 통해서 setState를 이해를 해보자.

 

ex)

class App extends Component{

  state = {
    sampleText : 'Hello World',
    sampleBoolean : false
  }

  changeState = () => {
    if(!this.state.sampleBoolean){
      this.setState({
        sampleText:'Text Changed!!!',
        sampleBoolean: true
      })      
    }else{
      this.setState({
        sampleText:'Hello World',
        sampleBoolean: false
      })  
    }

  }

  render(){
    return(
      <View>
        <Text onPress={this.changeState}>{this.state.sampleText}</Text>
      </View>
    )
  }
}

이처럼 state의 값을 바꾸기 위해선 setState({})를 사용해야 한다.

setState()는 비동기성이다. 
즉 바뀐다고 바로 바뀌지 않는다는 뜻이다.
이렇게 하는 이유는 state의 값을 쉽게 바꾸지 않기 위해서이다.

 

그래서 setState를 통해서 state의 값을 변경할때에는 
현재의 값을 copy해서 copy한 값으로 변경을 해주어야 한다.

무슨말인지 예제를 통해서 보자.
나는 text를 누르면 samplNum의 값을 1씩 증가하는걸 만들어보려고 한다.

 

ex)

class App extends Component{

  state = {
    sampleText : 'Hello World',
    sampleBoolean : false,
    sampleNum : 1
  }

  onAdd = () => {
    this.setState({
      sampleNum : sampleNum + 1
    })
  }

  render(){
    return(
      <View>
        <Text onPress={this.onAdd}>{this.state.sampleNum}</Text>
      </View>
    )
  }
}

위 소스를 보면 소스상으로 문제되는것은 없지만 
에러가 난다.

그렇담 onAdd() 부분은 아래와 같이 수정하니

 

  onAdd = () => {
    this.setState({
      //sampleNum : sampleNum + 1
      sampleNum : 100
    })
  }

멀쩡하게 1에서 100으로 변경이 된다.
즉 저 바뀌는 부분에서 문제가 생긴건데 
저 부분에서 비동기성이 적용되 값이 바로 업데이트가 되지 않아서 생기는 결과이다.

 

하지만 우리는 sampleNum의 값이 1씩 증가하는걸 만들고 싶지 갑자기 100으로 되는걸 만들어보려고 한것이다.

그러기 위해서 우리는 copy값을 활용해서 위의 문제를 해결해야 한다.

 

prevState라는 현재 버전의 state값을 가지는 걸 setState의 첫번째 인자로 넣으면 된다.

 

ex)

class App extends Component{

  state = {
    sampleText : 'Hello World',
    sampleBoolean : false,
    sampleNum : 1
  }

  onAdd = () => {
    this.setState(prevState =>{
      return{
        sampleNum : prevState.sampleNum + 1
      }
    })
  }

  render(){
    return(
      <View>
        <Text onPress={this.onAdd}>{this.state.sampleNum}</Text>
      </View>
    )
  }
}

위처럼 prevState라는 복사본을 만들어서 해당 복사본의
sampleNum을 가져와서 +1 시켜주고 해당 값을
sampleNum에 설정하는것이다.

위의 prevState(복사본)의 이름은 우리가 지정하기 나름이다.

 

※소스를 작성할때 주의점※
{}는 안에rreturn 문이 있을때 사용하는것이고

()는 안에 보여질 내용자체가 return되는것일때 사용하면 된다.