5. state 관리

저번에 적은 글에서 나온 문제점인 props는 오직 읽기 전용으로 props의 값을 변경 할 수 없다는 것을 알 수 있습니다.

이를 해결하기 위해 state를 사용합니다.

react에서 state는 아주 중요한 개념입니다.

state를 사용하여 컴포넌트를 캡슐화(다른 소스에서 컴포넌트안의 state 변경 불가), spa(single page application) 등을 만드는데 사용합니다.

state의 값이 바뀌면 react에서 자동으로 페이지를 다시 렌더링하주게 됩니다.

이를 이용하여 spa를 구현합니다.

 

https://ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

react의 공식문서에는 state를 class로 관리하는 부분으로 보여줍니다.

하지만 state를 class로 관리하기에는 어려움이 있습니다.

 

https://ko.reactjs.org/docs/hooks-state.html

Using the State Hook – React

이를 해결하기 위해 hook이 등장하였습니다.

hook은 class로 관리할 state를 함수형 컴포넌트 안에서 간단히 관리하게 도와줍니다.

아래 예시를 봅시다.

class로 state를 관리하려면 (일단 this가 나오는 것부터...)  props로 constructor(구조체)를 꼭 호출하여야 한다는 공식문서 설명이 있습니다.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {      count: 0    };  }

 

클래스 컴포넌트는 count를 보여주기 위해 this.state.count를 사용합니다.

  <p>You clicked {this.state.count} times</p>

클래스 컴포넌트는 count를 갱신하기 위해 this.setState()를 호출합니다.

  <button onClick={() => this.setState({ count: this.state.count + 1 })}>    Click me
  </button>

 

반면, hook은 const[a,b]=useState(); 로 끝납니다.(여기서 const를 사용하여도 되고 let, var도 됩니다.)

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.  
  const [count, setCount] = useState(0);
  }

const[count,setCount]=useState(0);

count가 state이름, setCount가 state변경 함수 이름입니다.(꼭 state변경함수를 사용하여 변경해야 합니다.)(구조분해할당(Destructuring_assignment))

함수 컴포넌트는 count를 직접 사용할 수 있습니다.

  <p>You clicked {count} times</p>

함수 컴포넌트는 setCount와 count 변수를 가지고 있으므로 this를 호출하지 않아도 됩니다.

  <button onClick={() => setCount(count + 1)}>    Click me
  </button>

 

여기까지 hook을 이용한 state관리였습니다.