GPT로 배워보는 리액트 - 4

지선생님과 함께 상태와 이벤트 처리까지 배워봤습니다.

 

이번엔 렌더링과 key, 이벤트 처리 심화, 폼 제출 이벤트와 데이터 검증 에 대해 배워볼거에요.

 

 

- 렌더링과 키

 

리스트 렌더링과 key속성에 대해 알아본다고 하네여.

 

코드는 아래와 같습니다.

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState(['Learn React', 'Build a Project', 'Have Fun']);
  const [newTodo, setNewTodo] = useState('');

  // 새로운 할 일 추가 함수
  const addTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, newTodo]);
      setNewTodo(''); // 입력 필드 초기화
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="Enter new task"
      />
      <button onClick={addTodo}>Add Todo</button>
    </div>
  );
}

export default TodoList;

 

• todos는 할 일 목록을 저장하는 배열 상태에요.
• newTodo는 새로운 할 일 항목을 임시로 저장하는 상태에요.
• addTodo 함수는 newTodo값이 공백이 아닐 때만 todos 배열에 추가하고, 입력 필드를 초기화해요.

map()을 사용해 todos배열의 각 항목을 <li> 요소로 렌더링 하고 있어요.

각 <li>에 key 속성으로 index를 부여하여 리액트가 각 항목을 고유하게 식별할 수 있도록 했다고 하네여.

 

이제 TodoList컴포넌트를 App.js에 추가해줍니다.

 

코드

// src/App.js
import React from 'react';
import TodoList from './TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

 

서버를 실행하고 들어가보면?

 

이제 하나를 추가해볼게여.

 

잘되는데? 좋은데~?

이런식으로 key속성은 리액트가 각 리스트 항목을 효율적으로 업데이트 할 수 있도록 도와준다고 해요.

실제로는 배열의 인덱스보다는 고유한 ID를 key로 사용하는 것이 더 좋다고 하네요 지선생님이.

인덱스를 사용하면 리스트 항목의 순서가 바뀌거나 삭제될 때 예기치 않은 문제가 발생할 수 있기 때문이라고 합니다.

 

이제 다음은 이벤트 처리 심화!

---

 

- 이벤트 처리 심화

 

이번에는 이벤트 처리를 통해 텍스트 입력받고, 체크박스, 드롭다운 이런거 관리한다고 하네요.

 

바로 해봐 그냥

 

 

코드

import React, { useState } from 'react';

function FormExample() {
  const [text, setText] = useState('');
  const [isChecked, setIsChecked] = useState(false);
  const [selectedOption, setSelectedOption] = useState('option1');

  // 입력 필드 이벤트 처리
  const handleTextChange = (e) => {
    setText(e.target.value);
  };

  // 체크박스 이벤트 처리
  const handleCheckboxChange = (e) => {
    setIsChecked(e.target.checked);
  };

  // 드롭다운 메뉴 이벤트 처리
  const handleSelectChange = (e) => {
    setSelectedOption(e.target.value);
  };

  return (
    <div>
      <h1>Form Example</h1>
      
      {/* 텍스트 입력 필드 */}
      <label>
        Text:
        <input type="text" value={text} onChange={handleTextChange} />
      </label>
      <p>Entered Text: {text}</p>

      {/* 체크박스 */}
      <label>
        <input type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
        Accept Terms
      </label>
      <p>Checkbox is {isChecked ? 'checked' : 'unchecked'}</p>

      {/* 드롭다운 메뉴 */}
      <label>
        Select Option:
        <select value={selectedOption} onChange={handleSelectChange}>
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>
      </label>
      <p>Selected Option: {selectedOption}</p>
    </div>
  );
}

export default FormExample;

 

• 텍스트 입력 필드 : onChange 이벤트 핸들러 handleTextChange로 입력된 값을 text 상태에 업데이트한대여
• 체크박스 : onChange 이벤트 핸들러 handleCheckboxChange로 체크 여부를 isChecked 상태에 저장한대여.
• 드롭다운 메뉴 : onChange 이벤트 핸들러 handleSelectChange로 선택된 옵션을 selectedOption 상태에 업데이트 한대여.

App에 추가하고 확인해볼게여.

// src/App.js
import React from 'react';
import FormExample from './FormExample';

function App() {
  return (
    <div className="App">
      <FormExample />
    </div>
  );
}

export default App;

 

 

 

이제 텍스트 입력하고, 체크박스 체크하고, 드롭다운을 바꾸면?

각 요소의 밑에 상태를 표현해주는 곳도 바뀔거에요.

 

잘 되는데? 신기하네여.

 

이렇게 실시간으로 업데이트가 되나봐여. 잘 써먹어야 할텐데...

 

이제 오늘거 마지막! 폼 제출 이벤트와 데이터 검증을 해볼거에요.

 

---

 

- 폼 제출 이벤트 및 데이터 검증

 

간단하게 폼을 만들고 유효성검사? 하는걸 해보나봐요.

 

일단 해봐. 즉시.

 

코드

import React, { useState } from 'react';

function FormWithValidation() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  // 폼 제출 이벤트 핸들러
  const handleSubmit = (e) => {
    e.preventDefault(); // 폼의 기본 제출 동작을 막음

    // 유효성 검사
    if (name.trim() === '') {
      setError('Name is required.');
      return;
    }
    if (!email.includes('@')) {
      setError('Email must be valid.');
      return;
    }

    // 에러가 없으면 성공 메시지 표시
    setError('');
    alert(`Form submitted!\nName: ${name}\nEmail: ${email}`);
  };

  return (
    <div>
      <h1>Form with Validation</h1>
      <form onSubmit={handleSubmit}>
        {/* 이름 입력 */}
        <label>
          Name:
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </label>
        <br />

        {/* 이메일 입력 */}
        <label>
          Email:
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </label>
        <br />

        {/* 에러 메시지 */}
        {error && <p style={{ color: 'red' }}>{error}</p>}

        {/* 제출 버튼 */}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default FormWithValidation;

 

• handleSubmit : e.preventDefault()로 폼의 기본 제출 동작을 막고 유효성 검사를 하는 함수래여.
• 유효성 검사 : 이름이 비어있거나, 이메일에 @가 포함되지 않으면 에러메시지를 출력한다고 하네여.
• 에러 메시지 : error 상태에 에러 메시지를 저장하고, 이것을 화면에 표시해 사용자에게 알려준대여.

아 즉시 확인해봐

 

// src/App.js
import React from 'react';
import FormWithValidation from './FormWithValidation';

function App() {
  return (
    <div className="App">
      <FormWithValidation />
    </div>
  );
}

export default App;

 

 

 

 

이렇게 하고 예외상황을 만들어 볼게여

 

 

왼쪽은 아무것도 입력 안한건데 이름 먼저 체크를 해서 이름이 없다고 하네여.

오른쪽은 골뱅이 안넣어보니까 저렇게 잘 체크해주네여

 

이렇게 간단하게? 폼 제출과 유효성 검증을 해봤어요.

사용자 입력을 제어하고 검증하는 방법을 아주 간단하게 배워봤습니다.

이걸 좀 더 발전시키면 더 복잡한 폼이나 데이터 검증 로직도 구현할 수 있다고 하네여.

 

이제 다음 주제는 

 

 

 

이런걸 해보라고 하네여 지선생님이 !

 

그래서 그냥 하나하나 다 해보자고 했습니다.

 

째깐하게 만들었던 TodoList를 좀 더 고도화 하는것을 다음 포스트에 해보겠습니다!!

 

오늘은 끝.