[ReactJS로 영화 웹 서비스 만들기 실습] React - useState

IRISH·2024년 4월 17일

React

ReactJS-Movie-Web-Service

목록 보기

13/23

실습일자 : 2024.04.17

useState란?

state
- 컴포넌트의 상태를 말한다.
useState
- 컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공해준다.
- 컴포넌트의 현재 상태 값은 state 라는 변수에 들어있고 state를 변경하고 싶으면 setState 함수를 이용해서 변경할 수 있다. 여기서 state와 setState의 이름은 마음대로 지정할 수 있다.
- setState를 이용해서 state를 변경하면 해당 컴포넌트는 화면에 다시 렌더링이 된다.
useState 예시 형식

const [state, setState] = useState(초기값);

문제 코드

app.js 와 index.js 의 코드는 각각 아래와 같다.

⇒ app.js

import { useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("render!!!");

  return (
    <div>
      <h1>Click Count is {counter}</h1>
      <button onClick={onClick}>Click this Button</button>
    </div>
  );
}

export default App;

⇒ index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

⇒ 결과

문제
- 위와 같이, 초기화면(버튼을 한 번도 클릭하지 않았을 때)에는 “render!!!”이 2번 나온다. 또한, 버튼을 클릭할 때마다 “render!!!”가 2번씩 콘솔창에 추가된다.

트러블 슈팅

⇒ 원인 분석

현재 나의 React 모드는 개발 모드이다.
나는 해당 프로젝트를 create-react-app으로 리액트 앱을 생성했다.
- create-react-app으로 리액트 앱을 생성했을 경우, StrictMode 태그를 기본적으로 생성한다.
이럴 경우, 프로젝트의 src/index.js에서 <React.StrictMode> 태그로 이 감싸져있으면 개발모드에서 (개발 단계시 오류를 잘 잡기위해) 두 번씩 렌더링된다.

⇒ 해결 방법

index.js의 StrictMode 태그 관련 부분을 제거한다.

⇒ index.js 수정

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

⇒ 결과

초기 로드시 “render!!!”가 찍히고, 버튼 클릭 횟수와 비례하여 콘솔창에도 “render!!!”가 찍히는 것을 알 수 있다.

StrictMode란?

StrictMode는 리액트에서 제공하는 검사 도구
create-react-app으로 리액트 앱을 생성하면 기본적으로 생성되는 태그임
개발 모드일때만 디버그를 하며 해당 태그로 감싸져 있는 부분은 자손까지 검사를 수행
안전하지 않은 생명주기를 가진 컴포넌트라든지, 권장되지 않는 부분이 있다든지 배포 후 문제가 될만한 이슈들을 미리 잡는 모드
공식 문서
- Strict 모드에서 React는 실수로 발생한 불순물을 찾는 데 도움을 주기 위해 초기화 함수를 두 번 호출 합니다.
- 이는 개발 전용 동작이며 프로덕션에는 영향을 주지 않습니다.
- 초기화 함수가 순수(순수해야 함)인 경우 이는 동작에 영향을 주지 않습니다. 호출 중 하나의 결과는 무시됩니다.

추가 실습

코드

⇒ App.js

import { useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((cnt) => cnt + 1);

  const [inputVal, setInputVal] = useState("");
  const onHandleChange = (e) => setInputVal(e.target.value);

  const [liked, setLiked] = useState(true);
  function onHandleCheck(e) {
    setLiked(e.target.checked);
  }
  //const onHandleCheck = (e) => setLiked(e.target.checked);

  return (
    <div>
      <button onClick={onClick}>Click number is {counter}!!!</button>
      <br />
      <br />
      <input value={inputVal} onChange={onHandleChange} />
      <p>Text is {inputVal}</p>

      <label>
        <input type="checkbox" checked={liked} onChange={onHandleCheck} />I
        liked this!
      </label>
      <p>You {liked ? "liked" : "did not like"} programming!</p>
    </div>
  );
}

export default App;