TIL: useState 훅 사용해서 카운트 기능 만들기

 

강의 숙제로 작성한 코드.

스스로 작성해본 코드는 Error 화면이 떴다.

 

 

 

📍 내가 작성한 코드

 

처음 props 형식으로 작성했다가 state로 바꾸면서 문법이 섞여버렸다.

state로 바꾼 이유는 명확히 알지 못한 채로 느낌상 그런 것 같아서 바꿨다.

내부의 Up과 Down 함수도 밖에 작성했다가 state로 바꾸면서 안으로 옮겼는데 매개변수를 그대로 둬버린 것이다.

// 처음 작성했던 잘못된 코드

import { useState } from "react";
import "./App.css";

function App() {
  let [count, setCount] = useState[0];
  // App 함수 밖에 썼다가 안으로 옮기면서 매개변수를 지웠어야 했다..
  function Up({ count }) {
    return setCount((count += 1));
  }

  function Down({ count }) {
    return setCount((count -= 1));
  }

  return (
    <div className="App">
      <button onClick={Down}>-</button>
      <button onClick={Up}>+</button>
      <Up count={count}></Up>
    </div>
  );
}

export default App;

 

 

 

✔️ 올바른 코드

// 올바른 코드
import { useState } from "react";
import "./App.css";

function App() {
  // 화면에 있는 숫자는 버튼을 누르는 즉시 바뀌므로(리렌더링 되므로) state로 관리해줘야 한다
  const [count, setCount] = useState(0);
  const up = () => {
    setCount(count + 1);
  };

  const down = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <div>{count}</div>
      <button onClick={down}>-</button>
      <button onClick={up}>+</button>
    </div>
  );
}

export default App;

 

 

 

📌 놓쳤던 부분

 

01 state VS props

요구하는 결과물은 버튼을 누를 때마다 즉각적으로 숫자가 바뀌는 것. 즉 리렌더링이므로 setState()를 쓰는 것이 좋은 선택이다.

 

 

02 useState()는 const로 선언하자

값이 변경되므로 let을 써야 하는 줄 알았는데 const를 사용해도 된다. 가독성이 좋으니 const로 선언하자.

 

 

03 추가적인 기능은 함수선언식으로 작성하자

const up = () => {
    setCount(count + 1);
  };

컴포넌트 내부에서 함수가 선언되므로 매개변수를 쓰지 않는다.

 

 

04 setState() 자체가 수정을 의미하므로 +=이 아니라 +만 해줘도 된다

+= 형태의 할당 방식을 사용하면 리렌더링이 되지 않는다.

 

 

05 useState() 선언시 초기값은 중괄호( )로 작성하자

다른 부분을 전부 수정했는데도 에러 화면을 벗어날 수 없었다.

다음과 같은 에러 메시지가 떴는데,

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

이 문서를 통해 해결할 수 있었다.

 

초기값을 대괄호[ ]로 썼던 것이 문제였던 것이다.

중괄호( )로 수정해주니 바로 잘 작동 되었다.

// 수정 전 - 잘못된 코드
const [count, setCount] = useState[0];

// 수정 후
const [count, setCount] = useState(0);

 

 

+ 함수선언식을 불러올 때 중괄호를 붙히면 무조건 실행된다

// 잘못된 코드
  return (
    <div>
      <div>{count}</div>
      <button onClick={down()}>-</button>  // 클릭하지 않아도 무조건 실행
      <button onClick={up()}>+</button>
    </div>
  );

// 올바른 코드
  return (
    <div>
      <div>{count}</div>
      <button onClick={down}>-</button>
      <button onClick={up}>+</button>
    </div>
  );