[React] 리액트에서 변수 버리고 state 쓰는 이유

React를 최소 찍먹이라도 해본 사람이라면 state라는 개념을 들어본 적이 있을 것이다. 보통 중요한 데이터는 변수 대신 state에 저장한다고 알고 있는 사람도 있는데, 사실 이 state 의 용도는 변수랑 똑같다. 그럼 state을 굳이 왜 쓰는 걸까, 그냥 원래 쓰던 변수나 쭉 쓰면 안될까.

 

 

 

일단 React 쓰는 이유부터 

 

state를 왜 쓰는지 알기 위해서는 일단 쌩자바스크립트 냅두고 굳이 React를 왜 쓰는지 알아야 한다.

React 는 자바스크립트 ‘라이브러리’이다. 즉, 그냥 자바스크립트 편하게 짤려고 생긴 거다.

React를 쓰는 이유는 여러가지가 있겠지만 가장 큰 이유는 바로

Virtual DOM(가상 DOM)을 사용하여 DOM 업데이트를 최적화한다.

 

라는 것인데 쉽게 말하자면

 

원래는 DOM 특성상 매번 작은 변화가 있을 때마다 전체 화면을 새로 그려준다.

근데 이러면 디자인, 성능 등에 있어서 별로 좋지 않다.

(웹사이트에서 뭐 하나 누를 때마다 계속 로딩 걸리면 유저이탈 참사 발생함.)

 

그래서 React는 가상 DOM에 전체 새로고침된 내용을 보관해서 비교한 다음 필요한 부분만 다시 그리는 방식을 사용한다. 성능도 효율적으로 높아지고 하드웨어 리소스(쉽게 말해 에너지)도 절약할 수 있다.

무엇보다 페이지 전환이 새로고침 없이 스무스하게 되는 ‘SPA’도 간편하게 만들 수 있어

사용자에게 시각적 편안함을 제공한다.

 

 

변수대신 state 쓰는 이유

 

그런 점에서 변수는 React의 철학과 조금 거리가 있다.

React는 사용자 인터페이스(UI)를 동적으로 업데이트하는데 중점을 두지만

변수는 값이 변경되어도 UI에 아무런 영향을 주지 않는다.

 

예를 들어 버튼을 클릭할 때마다 숫자가 증가하는 기능을 변수로 만들면 이렇게 되는데 

let count = 0;

function handleClick() {
    count += 1;
    console.log(count); // 값은 증가하지만, UI는 변화하지 않음
}

 

변수 'count'는 증가하지만 이 변경 사항은 콘솔에만 출력될 뿐, 화면에는 반영되지 않는다.

변수는 단순히 메모리 상에서 값을 변경할 뿐, React에게 "이 값으로 UI를 업데이트 해줘"고 지시하지 않기 때문이다.

 

 

 

 

그 변경사항도 html에 반영되게 하고 싶으면

원래는 직접 "변수내용 바뀌었으니까 html도 고쳐줘" 라고 귀찮게 코드를 짜야한다.

하지만 state자료는 개입 안해도 자동으로 html도 바뀌므로 그럴 필요가 없다. 

state는 변경 사항이 생기면 state가 포함된 html을 자동으로 재렌더링 해주기 때문이다.

그럼 UI 기능 개발도 매우 쉬워지고 사이트가 부드럽게 동작하기 때문에 React를 사용하는 이유에 잘 부합한다.

 

 

state 기본 사용법

 

그럼 React에서 state를 어떻게 써야 하는지 알아보자.

 

1. 코드 맨 윗줄에 다음과 같이 적어준다 (보통 코드에 useState 쓰면 자동으로 생김)

import React, { useState } from 'react';

 

2. state의 기본 형태는 다음과 같다.

const [state, setState] = useState(value);

 

state 값(value)을 이렇게 두개의 요소에 저장할 수 있다.

첫번째 요소(state)는 현재 state 값이다. (변수로 치면 변수명)

두번째 요소(setState)는 state를 업데이트 할때 쓰는 '함수'이다. 

 

보통 변수를 업데이트 할때는 

var myName = '철수';

myName = 'Charles';
console.log(myName) // Charles 출력

 

이런식으로 변수명에 다이렉트로 업데이트 했지만

state는 무조건 두번째 요소인 함수를 사용해서 state를 업데이트 해야한다.

아래와 같이.

...
const [likes, setLikes] = useState(0);

    return (
        <div>
            <button onClick={() => setLikes(likes + 1)}>👍 {likes}</button>
        </div>
        ...

 

likes += 1 등으로 업데이트 하려고 하면 안된다.

state 변경 함수인 setLikes를 사용하여 다음과 같이 업데이트 해야한다.

 

 

그렇다고 무작정 state만 X

 

그렇다고 변수 싹다 없애고 무작정 state만 쓰면 안된다.

state는 어떻게 보면 'UI 업데이트에 최적화된' 변수이기 때문에

변경할 일이 없는 데이터들이나 굳이 html에 넣을 필요없는 데이터들은 그냥 변수에 저장하는 게 낫다. 

 

만약 React로 블로그 홈페이지를 만든다면

잘 바뀌지 않는 블로그 로고 등은 변수로 저장하고

자주 변할 것 같은 글제목, 좋아요 등은 state로 저장해야 한다.