From bf229da78fcdba9b18090550880d523355822356 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Tue, 16 Jul 2024 20:12:18 +0900 Subject: [PATCH] fix: typo 'lifecycle' 'third' linted by textlint --- src/content/learn/lifecycle-of-reactive-effects.md | 2 +- src/content/learn/synchronizing-with-effects.md | 2 +- src/content/reference/react-dom/components/select.md | 2 +- src/content/reference/react-dom/flushSync.md | 8 ++++---- src/content/reference/react/useEffect.md | 2 +- src/content/reference/react/useSyncExternalStore.md | 2 +- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md index dc1d98daa..b54eb92f1 100644 --- a/src/content/learn/lifecycle-of-reactive-effects.md +++ b/src/content/learn/lifecycle-of-reactive-effects.md @@ -764,7 +764,7 @@ useEffect(() => { - 컴포넌트는 마운트, 업데이트, 마운트 해제할 수 있습니다. -- 각 effect는 주변 컴포넌트와 별도의 라이프사이클을 가집니다. +- 각 effect는 주변 컴포넌트와 별도의 생명주기를 가집니다. - 각 effect는 시작 및 중지할 수 있는 별도의 동기화 프로세스를 설명합니다. - effect를 작성하고 읽을 때는 컴포넌트의 관점(마운트, 업데이트 또는 마운트 해제 방법)이 아닌 개별 effect의 관점(동기화 *시작* 및 *중지* 방법)에서 생각하세요. - 컴포넌트 본문 내부에 선언된 값은 "반응형"입니다. diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 5ba1d77a7..14c6a8d67 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -39,7 +39,7 @@ Effect에 대해 자세히 알아보기 전에, 컴포넌트 내부의 2가지 ## Effect가 필요 없을지도 모릅니다 {/*you-might-not-need-an-effect*/} -**컴포넌트에 Effect를 무작정 추가하지 마세요.** Effect는 주로 React 코드를 벗어난 특정 *외부* 시스템과 동기화하기 위해 사용됩니다. 이는 브라우저 API, 써드파티 위젯, 네트워크 등을 포함합니다. 만약 당신의 Effect가 단순히 다른 상태에 기반하여 일부 상태를 조정하는 경우에는 [Effect가 필요하지 않을 수 있습니다.](/learn/you-might-not-need-an-effect) +**컴포넌트에 Effect를 무작정 추가하지 마세요.** Effect는 주로 React 코드를 벗어난 특정 *외부* 시스템과 동기화하기 위해 사용됩니다. 이는 브라우저 API, 서드 파티 위젯, 네트워크 등을 포함합니다. 만약 당신의 Effect가 단순히 다른 상태에 기반하여 일부 상태를 조정하는 경우에는 [Effect가 필요하지 않을 수 있습니다.](/learn/you-might-not-need-an-effect) ## Effect를 작성하는 법 {/*how-to-write-an-effect*/} diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md index 7e5dec49f..83747396a 100644 --- a/src/content/reference/react-dom/components/select.md +++ b/src/content/reference/react-dom/components/select.md @@ -70,7 +70,7 @@ select box를 표시하려면 [``](#providing-an-initially-selected-option)를 사용하고, [제어되어야 하는 select box](#controlling-a-select-box-with-a-state-variable)인 경우 [``에 `value` prop이 전달된다면, [제어되는 것으로 간주합니다.](#controlling-a-select-box-with-a-state-variable) - select box는 제어 상태와 비제어 상태를 동시에 행할 수 없습니다. 둘 중 하나의 상태만 가질 수 있습니다. -- select box는 생명 주기 동안 처음 설정한 제어 상태를 변경할 수 없습니다. +- select box는 생명주기 동안 처음 설정한 제어 상태를 변경할 수 없습니다. - 제어되는 모든 select box는 제공되는 값을 동기적으로 업데이트하는 `onChange` 이벤트 핸들러가 필요합니다. --- diff --git a/src/content/reference/react-dom/flushSync.md b/src/content/reference/react-dom/flushSync.md index ba7e20919..0cccd83c5 100644 --- a/src/content/reference/react-dom/flushSync.md +++ b/src/content/reference/react-dom/flushSync.md @@ -59,9 +59,9 @@ flushSync(() => { ## 사용법 {/*usage*/} -### 써드파티 통합을 위한 업데이트 flushing {/*flushing-updates-for-third-party-integrations*/} +### 서드 파티 통합을 위한 업데이트 flushing {/*flushing-updates-for-third-party-integrations*/} -브라우저 API 또는 UI 라이브러리와 같은 써드파티 코드를 통합할 때 React가 업데이트를 처리하도록 강제할 필요가 있을 수 있습니다. `flushSync`를 사용해서 React가 콜백 내부의 모든 state updates를 동기적으로 처리하도록 할 수 있습니다. +브라우저 API 또는 UI 라이브러리와 같은 서드 파티 코드를 통합할 때 React가 업데이트를 처리하도록 강제할 필요가 있을 수 있습니다. `flushSync`를 사용해서 React가 콜백 내부의 모든 state updates를 동기적으로 처리하도록 할 수 있습니다. ```js [[1, 2, "setSomething(123)"]] flushSync(() => { @@ -72,9 +72,9 @@ flushSync(() => { 이렇게 함으로써 React가 DOM을 이미 업데이트한 후에 다음 줄의 코드를 실행하는 것을 보장합니다. -**`flushSync`를 사용하는 것은 일반적이지 않고 자주 사용하면 애플리케이션의 성능이 크게 저하될 수 있습니다.** 애플리케이션이 React API만 사용하고 써드파티 라이브러리와 통합하지 않는다면 `flushSync`는 필요하지 않습니다. +**`flushSync`를 사용하는 것은 일반적이지 않고 자주 사용하면 애플리케이션의 성능이 크게 저하될 수 있습니다.** 애플리케이션이 React API만 사용하고 서드 파티 라이브러리와 통합하지 않는다면 `flushSync`는 필요하지 않습니다. -그러나 브라우저 API와 같은 써드파티 코드와 통합할 때 유용할 수 있습니다. +그러나 브라우저 API와 같은 서드 파티 코드와 통합할 때 유용할 수 있습니다. 일부 브라우저 API는 콜백 내부의 결과가 DOM에서 동기적으로 사용될 것으로 예상하므로 콜백이 완료될 때까지 렌더링된 DOM을 사용해서 브라우저가 작업할 수 있습니다. 대부분의 경우 React가 이를 자동으로 처리하지만, 때에 따라 강제로 동기적 업데이트를 해야 할 수 있습니다. diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index 481a9ec7c..d0f53510f 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -790,7 +790,7 @@ export function useIntersectionObserver(ref) { 가끔은 컴포넌트의 prop 또는 state를 외부 시스템과 동기화해야할 때가 있습니다. -예를 들어 React 없이 작성된 third-party 지도 위젯이나 비디오 플레이어 컴포넌트가 있다면 이 컴포넌트의 state를 현재 React 컴포넌트의 state와 일치하도록 하기 위해 Effect를 사용할 수 있습니다. 이 Effect는 `map-widget.js`에 정의된 `MapWidget` 클래스의 인스턴스를 생성합니다. `Map` 컴포넌트의 `zoomLevel` prop을 변경할 때, Effect는 해당 클래스 인스턴스의 `setZoom()`을 호출하여 동기화를 유지합니다. +예를 들어 React 없이 작성된 서드 파티 지도 위젯이나 비디오 플레이어 컴포넌트가 있다면 이 컴포넌트의 state를 현재 React 컴포넌트의 state와 일치하도록 하기 위해 Effect를 사용할 수 있습니다. 이 Effect는 `map-widget.js`에 정의된 `MapWidget` 클래스의 인스턴스를 생성합니다. `Map` 컴포넌트의 `zoomLevel` prop을 변경할 때, Effect는 해당 클래스 인스턴스의 `setZoom()`을 호출하여 동기화를 유지합니다. diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index 1dfeb0282..d076d894a 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -330,7 +330,7 @@ function subscribe(callback) { React 앱이 [server rendering](/reference/react-dom/server)을 사용하는 경우 React 컴포넌트는 브라우저 환경 외부에서도 실행되어 초기 HTML을 생성합니다. 이로 인해 외부 store에 연결할 때 몇 가지 문제가 발생합니다. - 브라우저 전용 API에 연결하는 경우 서버에 해당 API가 존재하지 않으므로 작동하지 않습니다. -- third-party 데이터 저장소에 연결하는 경우 서버와 클라이언트 간에 일치하는 데이터가 필요합니다. +- 서드 파티 데이터 저장소에 연결하는 경우 서버와 클라이언트 간에 일치하는 데이터가 필요합니다. 이러한 문제를 해결하려면 `getServerSnapshot` 함수를 `useSyncExternalStore`의 세 번째 인수로 전달하세요.