REACT - state

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 한다. 

 

state

1. state(클래스형 컴포넌트가 지니고 있는 state)

2.useState(함수 컴포넌트가 함수를 통해 사용하는 state)

 

1. 클래스형 컴포넌트의 state

❗ 클래스형 컴포넌트에 state를 설정할 때는 constructor 메서드에 super(props)를 호출하고 this.state 값에 초깃값을 설정해 주어야 한다. 컴포넌트의 state는 객체 형식으로 설정한다.

render() 함수에서 현재 state를 조회할 때는 this.state로 조회하고, 함수 내부에서는 this.setState()를 이용해 state의 값을 바꿀 수 있다. 

import React, { Component } from 'react'; 

class Counter extends Component {
	constructor(props) {
    	super(props);
        //state의 초깃값 설정하기
        this.state = {
        	number: 0
            };
        }
    render() {
    	const { number } = this.state;
        return (
        	<div>
            <h1>{number}</h1>
            <button
            //onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다.
            onClick = {() => {
            //this.setState를 사용하여 state에 새로운 값을 넣을 수 있다.
            	this.setState({number:number+1});
                }}
                >
                1 증가
                </button>
                </div>
                );
           }
     }
     
     export default Counter;

❗ state 안에 fixedNumber라는 또 다른 값을 추가해 주고 fixedNumber의 값은 그대로 두고, number의 값만 바꾸기 위해  this.setState 함수를 사용할 때 fixedNumber는 전달하지 않았다. this.setState 함수는 인자로 전달된 객체 안의 값만 바꾸어 준다.

//state 객체 안에 여러 값이 있을 때

import React, { Component } from 'react';

class Counter extends Component {
	constructor(props) {
    super(props);
    //state의 초깃값 설정하기
    this.state = {
    number : 0,
    fixedNumber : 0
    };
 }
 render() {
 	const { number, fixedNumber } = this.state;	//state를 조회할 때는 this.state로 조회합니다. 
    return (
    	<div>
        	<h1>{number}</h1>
            <h2>바뀌지 않는 값 : {fixedNumber}</h2>
            <button
            //onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정합니다.
            onClick={()=>{
            //this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.
            this.setState({ number: number + 1});
            }}
            >
            1 증가
            </button>
         </div>
        );
       }
     }
     
     export default Counter;

❗ constructor() 메서드를 사용하지 않고도 state의 초깃값을 지정해 줄 수 있다.

class Counter extends Component {
	state = {
    	number: 0,
        fixedNumber : 0
        };
     }
    render() {
 	const { number, fixedNumber } = this.state;	//state를 조회할 때는 this.state로 조회합니다. 
    return (
    	<div>
        	<h1>{number}</h1>
            <h2>바뀌지 않는 값 : {fixedNumber}</h2>
            <button
            //onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정합니다.
            onClick={()=>{
            //this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.
            this.setState({ number: number + 1});
            }}
            >
            1 증가
            </button>
         </div>
        );
       }
     }
     
     export default Counter;

❗  this.setState를 두번 사용했지만 버튼을 클릭할 때 숫자가 1씩 더해짐. 해결방법은 this. setState를 사용할 때 객체 대신에 함수를 인자로 넣어주는 것이다.

onClick={() => {
	this.setState({number : number + 1});
    this.setState({number : this.state.number + 1});
    }}

❗  prevState는 기존상태이고, props는 현재 지니고 있는 props를 가리키는데 props는 생략이 가능하다.

this.setState((prevState, props) => {
	return {
    //업데이트 하고 싶은 내용
    }
  })

❗  setState를 사용하여 값을 업데이트하고 난 다음에 setState의 두번째 파라미터로 콜백함수를 등록하여 작업을 처리할 수 있다. 

 

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

    render(){
        const {number, fixedNumber} = this.state;
        return(
            <div>
                <h1>{number}</h1>
                <h2>바뀌지 않는 값 : { fixedNumber }</h2>
                <button

               onClick={() => {
                this.setState(
                    {
                        number: number + 1
                },
                () => {
                    console.log('방금 setState가 호출되었습니다.');
                    console.log(this.state);
                }
            );
        }}
                >
                    1증가
                </button>
            </div>
        )
    }
}


export default Counter;

 

 

2. 함수 컴포넌트에서 useState 사용하기

함수컴포넌트에서는 useState라는 함수를 사용하여 state를 사용할 수 있는데  state와 사용법이 다르다.

 

❓배열 비구조화 할당

JavaScript에서 배열을 분해하여 배열 안에 들어 있는 값을 개별 변수로 쉽게 추출할 수 있도록 해 주는 문법, 

const array = [1, 2];

const one = array[0];

const two = array[1];

          ⬇

const array = [1, 2];

const [one, two] = array;

 

❗ useState 함수의 인자에는 상태의 초깃값을 넣어주는데, 숫자, 문자열, 객체, 배열 상관 없이 넣을 수 있다.

import React, { useState } from 'react';

const Say = () => {
	const [message, setMessage] = useState('');
    const onClickEnter = () => setMessage('안녕하세요!');
    const onClickLeave = () => setMessage('안녕히 가세요!');
    
    return(
    	<div>
        	<button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            
            <h1>{message}</h1>
        </div>
        );
    };
    
    export default Say;

❗ useState는 한 컴포넌트에서 여러 번 사용할 수 있다. 

const Say = () => {
    const [message, setMessage] = useState('');
    const onClickEnter = () => setMessage('안녕하세요!');
    const onClickLeave = () => setMessage('안녕히 가세요!');

    const [color, setColor] = useState('black');
    const [backgroundColor, setBackgroundColor] = useState('white');

    return (
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>

            <h1 style={{ color }}>{message}</h1>

            <h1 style={{ backgroundColor }}>{message}</h1>

            <button
                style={{ color : 'red' }}
                onClick={() => {
                    setColor('red');
                    setBackgroundColor('yellow')
                }}
            >버튼</button>

            <button
                style={{ color : 'purple' }}
                onClick={() => {
                    setColor('purble');
                    setBackgroundColor('green')
                }}
            >버튼</button>
        </div>
    );
}

export default Say;

 

 

3. state를 사용할 때 주의 사항

클래스형 컴포넌트든 함수 컴포넌트든 state의 값을 바꾸어야 할 때에는 setState 또는 useState를 통해 전달받은 세터 함수를 사용해야 한다.