[React] 리액트 기초내용 복습 : useState

useState 없이 데이터 변경해보기

useState를 사용하지 않고 데이터를 변경시키려면 데이터가 바뀔때마다 render 될 수 있도록
데이터를 변경하는 함수에 모두 render 함수를 넣어줘야한다.

const root = document.getElementById("root");

let num = 0; // 데이터를 담을 변수

function render() {
  ReactDOM.render(<App />, root); // 화면을 렌더할 함수
}

function countUp() {
  num = num + 1;
  render(); // 데이터 변경 시 화면을 리렌더 할 수 있도록 함
}

function App() {
  return (
    <div>
      <h3>Count : {num}</h3>
      <button onClick={countUp}>Click me</button>
    </div>;
  )
}

render(); // 처음에 화면을 렌더링

위 내용을 useState를 활용해 바꾸면 아래와 같다.

const root = document.getElementById("root");

function App() {
  const [num, setNum] = React.useState(0)
  // 데이터를 담고, 변경하고, 리렌더한다.

  const onClick = () => {
    setNum(num + 1) // 데이터를 변경할 함수 구현
  }

  return (
    <div>
      <h3>Count : {num}</h3>
      <button onClick={onClick}>Click me</button>
    </div>;
  )
}

ReactDOM.render(<App />, root); // 처음에 화면을 한번만 렌더링 하면 된다

useState는 데이터를 보관하고, 데이터가 바뀌면 자동으로 리렌더시켜준다.
컴포넌트 전체를 리렌더 시키며, 바뀐 부분의 UI를 refresh 한다.

useState 이해하기

const data = React.useState(0);

이렇게 선언하고 data를 콘솔에 찍어보면 [0, function] 이라는 배열이 나온다.
0은 내가 입력한 값이고, function은 modifier의 역할을 하는 함수이다. (값을 바꿀때 사용할 함수)

그래서 보통 const [data, setData] = React.useState(0)의 형식으로 사용하는데,
구조분해할당 문법으로 useState가 가지고 있는 값과 함수를 할당해준 것이다.

구조분해할당 (Destructuring Assignment)

let numArr = [1, 2, 3];
let [one, two, three] = numArr;

console.log(one); // 1

modifier 함수 제대로 사용하기

위 코드블럭에서는 이벤트 함수 onClick 을 만들고,
modifier 함수인 setData 를 활용할때 데이터를 직접적으로 바꾸는 방식으로 구현했다.

하지만 이렇게하면 데이터가 의도와 다르게 바뀌는 경우가 생길 수 있다.

const [num, setNum] = React.useState(0);

function onClick() {
  setNum(num + 1); // 1
  setNum(num + 1); // 1
  // 처음에 num값으로 설정된 0을 가져와서 1을 더하는 작업 반복 실행
}
function onClick2() {
  setNum((current) => current + 1); // 1
  setNum((current) => current + 1); // 2
  // 현재 값을 가져와서 데이터를 바꾸는 내용 실행
}

현재 state 값을 참조해서 함수를 실행시키는것이 안전하므로
setNum((current) => current + 1) 의 방식으로 구현하는 것이 좋다.