새로운 리액트 문서에서 제시하는 9가지 권장 사항 #26
Replies: 4 comments 8 replies
-
2. 컴포넌트를 정의할 때는 다른 컴포넌트나 함수안에 중첩되지 않도록 하고 파일/모듈의 최상위 레벨에 정의하세요.BADfunction ParentComponent() {
// 부모 컴포넌트가 렌더링될 때마다 ChildComponent가 다시 선언됨
function ChildComponent() {
return <div>I'm a child component</div>;
}
return <div><ChildComponent /></div>;
}이 코드에서는 ParentComponent가 리렌더링될 때마다 ChildComponent도 새롭게 정의됨. GOODfunction ChildComponent() {
return <div>I'm a child component</div>;
}
function ParentComponent() {
return <div><ChildComponent /></div>;
} |
Beta Was this translation helpful? Give feedback.
-
|
핵심은 컴포넌트를 정의할 때 가능한 한 다른 함수나 컴포넌트 안에 중첩하지 말고 최상위 레벨에 선언하여 불필요한 리렌더링을 방지하라는 것. |
Beta Was this translation helpful? Give feedback.
-
|
https://react.dev/learn/your-first-component#nesting-and-organizing-components |
Beta Was this translation helpful? Give feedback.
-
최상위 레벨에서 선언하면 불필요한 리렌더링이 방지되는 이유?
|
Beta Was this translation helpful? Give feedback.
-
6. 프로퍼티 변경에 따라 상태를 조정해야 하는 경우 effect가 아닌 컴포넌트 함수에(렌더링 중에) 직접 상태를 설정하세요.// 🛑 잘못된 코드
function List({ items }) {
const [selection, setSelection] = useState(null);
useEffect(() => {
setSelection(null);
}, [items]);
//...
}
// 🟢 올바른 코드
function List({ items }) {
const [prevItems, setPrevItems] = useState(items);
const [selection, setSelection] = useState(null);
if (items !== prevItems) {
setPrevItems(items);
setSelection(null);
}
//...
} |
Beta Was this translation helpful? Give feedback.
-
|
https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes |
Beta Was this translation helpful? Give feedback.
-
// 🛑 잘못된 코드
function List({ items }) {
const [A, setA] = useState(null);
const [B, setB] = useState(null);
const [C, setC] = useState(null);
useEffect(() => {
const x = f(A, B);
SetC(x)
}, [A, B]);
//...
}이렇게 계산결과를 저장하는 예시가 조금 더 이해하기 좋을수도 있을거 같아요 |
Beta Was this translation helpful? Give feedback.
-
|
예시 들어주셔서 감사합니다! const [A, setA] = useState(/* 적절한 초기값 */);
const [B, setB] = useState(/* 적절한 초기값 */);
// C를 계산된 값으로 사용
const C = useMemo(() => f(A, B), [A, B]);이 코드가 되겠네요? |
Beta Was this translation helpful? Give feedback.
-
|
@yunseorim1116 저는 간단한 연산이라면 useMemo를 사용하지 않아도 괜찮을것 같아요. 어떠세요? 😆 |
Beta Was this translation helpful? Give feedback.
-
7. 데이터를 페칭해야 하는 경우, useEffect보다 라이브러리를 사용하는 것이 좋습니다.Writing fetch calls inside Effects is a popular way to fetch data, especially in fully client-side apps. This is, however, a very manual approach and it has significant downsides: Effects don’t run on the server. This means that the initial server-rendered HTML will only include a loading state with no data. The client computer will have to download all JavaScript and render your app only to discover that now it needs to load the data. This is not very efficient. If you use a framework, use its built-in data fetching mechanism. Modern React frameworks have integrated data fetching mechanisms that are efficient and don’t suffer from the above pitfalls. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
[ 네트워크 워터풀 ]원래 코드에서 부모 데이터 요청이 완료될 때까지 자식 데이터 요청이 지연되어 전체 로딩 시간이 증가하는 문제 useEffect : 문제import React, { useEffect, useState } from 'react';
function ParentComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/parentData')
.then(response => response.json())
.then(data => setData(data));
}, []);
if (!data) return <div>Loading parent data...</div>;
return (
<div>
<h1>Parent Data: {data.title}</h1>
<ChildComponent parentId={data.id} />
</div>
);
}
function ChildComponent({ parentId }) {
const [childData, setChildData] = useState(null);
useEffect(() => {
fetch(`/api/childData?parentId=${parentId}`)
.then(response => response.json())
.then(data => setChildData(data));
}, [parentId]);
if (!childData) return <div>Loading child data...</div>;
return <div>Child Data: {childData.content}</div>;
}react-query : 개선import React from 'react';
import { useQuery } from 'react-query';
// 부모 컴포넌트
function ParentComponent() {
const { data: parentData, isLoading: isLoadingParent } = useQuery('parentData', () =>
fetch('/api/parentData').then(response => response.json())
);
if (isLoadingParent) return <div>Loading parent data...</div>;
return (
<div>
<h1>Parent Data: {parentData.title}</h1>
{/* 자식 컴포넌트에 parentId를 전달하더라도, 독립적으로 요청하므로 병렬 요청이 이루어짐 */}
<ChildComponent parentId={parentData.id} />
</div>
);
}
// 자식 컴포넌트
function ChildComponent({ parentId }) {
const { data: childData, isLoading: isLoadingChild } = useQuery(
['childData', parentId],
() => fetch(`/api/childData?parentId=${parentId}`).then(response => response.json()),
{
enabled: !!parentId, // parentId가 있을 때만 요청
}
);
if (isLoadingChild) return <div>Loading child data...</div>;
return <div>Child Data: {childData.content}</div>;
}
|
Beta Was this translation helpful? Give feedback.
-
반복문에서 요소의 키를 선택할 때는 배열 인덱스가 아닌 동일한 항목에 대해 항상 동일한 값을 갖는 식별자를 사용하세요.
컴포넌트를 정의할 때는 다른 컴포넌트나 함수안에 중첩되지 않도록 하고 파일/모듈의 최상위 레벨에 정의하세요.
상태에 무엇을 저장할지 결정할 때는 필요한 것을 계산하는 데 사용할 수 있는 최소한의 정보를 저장하세요.
useMemo, useCallback 혹은 React.memo를 사용하여 캐싱할지 여부를 고려한다면 성능 문제가 발견될 때까지 캐싱을 미루세요.
공통된 코드를 함수로 추출할 때, 다른 훅을 호출하는 경우에만 훅으로 이름을 지정하세요.
프로퍼티 변경에 따라 상태를 조정해야 하는 경우 effect가 아닌 컴포넌트 함수에(렌더링 중에) 직접 상태를 설정하세요.
데이터를 페칭해야 하는 경우, useEffect보다 라이브러리를 사용하는 것이 좋습니다.
이벤트 발생에 대한 응답으로 어떠한 액션을 취해야 하는 경우, useEffect가 아닌 이벤트 핸들러에 코드를 작성하세요.
useEffect 종속성으로 원치 않는 리렌더링(무한 루프 포함)이 발생하는 경우, 배열에서 종속성을 제거할 것이 아니라 effect 함수에서도 종속성을 제거하세요.
출처: https://blog.testdouble.com/posts/2023-10-16-react-docs-recommendations/
Beta Was this translation helpful? Give feedback.
All reactions