[React] React state

state

• 컴포넌트 내부에서 바뀔수 있는 값
• 클래스형 컴포넌트의 경우 state / 함수형 컴포넌트인경우 useState로 사용

---

클래스 컴포넌트의 state

state 초깃값 설정

// [기본문법]
  // state 초깃값 설정
  state = {
    속성: 값,
  	속성: 값
  };

// [constructor 메서드 사용한 문법]
 constructor(props) {
    super(props);
    // state 초깃값 설정
    this.state = {
		속성: 값,
  		속성: 값
    };
  }

constructor 메서드를 활용한 state

• constructor 메서드를 작성하여 state 설정 - 객체 형식으로 작성
• 반드시 super(props) 메서드를 호출하여 클래스 컴포넌트가 상속하고 있는 리액트 컴포넌트 클래스가 지닌 생성자 함수를 호출해 주어야함
• this.state 를 통해 초깃값 설정현재
• state 조회 : render함수 내에 this.state를 사용하여 조회

// [Count.js]
import {Component} from 'react'

class Count extends Component {
	constructor(props) {
		super(props)
		// state 초깃값 설정
	this.state = {
		number:0
	}
	}

	render(){
		const {number} = this.state  // state 조회
		return (
			<>
			<h1>{number}</h1>
			<button onClick ={()=>{this.setState({number:number+1})}} >increase</button>
			</>
		)
	}
}

export default Count

this.setState

• this.setState를 사용하여 비동기적으로 state값을 업데이트 가능

// 함수를 인자로 가질 경우 기본 문법
this.setState((기존상태, 현재 지니고 있는  props) => { // props가 없을 경우 생략 가능
	return {
		// 업데이트 할 내용
	}
}

import { Component } from 'react';

class Count extends Component {
  state = {
    number: 0,
  };

  render() {
    const { number, name } = this.state; // state 조회
    return (
      <>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState((prev, props) => {
              return {
                // 업데이트 할 내용
                number: prev.number + 1,
              };
            });
          }}
        >
          increase
        </button>
      </>
    );
  }
}
export default Count;

this.setState 이후 callback 호출

• setState 이후 특정 작업 실행을 원하는 경우 두번째 파라미터에 콜백함수를 등록하여 처리 가능

import { Component } from 'react';

class Count extends Component {
  state = {
    number: 0,
  };

  render() {
    const { number } = this.state; // state 조회
    return (
      <>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState(
              {
                number: number + 1,
              },
              // callback 함수 호출
              () => {
                console.log('callback');
              }
            );
          }}
        ></button>
      </>
    );
  }
}
export default Count;

exam source

import React from 'react';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }
  render() {
    return (
      <>
        <p>{this.state.num}</p>
				{/* setState : 상태 값을 업데이트 해주는 리액트 클래스 컴포넌트 메소드 */}
        <button type='button' onClick={() => this.setState({ num: this.state.num + 1 })}>
          Click
        </button>
      </>
    );
  }
}

export default Example;

---

함수형 컴포넌트의 state

• v16.8 이하 경우 함수형 컴포넌트에 state 사용이 가능하였으나, v16.8이후부터 useState 함수를 사용
• Hook 사용

1. 여러 State 변수 선언

• 하나의 컴포넌트 내에 여러 개의 State Hook 사용 가능
• 배열 구조 분해 문법은 useState로 호출된 state 변수들을 다른 변수로 할당할 수 있게 해주며, 
  이때 변수명은 useState API와 관련 없음
• React는 매번 렌더링될 때 useState가 사용된 순서대로 실행

const [age, setAge] = useState(10)
const [name, setName] = useState('name')
const [list, setLiist] = useState([{text:'Hooks'}])

 

---

2. useState 사용

• useState : 현재의 state값과 이 값을 업데이트 하는 함수를 쌍으로 제공하는 Hook 내장함수
• 해당 함수를 이베트 핸들러나 다른 곳에서 호출 가능
• 클래스의 this.setState와 거의 유사하나 이전 state와 새로운 state를 합치지  않는다는 차이점을 가짐
• 초기값은 첫 번째 렌더링 시 딱 한번 사용 (컴포넌트가 렌더링 될 때 오직 한 번만 생성)
• 클래스형 컴포넌트와 달리 초깃값은 객체일 필요 없으며, 숫자와 문자, 배열 등의 타입을 가질 수 있음
• 각 각 다른 변수 저장을 위해서는 useState를 각각 호출해 줘야 함
• 반환 : state변수와 해당 변수를 업데이트 할 수 있는 함수의 쌍을 반환

코드 형식

• 함수명은 주로 set- 접두사를 붙여 명명
• state값은 오로지 함수명을 통해 변경 가능

// 1.useState Hook을 react에서 가져옴
import {useState} from 'react';

// 2. useState 선언
const [state변수, state 변수를 업데이트 하는 함수명] = useState(초기값)

Exam Source

• useState 사용

  import { useState } from 'react';
  
  const Example = () => {
    const [num, setNum] = useState(0);
  
    const onPlus = () => {
      setNum(num + 1);
    };
    return (
      <>
        <p>{num}</p>
        // 버튼 클릭 시 : setNum함수를 호출하여 state 변수를 갱신
        // React는 새로운 num 변수를 Example 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링
        <button type='button' onClick={onPlus}>Plus</button>
      </>
    );
  };
  
  export default Example;

import { useState } from 'react';

const Color = () => {
  const [txt, setColor] = useState('black');

  return (
    <>
      <button style={{ color: txt }} onClick={() => setColor('blue')}>
        색 변경
      </button>
    </>
  );
};
export default Color;

---

state 갱신

// 클래스 컴포넌트는 state 갱신을 위해 this.setState() 호출
   <button type='button' onClick={() => this.setState({ num: this.state.num + 1 })}>
          Click
        </button>
 
 // 함수 컴포넌트에서는 state변수와 함수를 가지고 있으므로 this를 호출하지 않아도 됨
 <button onClick={() => setCount(num + 1)}>
    Click me
  </button>

유사한 요소를  하나의 useState로 관리

• 구조 분해 할당 요소 사용

//  Set 구문
// * 개수는 항상 동일하게 맞춰줌
const [text, setTexts] = useState({
text01: '',
text02
})

// 구조 분해 할당을 이용하여 각 변수를 따로 관리
const {text01, text02} = text
//  Set 구문

---

State 사용 시 주의사항

• state 값 변경 시 setState나 useState를 통해 전달받은 setter 함수를 사용해야 함
• 배열이나 객체 업데이트 시 spread 연산자를 통해 사본을 만들어 값을 업데이트 하고 사본의 상태를 setState나 setter 함수를 통해 업데이트 진행
• 상태 안에서 배열을 변형하는 경우 직접 배열에 접근하여 수정하지 않고, 배열 내장 함수(filter, spread, concat..)를 사용하여 새로운 배열 생성후 새로운 상태를 설정 해 주어야 함

 

---

 

 Sources

• 숫자증가에 따른 색상 변경

• input 입력값 받기 및 초기화

• input 초기화, 출력, 입력값 제어

• 여러개의 input 입력

• 여러 개의 input 요소를 하나의 useState로 관리

• concat을 활용한 input 추가