[React] state 사용방법(함수형 컴포넌트,클래스형 컴포넌트)

state 란?

React에서 앱의 유동적인 데이터를 다루기 위한 개체
• 계속해서 변하는 특정 상태
• 상태에 따라 다른 동작을 함
• 왜 사용할까?
• State가 변경될시 자동으로 재랜더링 되기 때문
• 이 점이 변수와 다른 점
• 말이 조금 어렵지만, ‘상태를 바꿀 수 있는 변수’

 

state vs. props

• props: 부모 컴포넌트에서 자식 컴포넌트에 데이터 전달 시 사용 (읽기모드)
    => React는 단방향 데이터 흐름!

• state: 특정 컴포넌트가 갖는 상태 (값) 
    => 컴포넌트 내부에서 선언되고 내부에서 값을 변경함!

 

클래스형 컴포넌트의 state

• 기존 형태

import React, { Component } from "react";

class ClassState extends Component {
	constructor(props) {
    super(props);
    
    this.state = {
    	number: 0,
    };
}
render() {
	const { number } = this.state;
    return (
    	<div><h3>Number: {number}</h3></div>
        );
    }
}
export default ClassState;

 

• 현재 버전

import React, { Component } from "react";

class ClassState extends Component {
	state = {
    	number = 0,
    };
	render() {
		const { number } = this.state;
    	return (
    		<div><h3>Number: {number}</h3></div>
        	);
    	  }
	}
export default ClassState;

 

 

함수형 컴포넌트의 state

• 함수형 컴포넌트는 state 기능이 원래 없었다.
• React 16.8 버전 이후부터 useState라는 함수가 생겼고, 이를 통해 함수형 컴포넌트에서도 상태관리를 할 수 있음

 

 

함수형 컴포넌트의 useState()

• useState 함수의 인자에는 상태의 초기값
=> • useState의 초기값은 숫자일 수도, 문자일 수도, 배열일 수도 있다. 즉, 값의 형태가 자유로움

• useState 함수는 배열을 반환
=> • 첫번째 원소: 현재 상태
=> • 두번째 원소: 상태를 바꿔주는 setter 함수

import React, {useState} from "react";

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

import { useState } from "react";
const [스테이트이름, 스테이트변경함수] = useState(초기값);

 

 

함수형 컴포넌트의 useState()

import React, {useState} from "react";
function Counter() {
	const [number, setNumber ] = useState(0);
    const onClickEnter = () => setNumber(number+1);
    
    return ( 
    	<div>
        	<h1>{number}</h1>
            <button onClick = {onClickEnter}>+1</button>
        </div>
     );
 };
 
 export default Counter;