React 개발 시 흔히 저지르는 실수 5가지와 피하는 방법
2024-11-29 08:15:15React 개발 시 흔히 저지르는 실수 5가지와 피하는 방법
React는 동적 사용자 인터페이스를 구축하기 위한 가장 인기 있는 라이브러리 중 하나입니다. React의 유연성은 새로운 개발자가 자주 빠지는 몇 가지 공통적인 실수로 이끌기도 합니다. 이번 블로그에서는 React 개발 시 발생할 수 있는 주요 실수들과 이를 피하기 위한 실용적인 팁을 다룹니다. 자세한 내용을 아래에서 확인하세요.
1. 상태 변형(Mutating State)
React의 불변성을 유지하는 것은 상태 관리의 기본 원칙 중 하나입니다. 상태를 직접 변경하면 예상치 못한 문제를 일으킬 수 있습니다. 예를 들어, 배열의 push 메서드를 사용하여 상태를 변경하는 것은 React의 원칙에 어긋납니다. 대신, 상태를 변경할 때 항상 새로운 객체나 배열을 만들어야 합니다. Spread 연산자를 사용하여 기존 상태를 기반으로 새로운 배열을 생성하고, 이를 setState와 함께 사용하는 것이 권장됩니다.
잘못된 방법:
function wrongHandleAddItem(item) {
items.push(item);
setItems(items);
}
올바른 방법:
function goodHandleAddItem(item) {
if (item.length === 0) return;
const newArray = [...items, item];
setItems(newArray);
setItemToAdd('');
}
2. 목록 렌더링 시 Key 사용 누락
React에서 목록을 렌더링할 때는 각 항목에 고유한 key를 부여하는 것이 중요합니다. 이는 React가 UI 요소를 효율적으로 업데이트하고, 다시 그릴 수 있도록 도와줍니다. index를 key로 사용하는 것이 일반적이지만, 항목이 추가되거나 삭제될 때 그 순서가 변경될 수 있으므로 권장되지는 않습니다. UUID와 같은 고유 식별자를 사용하여 각 항목을 구분하는 것이 좋습니다.
3. useEffect에서의 비동기 처리(Async in useEffect)
React의 useEffect 훅은 비동기 작업을 처리할 때 약간의 주의가 필요합니다. 비동기 함수를 직접 전달할 경우 문제가 발생할 수 있습니다. 대신, useEffect 내에 비동기 함수를 정의하고 이를 호출함으로써 문제를 해결할 수 있습니다.
잘못된 방법:
useEffect(async () => {
const url = "/api/to/fetch";
const res = await fetch(url);
const json = res.json();
return json;
}, []);
올바른 방법:
useEffect(() => {
async function fetchData() {
const url = "/api/to/fetch";
const res = await fetch(url);
const json = await res.json();
// JSON 데이터 처리
}
fetchData();
}, []);
4. 리렌더링 전 상태 접근
컴포넌트가 리렌더링되기 전에는 상태 값이 최신 값으로 업데이트되지 않을 수 있습니다. setState가 비동기적으로 작동하기 때문에 상태가 업데이트된 후에 그 값을 사용하고자 할 때는 useEffect를 사용하거나 콜백 형태로 상태 업데이트 후 동작을 정의하는 것이 필요합니다.
5. 의존성 배열을 간과한 useEffect
useEffect 훅은 의존성 배열을 통해 언제 실행될지를 결정합니다. 배열에 필요한 모든 변수를 포함하지 않으면 useEffect가 의도한 대로 작동하지 않을 수 있습니다. 종종 의존성 배열에 필요한 값이 누락되어 불완전한 리렌더링이나 불필요한 컴포넌트 갱신이 발생할 수 있습니다. 이를 피하기 위해 의존성 배열은 항상 꼼꼼히 관리해야 합니다.
결론
React 애플리케이션을 개발할 때 이러한 일반적인 실수를 피하는 것은 중요한 일입니다. 위의 예시와 같이 실수를 피하고 React의 권장 방법에 따를 때 코드가 더 효율적으로 작동하며 유지보수 또한 용이해집니다. React를 더 깊이 이해하고 싶다면 아래의 자료들을 참고해 보세요.
참고할 만한 URL: