[React] 컴포넌트와 상태 01

Intro 🐻‍❄️

사용자의 행위나 시간 변동에 따라 값이 변하는 동적인 리액트 컴포넌트를 만들어보겠습니다.
이를 위해서는 리액트의 핵심 기능 중 하나인 State를 알아야 합니다.
State는 상태라는 뜻입니다.
상태란 어떤 사물의 형편이나 모양을 일컫는 말로 일상 생활에서도 흔히 사용합니다.
State를 이용해 동적인 컴포넌트를 만드는 방법을 살펴보겠습니다.
친구가 강의를 추천해 주었습니다.

State 이해하기 👏

상태는 전구와 스위치로 쉽게 이해할 수 있습니다.

• 전구의 상태는 소등과 점등으로 나눌 수 있다.

• 소등 상태일 때 스위치를 켜면 점등으로 상태 변화가 일어난다.

• 점등 상태일 때 스위치를 끄면 소등으로 상태 변화가 일어난다.
  
  

다음 용어를 상태가 아닌 State로 변경 해보겠습니다.

• 전구 State는 off(소등)과 on(점등)으로 나눌 수 있다.

• 전구 State의 값이 off일 때 스위치를 켜면 값이 on으로 바뀐다.

• 전구 State의 값이 on일 때 스위치를 끄면 값이 off로 바뀐다.

전구의 상태가 상태 변화에 따라 점등 또는 소등으로 변하는 것처럼 리액트 컴포넌트 또한 State 값에 따라 다른 결과를 렌더링 합니다.

State의 기본 사용법

• useState로 State 생성하기

  리액트에서는 함수 useState로 State를 생성하여 2개의 요소가 담긴 배열을 반환합니다.

  const [light, setLight] = useState('off');

  light는 State 변수로 현재 상태의 값을 저장하고 있는 변수입니다.
  setLight는 set 변수로 상태를 업데이트하는 함수힙니다.
  useState('off')는 생성자(초깃값)을 뜻합니다.

  import { useState } from "react";
  function Body() {
   const [count, setCount] = useState(0);
   return (
     <div>
       <h2>{count}</h2>
     </div>
   )
  }
  export default Body;

  
  
  

• set 함수로 State 값 변경하기

  컴포넌트에서 버튼을 하나 만들고, 버튼을 클릭할 때마다 State(count) 값을 1씩 늘리겠습니다.

  import { useState } from "react";
  function Body() {
   const [count, setCount] = useState(0);
   const onIncrease = () => {
     setCount(count + 1);
   };
   return (
     <div>
       <h2>{count}</h2>
       // 버튼의 이벤트 핸들러 onIncrease에서는 set 함수인 setCount를 호출함
       <button onClick={onIncrease}>+</button>
     </div>
   )
  }
  export default Body;

  

set 함수를 호출해 State 값을 변경하면, 변경값을 페이지에 반영하기 위해 컴포넌트를 다시 렌더링합니다.
리액트에서는 이것을 컴포넌트의 업데이트라고 표현합니다.

💡

• State를 언제 써야할까?

  변동 시 자동으로 html에 반영되게 만들고 싶으면 State를 써야합니다.
  예를 들어logo같은 요소는 잘 바뀌지 않으니까 굳이 State를 안 써도 됩니다.
  결론적으로 자주 변경될 것 같은 html 부분은 State로 만들어놓으면 됩니다.