State를 사용해 Input 다루기

React란 무엇인가?

• JavaScript 기반의 사용자 인터페이스(UI) 라이브러리

• 선언적 프로그래밍 방식으로 UI 작성

React의 장점

1. 코드 간결성: 복잡한 UI 로직도 간단히 작성 가능

2. 유지보수성: 코드가 직관적이어서 다른 개발자와 협업하기 쉬움

3. 재사용성: 컴포넌트 단위로 설계하므로, 코드 재사용이 용이

4. 빠른 UI 업데이트: React가 효율적으로 DOM 업데이트를 관리

핵심 개념: 명령형 vs 선언형 UI

명령형 프로그래밍이란? (Before React)

명령형 프로그래밍에서는 모든 단계를 개발자가 직접 명시해야 함

이 방식은 간단한 UI에는 적합하지만, UI 상태가 복잡해질수록 유지보수가 어려워짐

예시: 명령형 UI 업데이트

function updateUI(status) {
  if (status === 'loading') {
    disable(button);
    show(loadingMessage);
  } else if (status === 'error') {
    hide(loadingMessage);
    show(errorMessage);
  }
}

• 각 상태마다 직접 DOM 조작이 필요

• 상태가 많아질수록 코드가 복잡해지고 버그 가능성 증가

선언형 프로그래밍이란? (React)

선언형 프로그래밍에서는 원하는 상태만 선언

React가 그 상태에 맞게 UI를 자동으로 업데이트

예시: 선언형 UI 업데이트 (React)

function Form() {
  const [status, setStatus] = useState('typing');

  return (
    <form>
      <button disabled={status === 'submitting'}>
        Submit
      </button>
      {status === 'loading' && <LoadingSpinner />}
      {status === 'error' && <ErrorMessage />}
    </form>
  );
}

• 상태에 따라 렌더링할 UI만 정의

• React가 상태를 감지하고 필요한 부분만 업데이트

핵심 비교

명령형 프로그래밍	선언형 프로그래밍
개발자가 모든 단계를 직접 명시	원하는 상태만 정의
상태 복잡도 증가 시 관리 어려움	코드 간결, 이해 쉬움
DOM을 직접 조작	React가 UI 자동 업데이트

React로 컴포넌트 설계하기: 5단계

React로 컴포넌트를 설계할 때는 시각적 상태(State)와 그 변화를 중심으로 생각

1️. 시각적 상태(State) 확인하기

컴포넌트가 어떤 상태를 가질 수 있는지 먼저 정의

• 상태란 UI가 어떻게 보이는지 결정하는 데이터

• 명확히 정의하고, 각 상태가 무엇을 나타내는지 파악하는 것이 핵심!

예시: 폼의 상태

• Empty: 아무것도 입력되지 않음

• Typing: 사용자가 입력 중 (입력값이 변경될 때마다 상태가 이 값으로 변경)

• Submitting: 폼 제출 중 (사용자가 제출 버튼을 클릭한 후)

• Success: 서버에서 응답을 받았고, 폼 제출이 성공적으로 완료됨

• Error: 서버에서 오류가 발생하여 제출이 실패함

2️. State 변화 트리거 식별하기

상태를 변화시키는 트리거(Trigger)를 식별

트리거들은 UI가 어떻게 변할지 결정하는 핵심 요소

1. 사용자 입력: 사용자의 직접적인 행동에 의해 상태가 변화

   • 예: 버튼 클릭, 텍스트 입력, 체크박스 체크 등.

2. 시스템 이벤트: 시스템(서버나 네트워크 등)의 상태 변화에 의해 상태가 변함

   • 예: 서버 응답, 네트워크 연결 상태 변경 등

예시: 폼 상태 변화 트리거

• Typing → Submitting: 사용자가 텍스트 입력을 완료하고 "Submit" 버튼을 클릭하면 상태는 "Submitting"으로 변경

• Submitting → Success: 폼이 서버로 제출되고 서버에서 성공적인 응답을 받으면 상태가 "Success"로 변경

• Submitting → Error: 서버 응답이 실패하여 오류가 발생하면 상태가 "Error"로 변경

이러한 트리거들은 React에서 useState와 같은 상태 관리 훅을 사용

⇒ 변화를 추적하고 관리

3️. useState로 메모리 상태 표현하기

React에서 상태를 관리하기 위해 useState를 사용

컴포넌트는 상태에 따라 UI를 렌더링

function Form() {
  const [status, setStatus] = useState('typing');
  const [answer, setAnswer] = useState('');

  return (
    <form>
      <input
        value={answer}
        onChange={(e) => setAnswer(e.target.value)}
      />
      <button disabled={status === 'submitting'}>
        Submit
      </button>
    </form>
  );
}

4️. 불필요한 State 제거하기

중복되거나 불필요한 상태는 제거

React에서는 상태를 최소화하는 것이 중요

잘못된 예시: 중복 상태

const [isTyping, setIsTyping] = useState(false);
const [input, setInput] = useState('');

function handleInputChange(e) {
  setInput(e.target.value);
  setIsTyping(true);
}

isTyping은 input 값으로 유추할 수 있으므로 불필요

개선된 코드

const [input, setInput] = useState('');

function handleInputChange(e) {
  setInput(e.target.value);
}

5️. 이벤트 핸들러로 상호작용 정의하기

사용자의 행동에 따라 상태를 업데이트하는 이벤트 핸들러를 작성

이벤트 핸들러는 상태를 변화시키는 트리거 역할을 함

import React, { useState } from "react";

export default function SimpleForm() {
  const [inputValue, setInputValue] = useState(""); 
  const [submittedValue, setSubmittedValue] = useState(""); 
 
  // 입력 필드가 변경될 때 호출되는 함수
  const handleInputChange = (e) => {
    setInputValue(e.target.value); // 입력 값을 업데이트
  };

  // 버튼 클릭 시 호출되는 함수
  const handleSubmit = () => {
    setSubmittedValue(inputValue); // 입력 값을 제출된 값으로 업데이트
  };

  return (
    <div>
      <h1>예시 예제</h1>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange} 
      />
      <button onClick={handleSubmit}>Submit</button> 
      <p>Submitted Value: {submittedValue}</p> 
    </div>
  );
}

내가 헷갈렸던 부분 정리!

1. React의 선언적 프로그래밍이 왜 중요한가요?

   • UI 상태를 명확하게 선언하므로 코드가 간결하고 직관적

   • React가 DOM을 효율적으로 관리하므로 성능도 좋아짐

2. 불필요한 상태 제거는 왜 중요한가요?

   • 상태가 많을수록 관리가 어렵고, 버그 발생 가능성이 높아짐

   • 최소한의 상태로도 충분히 UI를 설계할 수 있음

3. React의 useState는 어떤 역할을 하나요?

   • 컴포넌트의 시각적 상태를 저장

   • 상태가 바뀌면 React가 자동으로 UI를 업데이트