[React] State 활용 방법

React에서는 데이터를 저장하는 방법이 2가지가 있다. 첫 번째는 변수에 넣는 것이고, 두 번째 방법은 state에 넣는 것이다. State를 사용하는 이유는 데이터가 수정될 때 새로고침을 하지 않아도 자동으로 재렌더링 되기 때문에 사용한다.

 

활용 방법

import React, { useState } from 'react';

function App() {
	
    let [a, b] = useState('banana');	// ES6 destructuring	---- (1)
    let [count, countUp] = useState(0);			//---- (2)
	
    return (
    	<div>
        	<h1> {a} <span onClick={() => { countUp(count + 1)}}> count: {count} </span> </h1>
        </div>
    )
}

(1) useState('banana')라고 선언하게 되면, array가 생성이 된다. a안에는 banana라는 변수명이 저장되고, b안에는 banana라는 변수명을 변경하는 함수가 저장이 된다. (참고: 여러개의 데이터를 한번에 저장할 수 있다. let [a,b] = useState(['banana', 'apple']);)

(2) useState에서 두번째로 변수를 변경할 때 함수를 활용하는 방법은 다음과 같다. useState를 통해 두 번째로 선언된 'countUp'은 변수를 변경시킬 때 실행하는 함수이다. 밑에 적용된 것을 살펴 보면, useState 변경함수를 이용하여 click을 눌렀을 때 banana를 누르면 count가 한 개씩 증가하는 내용을 작성할 수 있다.

 

 

출처: 코딩애플 react 강의