상태를 저장하는 변수 state

아데스티·2023년 3월 2일

React

목록 보기

4/7

자바스크립트의 변수 사용

자바스크립트에는 변수라는 것이 있습니다.
변수란 변하는 수를 저장하고 있는 데이터입니다.
반대의 개념으로 변하지 않는 수라고 상수가 존재하죠

let a = 1 + 2 // 3
a= a + 3 // 6

여기서 a는 3에서 6으로 바뀌었습니다.

항상 같은 수, 상수가 아니라 필요에 따라 변할 수 있는 수, 변수를 사용하는 방식으로 글 제목을 저장하고 있다가 보여주고 싶어요.
그래서 글 제목을 변수에 저장해서 작성해봤습니다.

function App(){
  let post = '강남 우동 맛집'

  return (
    <h4>{ post }</h4>
  )
}

이름 잘 들어가네요
좋아요, 이제 좋아요 기능을 확인해 보겠습니다.

function App() {
  let 좋아요수 = 0;
  return (
    <div className="App">
      <span>👍</span>{좋아요수}
    </div>
  );
}

export default App;

따봉 손가락을 spand으로 넣고 현재 변수 값을 출력하도록 작성했습니다.

<span onClick={...}>👍</span>{좋아요수}

onClick 핸들러 함수로 onClick 이벤트가 발생하는 것을 처리할 것인데

function App() {
  let 좋아요수 = 0;
  return (
    <div className="App">
      <span onClick={() => {
        좋아요수 += 1
        console.log(좋아요수);
      }}>👍</span>{좋아요수}
    </div>
  );
}

export default App;

좋아요수를 1씩 올리면서

올라간 현재의 좋아요 수를 콘솔창에서 확인할 것입니다.

아 근데 이상하게 버튼을 누르는 데, 심지어 콘솔창엔 찍히는 데
브라우저에서 보이는 숫자가 안바뀌어요

이건 또 뭔 ㅈ버그예요 자바스크립트 왜이래요

State 변수

자, 이거 왜이러는 거냐면요
자바스크립트 상에서 값이 변한 변수는 DOM에 다시 적용을 시켜야 반영이 된다고 해요
값은 바뀌었는데 현재 보이고 있는 값은 바뀌기 전의 값을 보여주고 끝난 상황이예요
그래서 결론적으로 DOM에 적용한 상태로 다시 보여줘야 하는거예요

리렌더링을 해야한다는 거예요
그럼 변하는 값에 대응하여 숫자를 바꿔주려면 어떻게 해야 합니까?

자, 지금 뭐가 바껴요
상태가 바껴요
상태가 영어로 뭐예요? - 여기선 Statement 라고 불러요
줄여서 state 라고 부릅니다.

이 state를 쓰면 값이 변할 때 자동으로 DOM에 반영 됩니다.
아 그래서 코드를 어떻게 짜냐구요?

import { useState } from 'react';

function App() {
  let [좋아요수, 좋아요변경] = useState(0);
  return (
    <div className="App">
      <span onClick={() => { 좋아요변경(좋아요수 + 1) }}>👍</span>{좋아요수}
    </div>
  );
}

export default App;

일단은 이렇게 생겼습니다.

import { useState } from 'react';

useState 라는 함수를 써서 그 반환값을 이용할 거예요
이렇게 react에서 가져오는 걸 Hook이라고도 부르는데
사용하려면 이렇게 적습니다.

let [좋아요수, 좋아요변경] = useState(0);
useState Hook에 인자값 0 을 주고
return 받는 배열을 구조분해 할당합니다

초기값 0을 좋아요수 에
좋아요수 변경 함수를 좋아요변경 에 저장해요
앞에껀 state / 뒤에껀 세터함수라고 불러요

이렇게 바꿔봤으니 진짜 적용이 되나 볼까요

아 이제 적용이 되네요

State 변수 사용 예시

import { useState } from 'react';

function App() {
  let [과자이름] = useState(['허니버터칩', '홈런볼', '꼬북칩']);

  return (
    <>
      <h4>과자목록</h4>
      <p>{과자이름[0]}</p>
      <p>{과자이름[1]}</p>
      <p>{과자이름[2]}</p>
    </>
  )
}

export default App;