3. 컴포넌트 안의 동적인 데이터, state

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 props 에 이어 컴포넌트에서 데이터를 처리하는 개념중 하나인 state 에 대해서 알아보도록 하겠습니다.

저번 포스팅에서 props 를 '정적인 데이터'라고 했습니다.

그 이유는 props 를 전달받아 사용하는 하위 컴포넌트에서 이 props 를 수정할 수 없기 때문이죠.

반면 state 는 컴포넌트 안에 존재하며, 수정할 수 있는 데이터입니다.

그리고 state 가 수정되면 컴포넌트는 다시 렌더링 됩니다. 

(다음 포스팅이 될 예정인 Component Lifecycle 에서 더 자세히 살펴보겠습니다. 지금 단계에서는 스테이트가 수정되면 다시 렌더링 된다는 점만 기억해주세요)

먼저 state 의 선언부터 알아보겠습니다.

코드와 함께 살펴보도록 하겠습니다.

프로젝트 폴더에서 ./src/components 에 Test_state.js 파일을 만들어 줍니다.

(./src/components/Test_state.js)

import React, { Component } from 'react';
 
class Test_state extends Component {
  render(){
    return(
      <div>
        <p>test state component</p>
      </div>
    )
  }
}
 
export default Test_state;

컴포넌트를 만들었습니다. 이제 state 를 만들어 봅시다.

state 는 클래스 안의 오브젝트입니다. 

state 를 선언하는 방식은 간단합니다.

클래스 안에서 말그대로 선언하면 끝입니다. 

(./src/components/Test_state.js)

import React, { Component } from 'react';
 
class Test_state extends Component {
  state = {
    name:'pro-self-studier'
  }
  render(){
    return(
      <div>
        <p>test state component</p>
        <p>{this.state.name}</p>
      </div>
    )
  }
}
 
export default Test_state;

코드의 4번째 줄에서 state 를 선언했습니다. 

*(constructor 를 사용하여 프롭스를 선언해도 되지만, 위의 방식처럼 state 를 선언해도 완전히 똑같이 동작합니다. constructor 는 클래스 안에 함수를 정의하면 정의한 함수의 this 를 바인딩하기 위해 사용하는데, this 바인딩을 하지 않고 ES6 의 arrow function 을 이용하면 함수의 this 와 class 의 this 가 같아지므로 constructor 를 사용하지 않아도 무방합니다.)

**(ES6 의 arrow function 에 익숙하지 않으신 분들은 아래의 링크를 참조해 주세요)

<ES6 arrow function>

state 를 사용하는 방법은 코드의 11번째 줄을 보면 알 수 있습니다. 

{ this.state.사용할 스테이트의 키 값 }

그럼 방금 만든 Test_state 컴포넌트를 Test_comp 컴포넌트 안에서 렌더링 해 봅시다.

Test_comp.js 파일을 다음과 같이 수정합니다.

(./src/components/Test_comp.js)

import React, { Component } from 'react';
 
import Test_props from './Test_props';
import Test_state from './Test_state';
 
class Test_comp extends Component {
  render(){
    let testText = 'test props...';
    let func_1 = () => {
      console.log('this is validation test function!');
    };
    return(
      <div>
        <h1>test component</h1>
        <Test_props valid={func_1}/>
        <Test_state />
      </div>
    )
  }
}
 
export default Test_comp;

코드의 4번째 줄에서 Test_state 컴포넌트를 임포트하고, 16번째 줄에서 사용했습니다.

브라우저를 통해 확인해 보니 state 가 잘 들어온 것을 알 수 있습니다.

이처럼 컴포넌트 안에 스테이트를 만드는 것은 컴포넌트 클래스 안에 state 를 정의하는 것입니다.

다음으로 스테이트의 변경에 대해서 알아보겠습니다.

state 는 컴포넌트에서 동적인 데이터를 처리하는 데 유리합니다.

처음에 정의한 state 를 setTimeout 메서드를 이용해 5초 뒤에 변경해 보겠습니다.

*setTimeout 메서드의 첫 번째 인자는 콜백함수, 두 번째 인자는 지연시간

(./src/components/Test_state.js)

import React, { Component } from 'react';
 
class Test_state extends Component {
  state = {
    name:'pro-self-studier'
  }
  componentDidMount(){
    setTimeout(()=>{
      this.setState({
        name:'changed state'
      })
    }, 5000)
  }
  render(){
    return(
      <div>
        <p>test state component</p>
        <p>{this.state.name}</p>
      </div>
    )
  }
}
 
export default Test_state;

코드의 7번째 줄에서 componentDidMount 메소드에 setTimeout을 이용해 스테이트를 변경하는코드를 추가했습니다.

(componentDidMount 는 다음 포스팅이 될 예정인 Component Lifcycle 포스팅에서 자세히 알아보도록 하겠습니다. 지금은 컴포넌트가 렌더링 완료된 상태에서 실행되는 메소드라고 생각하시면 됩니다.)

즉, Test_state 컴포넌트가 렌더링완료 되고 5초 후에 스테이트를 변경하겠다는 코드입니다.

스테이트를 변경할 때 주의 할 점은 state를 직접 수정( this.state={ ... } 와같이 직접수정 ) 하면 안된다는 점입니다.

state 를 수정할 때는 무조건 setState 메소드를 이용해 수정해야 합니다.

또 주의해야 할 점은 state가 변경되려면 초기값이 존재해야한다는 점 입니다.

(state의 선언을 의미)

(./src/components/Test_state.js)

import React, { Component } from 'react';
 
class Test_state extends Component {
  componentDidMount(){
    setTimeout(()=>{
      this.setState({
        name:'changed state',
        age:28
      })
    }, 5000)
  }
  render(){
    return(
      <div>
        <p>test state component</p>
        <p>{this.state.name}</p>
        <p>{this.state.age}</p>
      </div>
    )
  }
}
 
export default Test_state;
 

위의 코드는 state 를 선언하지 않은 코드입니다. 

state를 선언하지 않은 상태에서는 setState 메서드를 사용할 수 없습니다.

따라서 브라우저의 콘솔창에는 오류가 호출됩니다.

(위의 코드는 테스트만 해보고 원래의 코드로 되돌려주세요)

여기까지 컴포넌트에서 동적인 데이터를 처리하는 방식인 state 에 대해서 알아보았습니다.

다음 포스팅에서는 Componenet Lifecycle 에 대해 알아보도록 하겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

https://velopert.com/reactjs-tutorials

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)