Skip to content

Commit 6e8ae7f

Browse files
docs: update Suspense.md (#1125)
<!-- PR을 보내주셔서 감사합니다! 여러분과 같은 기여자들이 React를 더욱 멋지게 만듭니다! 기존 이슈와 관련된 PR이라면, 아래에 이슈 번호를 추가해주세요. --> # <!-- 제목을 작성해주세요. --> # Suspense 문서 수정 <!-- 어떤 종류의 PR인지 상세 내용을 작성해주세요. --> - 기울임체 적용되지 않은 문자 기울임체로 수정 - \*중단(Suspend)*로 표기된 문자 <em>중단(Suspend)</em>로 수정 - 한,영 중복된 내용 제거 <img width="884" alt="image" src="https://github.com/user-attachments/assets/ea6ff22e-52cb-4302-9707-3d715b8854ce" /> - 어색한 표현 수정 - use 사용해서 Promise 값 읽기 -> use 사용해서 캐시된 Promise 값 읽기 - **F**allback으로 표기된 부분 **f**allback으로 수정 ## 필수 확인 사항 - [x] [기여자 행동 강령 규약<sup>Code of Conduct</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md) - [x] [기여 가이드라인<sup>Contributing</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md) - [x] [공통 스타일 가이드<sup>Universal Style Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md) - [x] [번역을 위한 모범 사례<sup>Best Practices for Translation</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md) - [x] [번역 용어 정리<sup>Translate Glossary</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md) - [x] [`textlint` 가이드<sup>Textlint Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md) - [x] [맞춤법 검사<sup>Spelling Check</sup>](https://nara-speller.co.kr/speller/) ## 선택 확인 사항 - [ ] 번역 초안 작성<sup>Draft Translation</sup> - [ ] 리뷰 반영<sup>Resolve Reviews</sup> --------- Co-authored-by: 루밀LuMir <[email protected]>
1 parent ec5f90d commit 6e8ae7f

File tree

1 file changed

+4
-8
lines changed

1 file changed

+4
-8
lines changed

src/content/reference/react/Suspense.md

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ title: <Suspense>
5050

5151
React는 <CodeStep step={2}>children</CodeStep>에 필요한 모든 코드와 데이터가 로드될 때까지 <CodeStep step={1}>loading fallback</CodeStep>을 보여줍니다.
5252

53-
아래 예시에서는 앨범 목록을 가져오는 동안 `Albums` 컴포넌트가 *지연(Suspend)*됩니다. 렌더링할 준비가 될 때까지 가장 가까운 Suspense는 fallback, 즉 `Loading` 컴포넌트를 표시합니다. 데이터가 모두 로드되면 React는 `Loading` fallback을 숨기고 로드된 데이터로 `Albums` 컴포넌트를 렌더링합니다.
53+
아래 예시에서는 앨범 목록을 가져오는 동안 `Albums` 컴포넌트가 <em>지연(Suspend)</em>됩니다. 렌더링할 준비가 될 때까지 가장 가까운 Suspense는 Fallback, 즉 `Loading` 컴포넌트를 표시합니다. 데이터가 모두 로드되면 React는 `Loading` Fallback을 숨기고 로드된 데이터로 `Albums` 컴포넌트를 렌더링합니다.
5454

5555
<Sandpack>
5656

@@ -207,13 +207,9 @@ async function getAlbums() {
207207

208208
**Suspense가 가능한 데이터만이 Suspense 컴포넌트를 활성화합니다.** 아래와 같은 것들이 해당됩니다.
209209

210-
- [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/)[Next.js](https://nextjs.org/docs/getting-started/react-essentials) 같이 Suspense가 가능한 프레임워크를 사용한 데이터 가져오기
210+
- [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/)[Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) 같이 Suspense가 가능한 프레임워크를 사용한 데이터 가져오기
211211
- [`lazy`](/reference/react/lazy)를 활용한 지연 로딩 컴포넌트
212-
- [`use`](/reference/react/use)를 사용해서 Promise 값 읽기
213-
214-
- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
215-
- Lazy-loading component code with [`lazy`](/reference/react/lazy)
216-
- Reading the value of a cached Promise with [`use`](/reference/react/use) {/*TODO*/}
212+
- [`use`](/reference/react/use)를 사용해서 캐시된 Promise 값 읽기
217213

218214
Suspense는 Effect 또는 이벤트 핸들러 내부에서 가져오는 데이터를 감지하지 **않습니다**.
219215

@@ -886,7 +882,7 @@ input { margin: 10px; }
886882

887883
</Sandpack>
888884

889-
일반적인 대체 UI 패턴은 목록들에 대한 업데이트를 *연기(Defer)*하고 새 결과가 준비될 때까지 이전 결과를 계속 보여주는 것입니다. [`useDeferredValue`](/reference/react/useDeferredValue) Hook을 사용하면 쿼리의 지연된 버전을 아래로 전달할 수 있습니다.
885+
일반적인 대체 UI 패턴은 목록들에 대한 업데이트를 <em>연기(defer)</em>하고 새 결과가 준비될 때까지 이전 결과를 계속 보여주는 것입니다. [`useDeferredValue`](/reference/react/useDeferredValue) Hook을 사용하면 쿼리의 지연된 버전을 아래로 전달할 수 있습니다.
890886

891887
```js {3,11}
892888
export default function App() {

0 commit comments

Comments
 (0)