4.React State의 모든 것: 컴포넌트 내부 데이터 관리하기

React State의 모든 것: 컴포넌트 내부 데이터 관리하기

---

1시간 분량 강의안 (State 기초)

강의 목표

1. React State의 개념과 역할을 이해한다.
2. State를 사용하여 컴포넌트 내부 데이터를 관리하는 방법을 학습한다.
3. 실습을 통해 State를 활용한 동적인 UI를 구현한다.

---

강의 목차

---

1. React State란 무엇인가? (15분)

State의 정의

• State는 React 컴포넌트에서 데이터를 동적으로 관리하는 객체입니다.
• 컴포넌트의 내부 상태를 나타내며, 변경 시 컴포넌트가 다시 렌더링됩니다.
• React의 State는 **불변성(immutability)**을 유지해야 하며, 직접 변경하지 않고 setState나 useState와 같은 방법으로 업데이트합니다.

State의 주요 특징

1. 컴포넌트 내부 데이터: 컴포넌트의 로컬 상태를 관리.
2. 동적 UI 생성: State 변경에 따라 UI가 업데이트됨.
3. 비동기 업데이트: React는 State 변경을 비동기로 처리.

State를 사용하는 이유

• React 애플리케이션은 동적인 데이터를 필요로 합니다.
• 사용자 입력, 서버 응답, 버튼 클릭 등의 상태 변화를 관리하기 위해 State가 필요합니다.

---

2. State 사용법 (20분)

1단계: State 설정

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

   // src/components/counter.js
   
   import React, { useState } from 'react';
   
   function Counter() {
     const [count, setCount] = useState(0); // 초기값 0
     return (
       <div>
         <p>현재 카운트: {count}</p>
         <button onClick={() => setCount(count + 1)}>증가</button>
       </div>
     );
   }
   
   export default Counter;

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

// src/components/counter.js

import React, { Component } from 'react';

class Counter extends 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>
    );
  }
}

export default Counter;

// src/App.js

import Counter from './components/counter'

function App() {
   return (
      <Counter />
   );
}

export default App;

초기 화면

'증가'버튼 클릭 횟수만큼 현재 카운트가 증가된 모습

2단계: State 업데이트

• setState(클래스) 또는 setCount(함수형)는 State를 변경하고 UI를 다시 렌더링합니다.
• State는 항상 불변성을 유지해야 합니다.

3단계: 여러 개의 State 관리

1. 함수형 컴포넌트:

// src/components/userinfo.js

import react, { useState } from 'react';

function UserInfo() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  return (
    <div>
      <input
        type="text"
        placeholder="이름"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="number"
        placeholder="나이"
        value={age}
        onChange={(e) => setAge(Number(e.target.value))}
      />
      <p>
        이름: {name}, 나이: {age}
      </p>
    </div>
  );
}

export default UserInfo;

 

// src/App.js

import Counter from './components/userinfo'

function App() {
   return (
      <Counter />
   );
}

export default App;

초기 실행 화면

인풋박스에 값 입력 즉시 입력한 값이 출력된 모습

---

3. State와 Props 비교 (10분)

항목StateProps

데이터 소유	컴포넌트 내부에서 소유하고 관리	부모 컴포넌트에서 자식 컴포넌트로 전달
변경 가능 여부	컴포넌트 내부에서 변경 가능	읽기 전용, 변경 불가
사용 목적	동적 데이터 관리	컴포넌트 간 데이터 전달

---

4. State 활용 실습 (10분)

실습 과제

1. 버튼 클릭 시 숫자가 증가하고, "짝수" 또는 "홀수"를 표시하는 컴포넌트를 작성하세요.
2. 사용자 입력에 따라 상태(State)를 업데이트하고 화면에 실시간으로 반영하세요.

예제

• 실습 1번의 예제:

// src/components/counter.js

import react, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <p>{count % 2 === 0 ? '짝수' : '홀수'}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default Counter;

// src/App.js

import Counter from './components/counter'

function App() {
   return (
      <Counter />
   );
}

export default App;

초기화면

증가 버튼 클릭후, 현재 카운트가 홀수/짝수인지 구분하여 출력 된 모습

---

5. Q&A 및 정리 (10분)

• Q&A:
  1. State를 직접 변경하면 안 되는 이유는 무엇인가요?
  2. State와 Props를 함께 사용해야 하는 경우는 어떤 경우인가요?
• 요약:
  • State는 컴포넌트 내부에서 데이터를 동적으로 관리하기 위한 React의 핵심 기능입니다.
  • State 변경은 UI 업데이트를 트리거하며, React의 불변성 원칙을 따라야 합니다.