REACT-1

1. REACT에서 변수 대신 UseState를 사용하는 이유

state 또한 변수이다. 하지만 const, let 등으로 선언한 변수와 다르게 값이 변하면 관련 있는 컴포넌트들이 재렌더링되어 화면이 바뀐다. state는 컴포넌트의 내부에서 변경 가능한 데이터를 다루기 위해 사용하는 객체이다. 일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState()라는 리액트 함수를 사용하여 state라는 저장 공간에 담아 사용한다.
변수는 변경되어도 자동으로 화면이 바뀌지 않는다. 하지만 state는 변경되면 자동으로 화면이 바뀌기 때문에 state를 사용한다. 즉 유동적인 변수를 사용할 때 화면에 그려지는 변수도 정상적으로 변경되길 원하는 상황에서 state를 사용한다. 예제를 통해 설명해보자면
1) 일반 변수를 사용했을 때

const Counter = () => {
  let count = 0;

  const plus = () => {
    count = count + 1
    console.log(count); // 제대로 증가함
  }
  const minus = () => {
    count = count - 1
    console.log(count); // 제대로 감소함
  }

  return (
    <div className='container'>
      <h2 className='int'>{ count }</h2>
      <button className='plus' onClick={plus}>+</button>
      <button className='minus' onClick={minus}>-</button>
    </div>
  )
}
export default Counter;

plus 함수와 minus 함수를 실행한 후에 콘솔로 count 값을 출력해 보면 count 값은 정상적으로 변경되었다. 하지만 일반 변수를 사용하였기 때문에 화면은 변하지 않는다. 일반 변수는 변경되어도 자동으로 화면이 재렌더링되지 않기 때문이다.
2) state를 사용했을 때

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  console.log(count);

  const plus = () => {
    setCount(count + 1);
  }
  const minus = () => {
    setCount(count - 1);
  }
  
  return (
    <div className='container'>
      <h2 className='int'>{ count }</h2>
      <button className='plus' onClick={plus}>+</button>
      <button className='minus' onClick={minus}>-</button>
    </div>
  )
}

export default Counter;

state를 사용하면 count 변수가 변할 때마다 이에 맞춰 화면도 정상적으로 변한다.
2. var, let, const의 차이와 언제 무엇을 사용해야 하는지?

var

var name = "YUN"
consol.log(name);

출력값 = YUN
var은 변수의 재선언(변수명 앞에 var을 붙여 변수를 다시 생성)이 가능함.

var name = "YUN"
consol.log(name);

name = "SEO"
consol.log(name);

출력값 = YUN
출력값 = SEO

var은 재할당(이미 선언된 변수에 다른 값을 넣는 것 = 변수의 값 변경)이 가능함.

let

let name = "YUN"
consol.log(name);

name = "SEO"
consol.log(name);

출력값 = YUN
출력값 = SEO
let은 재할당(이미 선언된 변수에 다른 값을 넣는 것 = 변수의 값 변경)이 가능함.

const

const name = "YUN"
consol.log(name);

name = "SEO"
consol.log(name);

출력값 = YUN
출력값 = SEO

var : 재선언 가능 재할당 가능
let : 재선언 불가능 재할당 가능
const : 재선언 불가능 재할당 가능