인터뷰를 위해 알아야 할 최고의 eact.js 코딩 과제!

1. React Hooks로 카운터 구축

도전: 버튼을 클릭한 횟수를 추적하는 간단한 React 구성요소를 작성하세요. 버튼을 누를 때마다 숫자가 늘어나야 합니다.

작업: useState 후크를 사용하여 이를 구현합니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;

이것이 중요한 이유: 이는 React의 상태 관리에 대한 가장 기본적인 예 중 하나입니다. 후크를 사용하여 동적 값을 쉽게 저장, 업데이트 및 표시하는 방법을 보여줍니다.

프로 팁: 카운트를 다시 0으로 설정하려면 "재설정" 버튼을 어떻게 추가하나요? 사용해 보세요!

---

2. 사용자 입력을 캡처하기 위한 양식 만들기

과제: 이름과 이메일이라는 두 개의 입력 필드가 있는 양식을 구현하세요. 값은 사용자가 입력할 때 동적으로 업데이트되어야 하며, 양식이 제출되면 입력한 데이터가 화면에 나타나야 합니다.

import React, { useState } from 'react';

const UserForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({ ...prevData, [name]: value }));
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UserForm;

이것이 중요한 이유: React에서 양식 입력을 처리하는 것은 특히 로그인 양식이나 검색 필드와 같이 사용자 상호 작용이 필요한 애플리케이션의 경우 중요한 기술입니다.

프로 팁: 양식 제출을 허용하기 전에 이메일 형식이 올바른지 확인하기 위해 어떻게 유효성 검사를 처리할 수 있나요?

---

3. 추가 및 제거 기능으로 할 일 목록 작성

챌린지: 사용자가 입력 필드에 입력하고 '추가'를 눌러 작업을 추가할 수 있는 할 일 목록을 만듭니다. 각 작업에는 작업을 삭제할 수 있는 "제거" 버튼이 있어야 합니다.

import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim()) {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  const removeTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  return (
    <div>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="Add a new task"
      />
      <button onClick={addTodo}>Add</button>

      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo} <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

이것이 중요한 이유: 목록 및 상태 업데이트 관리는 React 애플리케이션, 특히 동적 사용자 인터페이스 구축의 일반적인 작업입니다.

프로 팁: 빈 할 일 항목을 추가하려고 하면 어떻게 되나요? 이를 어떻게 방지할 수 있나요?

---

4. 검색 입력에 디바운싱 구현

과제: 사용자가 입력을 멈춘 후 검색을 수행하기 전에 500ms를 기다리는 검색 입력을 구축하세요(상태 업데이트로 시뮬레이션). 이를 위해 useEffect를 사용하세요.

import React, { useState, useEffect } from 'react';

const Search = () => {
  const [query, setQuery] = useState('');
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setSearchTerm(query);
    }, 500);

    return () => clearTimeout(timeoutId);
  }, [query]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <p>Results for: {searchTerm}</p>
    </div>
  );
};

export default Search;

중요한 이유: 불필요한 API 호출을 방지하고 성능과 사용자 경험을 개선하려면 검색 필드에서 디바운싱이 필수적입니다.

프로 팁: 사용자가 입력하는 동안 로딩 표시기를 추가하여 이를 어떻게 개선할 수 있나요?

---

5. "안녕하세요"와 "안녕" 메시지 간 전환

챌린지: 버튼 토글에 따라 "안녕하세요" 또는 "안녕"을 표시하는 구성 요소를 만듭니다. 버튼을 클릭할 때마다 메시지가 전환되어야 합니다.

import React, { useState } from 'react';

const ToggleMessage = () => {
  const [showHello, setShowHello] = useState(true);

  return (
    <div>
      <p>{showHello ? 'Hello' : 'Goodbye'}</p>
      <button onClick={() => setShowHello(!showHello)}>
        Toggle Message
      </button>
    </div>
  );
};

export default ToggleMessage;

이것이 중요한 이유: 조건부 렌더링은 React 성능의 핵심 부분이며 이 과제는 상태에 따라 표시되는 내용을 변경하는 방법을 확고히 하는 데 도움이 됩니다.

프로 팁: "Hello"가 파란색으로, "Goodbye"가 빨간색으로 표시되도록 어떻게 수정하시겠습니까?

---

호기심을 위한 보너스 챌린지:
이러한 각 구성 요소에 대해 논리를 어떻게 리팩터링하여 문제를 분리하고 코드를 더 쉽게 재사용할 수 있도록 하시겠습니까? 적절한 경우 맞춤형 후크를 생성해 보세요!

---

위 내용은 인터뷰를 위해 알아야 할 최고의 eact.js 코딩 과제!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!