[리액트 React] setState() 사용법 / useState 사용법 / state 독학 / 클래스형컴포넌트 setState / 함수형컴포넌트setState / () => 사용으로 리렌더링 방지

setState()를 사용하는 이유

this.state.변수명 = value와 같이 직접적으로 state를 건드려서 변경하게 되면 render() 함수를 호출하지 않는다.

즉, 화면에는 바뀌기 전의 state값만 보여지게 된다.

setState() 함수를 사용하여 state를 변경해야 render()함수가 호출된다.

 

 

 

1. App.js 작성하기

import React from 'react';
import './App.css'
import SetState from './SetState';

function App() {
	return(
		<div>
			<SetState />
		</div>
	)
}

export default App;

 

 

 

 

2. 클래스형 컴포넌트 SetState.js 작성하기

constructor에 props를 먼저 담아서 사용한다.

직접적으로(direct) this.state.StateSTring을 사용하여 state값을 바꾸려 했지만 실행되지 않는다.

stateChange 함수 안의 setState로 값을 변경한다.

import React, { Component } from 'react';

class SetState extends Component {
    constructor(props) {
        super(props);
        this.state = {
            StateString: 'tooktak',
        }
    }

    StateChange = (flag) => {
        if(flag == 'direct') this.state.StateString = '뚝딱';
        if(flag == 'setstate') this.setState({StateString : '뚝딱'});
    }

    render() {
        return (
            <div>
                <button style={{marginRight: '20px'}} onClick={(e) => this.StateChange('direct', e)}>
                    state 직접 변경
                </button>
                <button onClick={(e) => this.StateChange('setstate', e)}>
                    setState로 변경
                </button><br />
                [state 변경하기] StateString: {this.state.StateString}
            </div>
        )
    }
}

export default SetState;

 

 

2-1. 클래스형 컴포넌트 SetState.js 브라우저 화면 확인

1번 버튼 눌렀을 때 : 아무 변화 없음

2번 버튼 눌렀을 때 : 'tooktak'에서 '뚝딱'으로 정상적으로 변경되어져서 보임.

 

 

 

 

3. 함수형 컴포넌트 SetState.js 작성하기

setState를 사용하려면 useState문법을 상단에 import 해주어야 한다.

import React, { useState } from 'react';

function SetState () {
    
    const [ stateString, setStateString ] = useState('tooktak');
    
    function StateChange(e) {
        stateString =  '뚝딱'; // 여기서 에러 발생
        e.preventDefault();
    }

    return (
        <div>
            <button
                style={{marginRight: '20px'}}
                onClick={(e) => StateChange(e)}
            >
                state 직접 변경
            </button>
            <button onClick={() => setStateString('뚝딱')}> 
            {/* 여기서 () => 를 사용하지 않으면 리렌더링이 많이 되어서 에러가 발생한다. */}
                setState로 변경
            </button><br />
            [state 변경하기] StateString: {stateString}
        </div>
    )
}

export default SetState;

 

 

3-1. 클래스형 컴포넌트 SetState.js 브라우저 화면 확인

 

1번 버튼 눌렀을 때 : 에러가 뜬다.

에러 내용은 상수값에 값을 적용하려 했기에 오류가 발생 했다는 내용이다.

 

2번 버튼 눌렀을 때 : 'tooktak'에서 '뚝딱'으로 정상적으로 변경되어져서 보임.