(예제 풀어보고, 코드 추가 하기) 리액트 공부하기 - state

---

1. state란?

2. 어떻게 사용 하는가?

3. 연습해볼 수 있는 예제

---

🧞state란?

→ 컴포넌트 내에서 변할 수 있는 데이터.

 

→ state란 React 컴포넌트의 상태를 의미. 컴포넌트의 기억 저장소라고 생각할 수 있다.

예를 들면 쇼핑몰에서 찜 버튼을 클릭하면 해당 상품이 나의 찜 목록에 추가되는 동작처럼 동적으로 변경되어야 하는 데이터를 사용할 때에 state를 사용한다 :)

쉽게 말하면, 컴포넌트의 변경할 수 있는 데이터는 state!

state가 변경되면 컴포넌트는 리 렌더링되기 때문에 데이터 흐름에 사용되는 값만 ****state에 포함해야 한다.

 

🧞어떻게 사용할까?

→ useState 훅!

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0); // 초기값 0

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

 

→ 구조 이해 하기.

useState(초기값) → 배열 반환

[state값, state를바꾸는함수]

 

🧞기본 문법

function MyComponent (){
const [상태, 상태변경함수] = useState(상태값)


const componetMethod = () => {
상태 변경함수(새로운 상태값) }

return (표시할 요소, 컴포넌트)
}

 

---

🧞연습할 수 있는 예제

1. 카운터 앱

버튼을 누를 때마다 숫자가 1씩 증가하는 기능

기능:

- 버튼 누르면 숫자 증가

- 버튼 누르면 숫자 감소

- Reset 버튼으로 초기화

 

2. 토글 버튼

버튼을 누르면 "ON"과 "OFF"가 바뀜

기능:

- 버튼을 클릭할 때마다 상태가 true/false 전환

- 텍스트가 “ON” 또는 “OFF”로 표시됨

 

3. 입력값 표시하기

사용자가 입력한 텍스트를 바로 아래에 실시간으로 보여줌

기능:

-input에 글자를 입력하면

- 아래에 입력한 텍스트가 실시간으로 보임

 

4. 간단한 Todo 리스트

할 일을 입력하고 버튼을 누르면 리스트에 추가

기능:

- input에 입력한 텍스트를 "추가" 버튼으로 리스트에 추가

- 리스트가 아래에 표시됨

 

5. 간단한 좋아요 버튼

“좋아요” 버튼 누를 때마다 숫자 증가

기능:

- ❤️ 버튼을 누르면 좋아요 숫자가 올라감