React의 힘 활용하기: useState 및 useEffect에 대한 종합 가이드

useState의 고급 사용 사례

1. 배열 및 개체 관리

상태에 있는 배열과 객체를 다룰 때는 이를 불변하게 업데이트하는지 확인해야 합니다. 이렇게 하면 버그로 이어질 수 있는 원치 않는 돌연변이를 방지할 수 있습니다.

객체 배열 관리

const [items, setItems] = useState([{ id: 1, name: 'Item 1' }]);

const addItem = (newItem) => {
  setItems(prevItems => [...prevItems, newItem]);
};

const removeItem = (id) => {
  setItems(prevItems => prevItems.filter(item => item.id !== id));
};

상태 개체 업데이트

const [user, setUser] = useState({ name: '', age: 0 });

const updateUser = (field, value) => {
  setUser(prevUser => ({ ...prevUser, [field]: value }));
};

2. 기능 업데이트

useState와 함께 기능 업데이트를 사용하면 특히 비동기 상황에서 현재 상태에 의존할 때 문제를 방지하는 데 도움이 될 수 있습니다.

const increment = () => {
  setCount(prevCount => prevCount + 1);
};

3. 지연 초기화

함수를 사용하여 초기 상태를 설정할 수 있는데, 이는 비용이 많이 드는 계산이나 props에서 초기값을 파생시킬 때 유용할 수 있습니다.

const [count, setCount] = useState(() => {
  const savedCount = localStorage.getItem('count');
  return savedCount ? JSON.parse(savedCount) : 0;
});

useState의 일반적인 패턴

1. 제어되는 구성요소

양식에서 useState를 사용하여 입력 제어:

const Form = () => {
  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}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
    </form>
  );
};

2. 디바운싱 입력

useState 및 useEffect를 사용하여 디바운스된 입력을 생성할 수 있습니다.

const DebouncedInput = () => {
  const [inputValue, setInputValue] = useState('');
  const [debouncedValue, setDebouncedValue] = useState(inputValue);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, 300);

    return () => {
      clearTimeout(handler);
    };
  }, [inputValue]);

  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );
};

useEffect에 대한 고급 사용 사례

1. 취소로 데이터 가져오기

데이터를 가져올 때 마운트 해제된 구성 요소에 상태가 설정되지 않도록 구성 요소 마운트 해제를 처리하는 것이 좋습니다.

useEffect(() => {
  let isMounted = true;

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    if (isMounted) {
      setData(result);
    }
  };

  fetchData();

  return () => {
    isMounted = false; // Cleanup
  };
}, []);

2. 이벤트 구독

WebSocket 연결이나 기타 외부 데이터 소스와 같은 이벤트를 구독할 수 있습니다.

useEffect(() => {
  const socket = new WebSocket('ws://example.com/socket');

  socket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    setMessages(prevMessages => [...prevMessages, message]);
  };

  return () => {
    socket.close(); // Cleanup on unmount
  };
}, []);

3. 애니메이션과 DOM 조작

useEffect를 애니메이션이나 직접적인 DOM 조작에 사용할 수 있습니다.

useEffect(() => {
  const element = document.getElementById('animate');
  element.classList.add('fade-in');

  return () => {
    element.classList.remove('fade-in'); // Cleanup
  };
}, []);

일반적인 함정

1. 종속성 배열 누락

종속성 배열을 생략하면 렌더링할 때마다 효과가 실행되어 잠재적으로 성능 문제가 발생할 수 있습니다.

// Avoid this if you only want it to run once
useEffect(() => {
  // Logic here
});

2. 잘못된 종속성 목록

효과 내부에 사용되는 모든 변수를 포함해야 합니다.

useEffect(() => {
  console.log(value); // Make sure 'value' is included in the dependency array
}, [value]); // Include all dependencies

3. 이전 상태를 기반으로 상태 업데이트

오래된 클로저를 방지하려면 이전 값을 기반으로 상태를 업데이트할 때 항상 setter의 기능적 형식을 사용하세요.

setCount(prevCount => prevCount + 1); // Correct

결론

useState와 useEffect는 모두 상태를 관리하고 기능적 구성요소의 부작용을 효과적으로 처리할 수 있게 해주는 React의 필수 후크입니다. 고급 사용 사례와 패턴을 이해하면 더 깔끔하고 효율적인 React 코드를 작성하는 데 도움이 됩니다.

위 내용은 React의 힘 활용하기: useState 및 useEffect에 대한 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!