[🍎코딩애플 강의요약]React에서 input 데이터 처리하기⌨️

input 기본 개념 이해하기 🧩

다양한 입력 태그들 📋

<input type="text"/>     // 텍스트 입력
<input type="range"/>    // 슬라이더
<input type="date"/>     // 날짜 선택
<input type="number"/>   // 숫자 입력
<textarea></textarea>    // 여러 줄 텍스트
<select></select>        // 드롭다운 선택

• 필요에 따라 다양한 타입의 input 사용 가능 🎛️

이벤트 핸들링 다루기 🛠️

input 변경 감지하기 🔄

<input onChange={()=>{ 실행할코드 }}/>

• onChange 또는 onInput: 입력값 변경될 때마다 코드 실행 📊
• 다른 이벤트 핸들러: onMouseOver, onScroll 등 다양하게 존재 🖱️

입력값 가져오기 📥

<input onChange={(e)=>{ console.log(e.target.value) }}/>

• 이벤트 객체 e를 통해 현재 입력값에 접근 📝
• e.target.value: 현재 input에 입력된 값 📄
• 이벤트 객체의 다른 기능들:
  • e.target: 이벤트가 발생한 요소
  • e.preventDefault(): 기본 동작 방지
  • e.stopPropagation(): 이벤트 버블링 방지

입력 데이터 저장하기 💾

state에 입력값 저장 🔄

function App() {
  let [입력값, 입력값변경] = useState('');
  return (
    <input onChange={(e)=>{ 
      입력값변경(e.target.value);
      console.log(입력값);
    }} />
  )
}

• 빈 문자열('')로 state 초기화 🔠
• onChange 이벤트에서 입력값을 state로 업데이트 🔄
• 주의: setState 함수는 비동기적으로 처리됨 ⚠️
  • console.log가 state 업데이트 전에 실행되어 한 글자 뒤쳐진 값 출력

응용: 블로그 글 추가/삭제 기능 구현 📝

글 추가 기능 구현 ➕

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');

  return (
    <div>
      <div className="publish">
        <input onChange={(e)=>{ 입력값변경(e.target.value) }} />
        <button onClick={()=>{ 
          // 1. 기존 글제목 배열 복사
          let copy = [...글제목]; 
          // 2. 복사한 배열에 새 글 추가
          copy.unshift(입력값);
          // 3. state 업데이트
          글제목변경(copy);
          // 4. input 초기화
          입력값변경('');
        }}>발행</button>
      </div>
      
      {/* 글 목록 표시 */}
      {
        글제목.map(function(a, i) {
          return (
            <div className="list" key={i}>
              <h4>{a}</h4>
              <p>2월 18일 발행</p>
            </div>
          )
        })
      }
    </div>
  )
}

글 삭제 기능 구현 ➖

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');

  return (
    <div>
      {/* 입력 부분 생략 */}
      
      {/* 글 목록과 삭제 버튼 */}
      {
        글제목.map(function(a, i) {
          return (
            <div className="list" key={i}>
              <h4>{a}</h4>
              <p>2월 18일 발행</p>
              <button onClick={()=>{ 
                // 1. 기존 배열 복사
                let copy = [...글제목]; 
                // 2. i번째 요소 삭제
                copy.splice(i, 1); 
                // 3. state 업데이트
                글제목변경(copy);
              }}>삭제</button>
            </div>
          )
        })
      }
    </div>
  )
}

강의 내용 검토 🔍

Claude.ai 에서 제시한 강의에서 보충하면 좋은 내용

1. 리액트 방식 설명 부족: 강의에서는 input 처리가 일반 JavaScript와 비슷하다고 설명하지만, React에서 권장하는 제어 컴포넌트(Controlled Component) 개념에 대한 설명이 부족합니다. ⚠️

2. 양방향 바인딩 누락: input의 value 속성을 state와 연결하여 양방향 바인딩을 구현하는 방법에 대한 설명이 없습니다. 이로 인해 입력 필드 초기화가 어려울 수 있습니다. 🔄

3. 폼 제출 처리 미설명: 일반적으로 입력은 폼 내에서 이루어지며, onSubmit 이벤트 처리 방법과 폼 기본 동작 방지(e.preventDefault())에 대한 실제 활용 예시가 부족합니다. 📝

추가 정보 및 팁 💡

제어 컴포넌트(Controlled Component) 구현 🎮

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');

  return (
    <div>
      <div className="publish">
        {/* value 속성을 state와 연결 */}
        <input 
          value={입력값} 
          onChange={(e)=>{ 입력값변경(e.target.value) }} 
        />
        <button onClick={()=>{ 
          // 빈 값이 아닐 때만 추가
          if (입력값.trim() !== '') {
            let copy = [...글제목]; 
            copy.unshift(입력값);
            글제목변경(copy);
            입력값변경(''); // input 초기화 작동
          }
        }}>발행</button>
      </div>
      
      {/* 나머지 코드 생략 */}
    </div>
  )
}

• value={입력값}: input의 값을 state와 연결하여 양방향 바인딩 구현 🔄
• 입력값 초기화 가능 및 state 기반 입력값 제어 가능 ✅

폼 제출 활용하기 📋

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');

  // 폼 제출 처리 함수
  const handleSubmit = (e) => {
    e.preventDefault(); // 페이지 새로고침 방지
    
    if (입력값.trim() !== '') {
      let copy = [...글제목]; 
      copy.unshift(입력값);
      글제목변경(copy);
      입력값변경('');
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input 
          value={입력값} 
          onChange={(e)=>{ 입력값변경(e.target.value) }} 
        />
        <button type="submit">발행</button>
      </form>
      
      {/* 나머지 코드 생략 */}
    </div>
  )
}

• onSubmit 이벤트 사용으로 Enter 키 입력으로도 제출 가능 ⌨️
• e.preventDefault()로 폼 제출 시 페이지 새로고침 방지 ⚠️

입력값 유효성 검사 추가 ✅

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');
  let [오류메시지, 오류메시지변경] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // 유효성 검사
    if (입력값.trim() === '') {
      오류메시지변경('글 제목을 입력해주세요');
      return;
    }
    
    if (입력값.length > 20) {
      오류메시지변경('글 제목은 20자 이내로 작성해주세요');
      return;
    }
    
    // 유효성 검사 통과 시
    let copy = [...글제목]; 
    copy.unshift(입력값);
    글제목변경(copy);
    입력값변경('');
    오류메시지변경('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input 
          value={입력값} 
          onChange={(e)=>{ 
            입력값변경(e.target.value);
            오류메시지변경(''); // 입력 시 오류 메시지 초기화
          }} 
        />
        <button type="submit">발행</button>
        {오류메시지 && <p className="error">{오류메시지}</p>}
      </form>
      
      {/* 나머지 코드 생략 */}
    </div>
  )
}

• 입력값에 대한 유효성 검사 추가 🛡️
• 오류 메시지 표시로 사용자에게 피드백 제공 💬
• 입력 시 오류 메시지 초기화로 사용자 경험 개선 👍