[React] (리액트 공부하기 13) state와 useState

1. state란 무엇인가?

state는 리액트 컴포넌트에서 변경 가능한 데이터를 관리하는 데 사용되는 객체이다.

상태(state)의 역할:

• 컴포넌트의 현재 상태를 저장.
• 사용자와의 상호작용이나 이벤트 발생에 따라 값이 변경될 수 있음.
• 값이 변경될 때 자동으로 화면(UI)을 다시 렌더링.

---

2. 왜 state가 필요한가?

(1) 동적인 UI를 만들기 위해

단순히 정적인 텍스트나 이미지를 표시하는 것이 아니라, 상태가 변할 때 UI도 변경되도록 하려면 state가 필요하다.

예: 클릭 카운터 만들기

• 버튼을 클릭할 때마다 클릭 횟수가 증가해야 한다고 가정한다.
• 이 클릭 횟수는 계속 변화하므로, 이를 state로 관리한다.

---

3. 함수형 컴포넌트에서 state 사용: useState

리액트에서는 함수형 컴포넌트에서 state를 사용하기 위해 useState라는 Hook을 사용한다.

useState란?

• 함수형 컴포넌트에서 state를 선언하고 관리하기 위한 함수.
• 사용법:

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

• state: 현재 상태 값을 나타낸다.
• setState: 상태를 업데이트하는 함수이다.

---

4. 예제: 클릭 카운터 만들기

아래는 useState를 사용하여 클릭 횟수를 관리하는 예제이다.

import React, { useState } from "react";

function Counter() {
  // useState를 사용하여 count 상태 선언, 초기값은 0
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>총 {count}번 클릭했습니다. </p>
	  <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
}

export default Counter;

코드 설명:

1. const [count, setCount] = useState(0);

• count: 현재 클릭 횟수 상태를 저장
• setCount: 클릭 횟수를 업데이트 하는 함수.
• 0: 초기 상태 값.

2. 버튼 클릭 이벤트

• 사용자가 버튼을 클릭하면 setCount(count + 1)이 호출된다.
• count 값이 1증가하고 화면이 다시 렌더링 된다.

3. 화면에 표시

• <p> 태그는 count값이 변경될 때마다 자동으로 업데이트 된다.

---

5. 왜 useState를 써야 하나요?

(1) 자동 렌더링

useState를 사용하면 React가 상태 변경을 감지하고, 변경된 값만 업데이트 한다.
일반 변수를 사용하면 변경 사항이 화면에 반영하지 않는다.

잘못된 방법(일반 변수 사용):

function Counter() {
  let count = 0;

  return (
    <div>
      <p>총 {count}번 클릭했습니다.</p>
      <button onClick={() => count++}>클릭</button> {/* 동작하지 않음 */}
    </div>
  );
}

• count++로 값을 변경해도 화면이 다시 렌더링 되지 않는다.
• React는 useState를 통해서만 상태 변경을 추적한다.

---

6. 클래스 컴포넌트와의 차이점

클래스 컴포넌트에서 state 사용:

class Counter extends React.Component {
 constructor(props) {
  super(props);
   this.state = { count: 0 };
 }
  
  render() {
   return (
     <div>
       <p>총 {this.state.count}번 클릭했습니다.</p>
	   <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         클릭
	   </button>
     </div>
     );
  }
}

• 클래스 컴포넌트에서는 this.state와 this.setState()를 사용한다.
• 함수형 컴포넌트는 이를 단순화한 useState를 제공한다.

7. 정리

• state는 컴포넌트의 동적인 데이터를 관리한다.
• 함수형 컴포넌트에서는 useState를 사용하여 상태를 선언하고 관리한다.
• 상태 변경 시 setState를 사용해야 React가 변경 사항을 감지하고 렌더링 한다.

---

8. 추가 예제: 좋아요 버튼

import React, { useState } from "react";

function LikeButton() {
    const [liked, setLiked] = useState(false);

    return (
        <button onClick={() => setLiked(!liked)}>
            {liked ? "좋아요 취소" : "좋아요"}
        </button>
    );
}

export default LikeButton;

---

9. Hooks란 무엇인가요?

• Hook는 함수형 컴포넌트에서 state와 생명주기 메서드 같은 기능을 사용할 수 있도록 해준다.
• useState는 가장 기본적인 Hook으로, 상태 관리를 제공한다.