State란?

• 컴포넌트 내부에서 관리하는 변경 가능한 데이터이다.
• state를 변경하려면 setState() 함수를 사용해야 한다.
• state가 변경될 때마다 브라우저가 다시 렌더링 된다.

함수형 컴포넌트에서 State 사용

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

State Hook

Hook이란?

Hook은 React 16.8에 새로 추가된 기능입니다. 
Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.

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

state 변수 선언

import {useState} from 'react';

// const [state변수명, state변경함수명] = useState(초기값);
const [state, setState] = useState(initialState);

• {useState}를 react에서 import해준다.
• 여러 state 변수 선언도 가능하다.
• 초기값을 설정하고 싶다면 useState에 인자(initialState)로 넘겨준다.
  

state 데이터 사용

// 함수 내에서는 state변수명으로 접근
state

// jsx에서는 {state변수명}으로 접근
{state}

• state에 직접 접근해서 사용할 수 있다.
  
• jsx에서 중괄호로 감싸서 state에 접근한다.
  

state 데이터 변경

// setState(변경할값 또는 함수)
setState(value);

• setState() 함수를 호출하고 변경하려는 값이나 함수를 인자로 넘겨준다.
  

클래스형 컴포넌트에서 State 사용

생성자(constructor)에서 state 선언

constructor(props) {
	super(props);

  this.state = {
    // state변수명: 초기값
		myState: initialState
  }
}

• constructor 내부에서 this.state에 원하는 state 할당
  

생성자(constructor) 외부에서 state 선언

state = {
  // state변수명: 초기값
	myState: initialState
}

• state 객체 안에 원하는 state 할당
  

state 데이터 사용

// 함수 내에서는 this.state.state변수명으로 접근
this.state.myState

// jsx에서는 {this.state.state변수명}으로 접근
{this.state.myState}

• this.state.state변수명으로 해당 state에 접근할 수 있다.
  

state 데이터 변경

// this.setState({state변수명: 변경할데이터})
this.setState({ myState: newMyState });

• this.setState() 함수를 호출하고 변경할 state 객체를 인자로 넘겨준다.
  

state 변경시 주의사항

• state를 변경할 때는 반드시 직접 변경하지 않고 setState() 함수를 통해 변경해야 한다.
• state가 객체인 경우 전개 연산자(Spread Operator)를 사용해 새로운 변수에 담아준 후 복사된 데이터를 변경하고 setState() 함수에 인자로 넘겨준다.
  
• state가 배열인 경우 배열 메소드 또는 전개 연산자(Spread Operator)를 사용한다.
  • 배열 메소드를 사용하는 경우
    
  • 전개 연산자를 사용한 경우