저는 몇 년 동안 React 애플리케이션을 개발해 왔으며 프로젝트 개발 속도를 늦추는 수많은 실수를 겪었습니다.
React는 동적 사용자 인터페이스를 구축하는 데 가장 널리 사용되는 라이브러리 중 하나이지만 그 유연성은 신규 개발자에게 흔한 실수로 이어질 수도 있습니다.
이 가이드는 개발자가 React에서 저지를 수 있는 가장 큰 실수를 다루고 더 훌륭하고 효율적인 코드를 작성하기 위한 실행 가능한 팁을 제공합니다.
들어가자!
계속하기 전에 먼저 항목 목록을 표시하고 항목을 추가하거나 제거하는 React 구성 요소를 작성해 보겠습니다.
import { useState } from "react";
const Home = (props) => {
const [items, setItems] = useState(['item1', 'item2']);
const [itemToAdd, setItemToAdd] = useState('');
function wrongHandleAddItem(item) {
items.push(item);
setItems(items);
}
function goodHandleAddItem(item) {
if (item.length === 0)
return;
const newArray = [...items, item];
setItems(newArray);
setItemToAdd('');
}
function removeItem(item) {
const itemIndex = items.indexOf(item);
if (itemIndex !== -1) {
const newArray = [...items];
newArray.splice(itemIndex, 1);
setItems(newArray);
}
}
return (
<div>
<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>
<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
items.push(item);
setItems(items);
}
이 메서드가 수행하는 첫 번째 작업은 배열에 요소를 추가하기 위해 푸시 배열 함수를 호출하는 것입니다.
두 번째는 setItems를 호출하여 상태 변수에 변경 사항을 적용하는 것입니다.
그런데 이 코드를 실행해 보면 동작하지 않습니다 ❌
이 코드는 매우 중요한 React 규칙인 상태 변경을 위반합니다.
React는 상태 변수의 ID를 사용하여 상태가 변경된 시점을 알려줍니다. 항목을 배열에 푸시할 때 해당 배열의 ID가 변경되지 않으므로 React는 값이 변경되었음을 알 수 없으며 배열을 다시 렌더링할 수 없습니다.
수정 방법은 다음과 같습니다 ✅ :
function goodHandleAddItem(item) {
if (item.length === 0)
return;
const newArray = [...items, item];
setItems(newArray);
setItemToAdd('');
}
이 방법에서는 스프레드 연산자를 사용하여 새 배열을 만들었습니다. 항목의 내용으로 새 배열을 인스턴스화할 수 있습니다. 두 번째 매개변수는 새 콘텐츠(여기 항목)를 추가하는 데 사용됩니다.
마지막 단계는 setItems 메소드를 호출하여 변수 항목의 새 상태를 검증하는 것입니다 ✅
모든 React 개발자는 개발 과정에서 적어도 한 번은 이 오류를 본 적이 있을 것입니다.
이런 일이 발생하는 가장 일반적인 방법은 데이터를 매핑할 때입니다. 위반 사례는 다음과 같습니다.
items.map((item) => (
<div>
{item}
<button onClick={() => removeItem(item)}>-</button>
</div>
))}
요소 배열을 렌더링하려면 React가 각 항목을 식별할 수 있도록 좀 더 많은 컨텍스트를 제공해야 합니다. 가능한 한 고유 식별자여야 합니다.
다음은 이 문제를 해결하는 빠른 방법이지만 최적은 아닙니다.
items.map((item, index) => (
<div key={index} >
{item}
<button onClick={() => removeItem(item)}>-</button>
</div>
))}
React를 경험하고 그것이 어떻게 더 잘 작동하는지 이해하게 되면 귀하의 사례에 따라 괜찮은지 아닌지 알 수 있을 것입니다.
완벽하게 만들기 위해 crypto.randomUUID()와 같은 UUID 생성기를 사용하고 다음과 같이 항목 목록에 객체로 저장할 수 있습니다.
const newItemToAdd = {
id: crypto.randomUUID(),
value: item
};
const newArray = [...items, newItemToAdd];
setItems(newItems);
렌더링 중에 다음과 같이 사용하세요.
items.map((item, index) => (
<div key={item.id} >
{item.value}
<button onClick={() => removeItem(item)}>-</button>
</div>
))}
이제 모든 게 완벽해요 ✅
마운트 시 API에서 일부 데이터를 가져와야 하는 함수가 있다고 가정해 보겠습니다. useEffect 후크를 사용하고, wait 키워드를 사용하려고 합니다.
첫 번째 시도를 확인해보세요:
아시다시피, wait 키워드는 async 키워드가 표시된 함수에 있어야 합니다.
import { useState } from "react";
const Home = (props) => {
const [items, setItems] = useState(['item1', 'item2']);
const [itemToAdd, setItemToAdd] = useState('');
function wrongHandleAddItem(item) {
items.push(item);
setItems(items);
}
function goodHandleAddItem(item) {
if (item.length === 0)
return;
const newArray = [...items, item];
setItems(newArray);
setItemToAdd('');
}
function removeItem(item) {
const itemIndex = items.indexOf(item);
if (itemIndex !== -1) {
const newArray = [...items];
newArray.splice(itemIndex, 1);
setItems(newArray);
}
}
return (
<div>
<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>
<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
items.push(item);
setItems(items);
}
안타깝게도 이 방법은 작동하지 않으며 다음 오류 메시지가 표시됩니다.
function goodHandleAddItem(item) {
if (item.length === 0)
return;
const newArray = [...items, item];
setItems(newArray);
setItemToAdd('');
}
수정 사항은 다음과 같습니다: useEffect 후크 내에서 별도의 비동기 함수를 생성하세요 ✅
items.map((item) => (
<div>
{item}
<button onClick={() => removeItem(item)}>-</button>
</div>
))}
async 키워드가 의미하는 바를 이해하는 것이 중요합니다.
json 객체를 반환하지 않고 json 객체를 해결하는 Promise를 반환합니다.
useEffect는 Promise를 반환하지 않기 때문에 이는 실제로 문제입니다. 이는 우리가 아무것도 반환하지 않거나(위와 같이) 정리 함수를 반환할 것으로 기대합니다. 정리 기능은 중요합니다. 이 가이드의 범위를 벗어나지만 여기에서 사용합니다.
items.map((item, index) => (
<div key={index} >
{item}
<button onClick={() => removeItem(item)}>-</button>
</div>
))}
상태 관리로 돌아가서 새로운 개발자가 자주 범하는 흥미로운 실수를 하나 더 살펴보겠습니다. 이는 React 상태를 더욱 잘 이해하는 데 도움이 될 것입니다.
이를 설명하기 위해 goodHandleAddItem 메소드를 사용하겠습니다.
const newItemToAdd = {
id: crypto.randomUUID(),
value: item
};
const newArray = [...items, newItemToAdd];
setItems(newItems);
이 코드를 실행하면 콘솔이 예상한 결과를 기록하지 않는 것을 볼 수 있습니다.
여기에 문제가 있습니다: 상태 변수의 setter 함수는 비동기입니다.
setItems 메소드를 호출하면 실제로는 업데이트를 예약하고 변수를 할당하는 것이 아닙니다.
수정 사항은 다음과 같습니다: newArray 변수와 함께 변수의 내용이 무엇인지 이미 알고 있습니다. 즉, items 변수의 내용이 될 것으로 예상되는 데이터를 사용하려면 setItems ✅ 이후에도 대신 newArray 변수를 사용
해야 합니다.마지막 내용은 React 상태 관리에 관한 것입니다. 이 가이드를 읽고 나면 전문가가 될 것입니다! ?
React Hooks를 사용할 때 흔히 발생하는 함정은 오래된 상태 데이터를 오용하는 것입니다. 이는 연속적인 상태 업데이트에서 상태 변수를 직접 참조할 때 발생할 수 있습니다. 이전 오류에서 본 것처럼 상태 업데이트는 비동기식일 수 있습니다. 이는 상태 변수가 연속 호출에서 참조될 때 최신 값을 반영하지 않을 수 있음을 의미합니다.
상황을 더 명확하게 하기 위해 잘 알려진 카운터인 새로운 예를 사용해 보겠습니다.
items.map((item, index) => (
<div key={item.id} >
{item.value}
<button onClick={() => removeItem(item)}>-</button>
</div>
))}
위의 사용법이 올바르지 않습니다. 실제로 count는 setCount 호출 내에서 직접 참조됩니다. 이벤트 핸들러 및 수명 주기 메서드에서 상태 업데이트는 일괄 처리될 수 있으며 둘 다 count와 동일한 초기 값을 사용하므로 최종 상태가 잘못될 수 있습니다.
작업을 수행하는 데 사용할 수 있는 또 다른 형태의 setCount가 있습니다. 바로 업데이트 기능입니다. 업데이터 함수는 이전 상태를 인수로 사용하고 새 상태를 반환하므로 연속 업데이트할 때마다 올바른 값을 갖게 되어 원치 않는 동작을 방지할 수 있습니다.
사용 방법은 다음과 같습니다:
import { useState } from "react";
const Home = (props) => {
const [items, setItems] = useState(['item1', 'item2']);
const [itemToAdd, setItemToAdd] = useState('');
function wrongHandleAddItem(item) {
items.push(item);
setItems(items);
}
function goodHandleAddItem(item) {
if (item.length === 0)
return;
const newArray = [...items, item];
setItems(newArray);
setItemToAdd('');
}
function removeItem(item) {
const itemIndex = items.indexOf(item);
if (itemIndex !== -1) {
const newArray = [...items];
newArray.splice(itemIndex, 1);
setItems(newArray);
}
}
return (
<div>
<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>
<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
items.push(item);
setItems(items);
}
이제 count 내용을 기록하면 올바른 값이 표시됩니다 ✅
이러한 일반적인 실수를 피하면 더욱 성능이 뛰어난 React 애플리케이션을 개발하고 상태 관리를 마스터할 수 있습니다!
이 가이드가 여러분에게 도움이 되었기를 바라며 행복한 코딩 시간을 보내시기 바랍니다!
신규 또는 승인된 React 개발자로서 이 가이드가 마음에 드셨다면 좋아요를 남겨주세요.
곧 만나요!
위 내용은 React 개발에서 흔히 저지르는 실수와 이를 피하는 방법 ⚛️의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
