함께 성장하는 프로독학러
3. 컴포넌트 안의 동적인 데이터, state 본문
안녕하세요, 프로독학러 입니다.
이번 포스팅에서는 props 에 이어 컴포넌트에서 데이터를 처리하는 개념중 하나인 state 에 대해서 알아보도록 하겠습니다.
저번 포스팅에서 props 를 '정적인 데이터'라고 했습니다.
그 이유는 props 를 전달받아 사용하는 하위 컴포넌트에서 이 props 를 수정할 수 없기 때문이죠.
반면 state 는 컴포넌트 안에 존재하며, 수정할 수 있는 데이터입니다.
그리고 state 가 수정되면 컴포넌트는 다시 렌더링 됩니다.
(다음 포스팅이 될 예정인 Component Lifecycle 에서 더 자세히 살펴보겠습니다. 지금 단계에서는 스테이트가 수정되면 다시 렌더링 된다는 점만 기억해주세요)
먼저 state 의 선언부터 알아보겠습니다.
코드와 함께 살펴보도록 하겠습니다.
프로젝트 폴더에서 ./src/components 에 Test_state.js 파일을 만들어 줍니다.
(./src/components/Test_state.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 | import React, { Component } from 'react'; class Test_state extends Component { render(){ return( <div> <p>test state component</p> </div> ) } } export default Test_state; | cs |
컴포넌트를 만들었습니다. 이제 state 를 만들어 봅시다.
state 는 클래스 안의 오브젝트입니다.
state 를 선언하는 방식은 간단합니다.
클래스 안에서 말그대로 선언하면 끝입니다.
(./src/components/Test_state.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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; | cs |
코드의 4번째 줄에서 state 를 선언했습니다.
*(constructor 를 사용하여 프롭스를 선언해도 되지만, 위의 방식처럼 state 를 선언해도 완전히 똑같이 동작합니다. constructor 는 클래스 안에 함수를 정의하면 정의한 함수의 this 를 바인딩하기 위해 사용하는데, this 바인딩을 하지 않고 ES6 의 arrow function 을 이용하면 함수의 this 와 class 의 this 가 같아지므로 constructor 를 사용하지 않아도 무방합니다.)
**(ES6 의 arrow function 에 익숙하지 않으신 분들은 아래의 링크를 참조해 주세요)
state 를 사용하는 방법은 코드의 11번째 줄을 보면 알 수 있습니다.
{ this.state.사용할 스테이트의 키 값 }
그럼 방금 만든 Test_state 컴포넌트를 Test_comp 컴포넌트 안에서 렌더링 해 봅시다.
Test_comp.js 파일을 다음과 같이 수정합니다.
(./src/components/Test_comp.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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; | cs |
코드의 4번째 줄에서 Test_state 컴포넌트를 임포트하고, 16번째 줄에서 사용했습니다.
브라우저를 통해 확인해 보니 state 가 잘 들어온 것을 알 수 있습니다.
이처럼 컴포넌트 안에 스테이트를 만드는 것은 컴포넌트 클래스 안에 state 를 정의하는 것입니다.
다음으로 스테이트의 변경에 대해서 알아보겠습니다.
state 는 컴포넌트에서 동적인 데이터를 처리하는 데 유리합니다.
처음에 정의한 state 를 setTimeout 메서드를 이용해 5초 뒤에 변경해 보겠습니다.
*setTimeout 메서드의 첫 번째 인자는 콜백함수, 두 번째 인자는 지연시간
(./src/components/Test_state.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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; | cs |
코드의 7번째 줄에서 componentDidMount 메소드에 setTimeout을 이용해 스테이트를 변경하는코드를 추가했습니다.
(componentDidMount 는 다음 포스팅이 될 예정인 Component Lifcycle 포스팅에서 자세히 알아보도록 하겠습니다. 지금은 컴포넌트가 렌더링 완료된 상태에서 실행되는 메소드라고 생각하시면 됩니다.)
즉, Test_state 컴포넌트가 렌더링완료 되고 5초 후에 스테이트를 변경하겠다는 코드입니다.
스테이트를 변경할 때 주의 할 점은 state를 직접 수정( this.state={ ... } 와같이 직접수정 ) 하면 안된다는 점입니다.
state 를 수정할 때는 무조건 setState 메소드를 이용해 수정해야 합니다.
또 주의해야 할 점은 state가 변경되려면 초기값이 존재해야한다는 점 입니다.
(state의 선언을 의미)
(./src/components/Test_state.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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; | cs |
위의 코드는 state 를 선언하지 않은 코드입니다.
state를 선언하지 않은 상태에서는 setState 메서드를 사용할 수 없습니다.
따라서 브라우저의 콘솔창에는 오류가 호출됩니다.
(위의 코드는 테스트만 해보고 원래의 코드로 되돌려주세요)
여기까지 컴포넌트에서 동적인 데이터를 처리하는 방식인 state 에 대해서 알아보았습니다.
다음 포스팅에서는 Componenet Lifecycle 에 대해 알아보도록 하겠습니다.
감사합니다.
**참고 자료 (항상 감사드립니다)
https://velopert.com/reactjs-tutorials
*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)
'Programming > react.js' 카테고리의 다른 글
5-1. 전화번호부 어플리케이션 만들기 - 구상, Contact 검색 기능 구현 (0) | 2018.04.19 |
---|---|
4. 리액트가 내부적으로 작동하는 순서, Component Lifecycle (1) | 2018.04.19 |
2. 하위 컴포넌트로 값을 전달하는, props (0) | 2018.04.18 |
1. React Component, JSX (0) | 2018.04.17 |
0. 리액트 환경 설정하기 (React js, nodejs, webpack 4, babel) (12) | 2018.04.06 |