[React] useState 사용하기

 

리액트는 상태관리가 다 인거 같은데... state 개념은 지금까지 몇 번 반복해도 쉽게 이해가지 않는다.

거기에 props까지 더해지면 갑자기 머리가 팽 돌아버리는 느낌이 든다 (⌐■_■)

 

코딩애플 강의를 글로 정리한 적이 없어서 글로 정리하면서 참고자료를 만들어본다.

 

 

---

 

State란?

*중요한 데이터는 변수말고 리액트 state!

 

아마 나처럼 아직 변수에도 익숙하지 않은 사람은 state라는 개념을 왜 쓰는지 조차 이해할 수 없을 때가 있다.

그냥 변수인데, 변경되는 변수인 state는 useState라는 hook을 통해 쉽게 조작할 수 있다.

 

요거 아니고요

 

리액트에서 State를 쓰는 가장 큰 이유는

리액트는 state가 변경될 때 그 state가 포함된 HTML을 자동으로 재렌더링한다.

 

var, let, const로 선언한 변수도 여러가지 메서드를 통해 변경될 수 있다.

하지만 이런 일반 변수들은 변경이 일어나게 되면 HTML이 새로고침 되어야 변경이 된다.

state를 이용한 변수를 useState에서 만들어준 변경함수를 통해 변경하게 되면 변경될 때 마다 가상의 DOM을 재렌더링 해주기 때문에 사용자가 느끼기에 빠르고, 부드럽게 화면이 전환되는 것 처럼 보인다.

결국 state는 번역하면 '상태'인 것이고, useState는 상태를 사용하는 것이고, '상태'를 변화시키는 '상태변경함수'를 통해 변경하면 그 상태를 화면에 반영해주는 것이다.

 

 

 

useState 사용법

 

 

useState는 리액트가 제공해주는 일종의 내장함수로 상단에 import를 해줘야 한다.

 

import React, { useState } from 'react';

 

이런식이다.

 

그리고 우리는 변수를 선언해서 useState 함수를 넣어줄 수 있다.

 

let original = useState('원본');

 

그런데 실제로는 useState는 두 개의 값을 가지게 된다.

original에 선언된 '원본'이라는 값과 이 값을 변경하는 함수를 가진다.

그래서 아래와 같이 선언해줄 수 있다.

 

 

let [original, originalHandler] = useState('원본');

 

이것은 ES6의 Desturcturing 문법인데, array안의 데이터를 쉽게 변수로 저장하는 문법이다.

 

var [one, two, three] = ['1', '2', '3']

// var one = '1';
// var two = '2';
// var three = '3';

 

 

이와 같은 문법을 통해 original에는 '원본' 이라는 값이, originalHandler 라는 변수에는 원본을 변경할 수 있는 함수가 할당된 것이다.

 

let [original, originalHandler] = useState('원본');

//let original = '원본';
//let originalHandler = 원본변경();

 

이 원본변경 함수는 onClick과 같은 이벤트 핸들러들과 함께 사용한다.

아래는 button 태그를 클릭했을 때 original 값이 '수정'으로 변경되도록 만든 useState 사용법이다.

 

let [original, originalHandler] = useState('원본');

<button onClick = { originalHandler( original = '수정' ) } >{original}</button>