diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index 5b39f5584..ca882e4db 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -12,10 +12,10 @@ description: React 19를 이제 npm에서 사용할 수 있습니다! 이 포스 ### React 19는 이제 안정적입니다! {/*react-19-is-now-stable*/} -React 19 RC가 4월에 처음 공유된 이후 다음이 추가되었습니다. +React 19 RC를 4월에 처음 공유한 이후 다음을 추가하였습니다. - **지연된 트리의 사전 워밍**: [Suspense 개선 사항](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense)을 참고하세요. -- **React DOM 정적 API들**: [새로운 React DOM 정적 API들](#new-react-dom-static-apis)을 참고하세요. +- **React DOM 정적 API들**: [새로운 React DOM의 정적 API](#new-react-dom-static-apis)를 참고하세요. _이 게시물의 날짜는 안정된 버전의 릴리즈 날짜를 반영하도록 업데이트되었습니다._ @@ -503,7 +503,7 @@ function App({children}) { 새로운 Context 프로바이더는 `` 사용할 수 있고 기존 존재하는 프로바이더를 변환하기 위한 codemod를 배포할 예정입니다. 앞으로의 버전에서 ``를 더 이상 사용하지 않을 계획입니다. -### refs를 위한 클린업 함수 {/*cleanup-functions-for-refs*/} +### Ref를 위한 클린업 함수 {/*cleanup-functions-for-refs*/} 이제 `ref` 콜백에 클린업 함수를 반환하는 것을 지원합니다. @@ -521,13 +521,13 @@ function App({children}) { /> ``` -컴포넌트가 마운트 해제될 때, React는 `ref` 콜백으로부터 클린업 함수를 호출할 것입니다. 이는 DOM ref, 클래스 컴포넌트 ref 그리고 `useImperativeHandle` 모두 해당합니다. +컴포넌트가 마운트 해제될 때, React는 `ref` 콜백으로부터 클린업 함수를 호출할 것입니다. 이는 DOM Ref, 클래스 컴포넌트 Ref 그리고 `useImperativeHandle` 모두 해당합니다. -이전에는 React가 컴포넌트를 마운트 해제될 때 `ref` 함수를 `null`과 함께 호출했습니다. 이제 만약 `ref`가 클린업 함수를 반환한다면, React는 이 단계를 건너뜁니다. +이전에는 React가 컴포넌트를 마운트 해제할 때 `ref` 함수를 `null`과 함께 호출했습니다. 이제 만약 `ref`가 클린업 함수를 반환한다면, React는 이 단계를 건너뜁니다. -앞으로의 버전에서는 컴포넌트를 마운트 해제될 때 `null`과 함께 ref를 호출하는 것을 더 이상 사용하지 않을 예정입니다. +앞으로의 버전에서는 컴포넌트를 마운트 해제할 때 `null`과 함께 `ref`를 호출하는 것을 더 이상 사용하지 않을 예정입니다. @@ -591,7 +591,7 @@ React가 이 컴포넌트를 렌더링하면 `` `<link>` 그리고 `<meta #### 여전히 메타데이터 라이브러리를 원한다면 {/*you-may-still-want-a-metadata-library*/} -간단한 사용 사례의 경우에 문서 메타 데이터를 태그로 렌더링하는 것이 적합할 수 있지만, 라이브러리는 현재 경로에 따라 일반 메타 데이터를 구체적인 메타 데이터로 덮어쓰는 등 더 강력한 기능을 제공할 수 있습니다. 이러한 기능들은 메타 데이터 태그를 대체하는 것보다 [`react-helmet`](https://github.com/nfl/react-helmet)와 같은 프레임워크나 라이브러리를 더 쉽게 할 수 있도록 합니다. +간단한 사용 사례의 경우에 문서 메타 데이터를 태그로 렌더링하는 것이 적합할 수 있지만, 라이브러리는 현재 경로에 따라 일반 메타 데이터를 구체적인 메타 데이터로 덮어쓰는 등 더 강력한 기능을 제공할 수 있습니다. 이러한 기능들은 메타 데이터 태그를 대체하는 것보다 [`react-helmet`](https://github.com/nfl/react-helmet)과 같은 프레임워크나 라이브러리를 더 쉽게 할 수 있도록 합니다. </Note> diff --git a/src/content/blog/index.md b/src/content/blog/index.md index a8f4d3ddf..f6d0ded75 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -18,7 +18,7 @@ title: React 블로그 <BlogCard title="React v19 " date="December 5, 2024" url="/blog/2024/12/05/react-19"> -In the React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ... +React 19 업그레이드 가이드에서 React 19로 앱을 업그레이드하는 단계별 지침을 공유했습니다. 이 포스트에서 React 19의 새로운 기능들과 이를 도입하는 방법을 제공합니다. </BlogCard> diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 2e08e10be..8cf840b06 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -23,13 +23,13 @@ title: 탈출구 ## Ref로 값 참조하기 {/*referencing-values-with-refs*/} -컴포넌트가 일부 정보를 "기억"하고 싶지만, 해당 정보가 [렌더링을 유발](/learn/render-and-commit)하지 않도록 하려면 ref를 사용하세요. +컴포넌트가 일부 정보를 "기억"하고 싶지만, 해당 정보가 [렌더링을 유발](/learn/render-and-commit)하지 않도록 하려면 Ref를 사용하세요. ```js const ref = useRef(0); ``` -state처럼 ref는 다시 렌더링하는 사이에 React에 의해 유지됩니다. 다만 state의 설정은 컴포넌트가 다시 렌더링 되지만, ref의 변경은 그렇지 않습니다! `ref.current` 프로퍼티를 통해 해당 ref의 현재 값에 접근할 수 있습니다. +State처럼 Ref는 다시 렌더링하는 사이에 React에 의해 유지됩니다. 다만 State의 설정은 컴포넌트를 다시 렌더링 하지만, Ref의 변경은 그렇지 않습니다! `ref.current` 프로퍼티를 통해 해당 Ref의 현재 값에 접근할 수 있습니다. <Sandpack> @@ -54,17 +54,17 @@ export default function Counter() { </Sandpack> -ref는 React가 추적하지 않는 컴포넌트의 비밀 주머니와 같습니다. 예를 들어 ref를 사용하여 컴포넌트의 렌더링 출력에 영향을 주지 않는 [timeout ID](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [DOM 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/API/Element) 및 기타 객체를 저장할 수 있습니다. +Ref는 React가 추적하지 않는 컴포넌트의 비밀 주머니와 같습니다. 예를 들어 Ref를 사용하여 컴포넌트의 렌더링 출력에 영향을 주지 않는 [Timeout ID](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [DOM 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/API/Element) 및 기타 객체를 저장할 수 있습니다. <LearnMore path="/learn/referencing-values-with-refs"> -ref를 사용하여 정보를 기억하는 방법을 배우려면 **[Ref로 값 참조하기](/learn/referencing-values-with-refs)** 를 읽어보세요. +Ref를 사용하여 정보를 기억하는 방법을 배우려면 <strong>[Ref로 값 참조하기](/learn/referencing-values-with-refs)</strong>를 읽어보세요. </LearnMore> ## Ref로 DOM 조작하기 {/*manipulating-the-dom-with-refs*/} -React는 렌더링 결과물에 맞춰 DOM 변경을 자동으로 처리하기 때문에 컴포넌트에서 자주 DOM을 조작해야 할 필요는 없습니다. 하지만 가끔 특정 노드에 포커스를 옮기거나, 스크롤 위치를 옮기거나, 위치와 크기를 측정하기 위해서 React가 관리하는 DOM 요소에 접근해야 할 때가 있습니다. React는 이런 작업을 수행하는 내장 방법을 제공하지 않기 때문에 DOM 노드에 접근하기 위한 ref가 필요할 것입니다. 예를 들어 버튼을 클릭하면 ref를 사용해 input에 포커스를 옮길 것입니다. +React는 렌더링 결과물에 맞춰 DOM 변경을 자동으로 처리하기 때문에 컴포넌트에서 자주 DOM을 조작해야 할 필요는 없습니다. 하지만 가끔 특정 노드에 포커스를 옮기거나, 스크롤 위치를 옮기거나, 위치와 크기를 측정하기 위해서 React가 관리하는 DOM 요소에 접근해야 할 때가 있습니다. React는 이런 작업을 수행하는 내장 방법을 제공하지 않기 때문에 DOM 노드에 접근하기 위한 Ref가 필요할 것입니다. 예를 들어 버튼을 클릭하면 Ref를 사용해 input에 포커스를 옮길 것입니다. <Sandpack> @@ -93,15 +93,15 @@ export default function Form() { <LearnMore path="/learn/manipulating-the-dom-with-refs"> -React가 관리하는 DOM 엘리먼트에 접근하는 방법을 배우려면 **[Ref로 DOM 조작하기](/learn/manipulating-the-dom-with-refs)** 를 읽어보세요. +React가 관리하는 DOM 엘리먼트에 접근하는 방법을 배우려면 <strong>[Ref로 DOM 조작하기](/learn/manipulating-the-dom-with-refs)</strong>를 읽어보세요. </LearnMore> ## Effect로 값 동기화하기 {/*synchronizing-with-effects*/} -일부 컴포넌트는 외부 시스템과 동기화해야 합니다. 예를 들어 React state에 따라 React가 아닌 컴포넌트를 제어하거나, 채팅 서버에 대한 연결을 설정하거나, 컴포넌트가 화면에 나타났을 때 분석 로그를 보낼 수 있습니다. 특정 이벤트를 처리하는 이벤트 핸들러와 달리 Effect는 렌더링 후 일부 코드를 실행합니다. 컴포넌트를 React 외부 시스템과 동기화할 때 이를 사용하세요. +일부 컴포넌트는 외부 시스템과 동기화해야 합니다. 예를 들어 React State에 따라 React가 아닌 컴포넌트를 제어하거나, 채팅 서버에 대한 연결을 설정하거나, 컴포넌트가 화면에 나타났을 때 분석 로그를 보낼 수 있습니다. 특정 이벤트를 처리하는 이벤트 핸들러와 달리 Effect는 렌더링 후 일부 코드를 실행합니다. 컴포넌트를 React 외부 시스템과 동기화할 때 이를 사용하세요. -Play/Pause를 몇 번 누르고 비디오 플레이어가 `isPlaying` prop 값에 어떻게 동기화되는지 확인하세요. +Play/Pause를 몇 번 누르고 비디오 플레이어가 `isPlaying` Prop 값을 어떻게 동기화하는지 확인하세요. <Sandpack> @@ -145,7 +145,7 @@ video { width: 250px; } </Sandpack> -많은 Effect는 스스로 "클린업"하기도 합니다. 예를 들어 채팅 서버에 대한 연결을 설정하는 Effect는 해당 서버에서 컴포넌트의 연결을 끊는 방법을 React에 알려주는 *클린업 함수* 를 반환해야 합니다. +많은 Effect는 스스로 "클린업"하기도 합니다. 예를 들어 채팅 서버에 대한 연결을 설정하는 Effect는 해당 서버에서 컴포넌트의 연결을 끊는 방법을 React에 알려주는 <em>클린업 함수</em>를 반환해야 합니다. <Sandpack> @@ -183,23 +183,23 @@ input { display: block; margin-bottom: 20px; } </Sandpack> -개발 모드에서 React는 즉시 실행되고 Effect를 한 번 더 클린업합니다. 그래서 `"✅ Connecting..."`이 두 번 인쇄되는 것입니다. 이렇게 하여 클린업 함수를 구현하는 것을 잊지 않도록 합니다. +개발 모드에서 React는 즉시 실행되고 Effect를 한 번 더 클린업합니다. 그래서 `"✅ Connecting..."`을 두 번 출력하는 것입니다. 이렇게 하여 클린업 함수를 구현하는 것을 잊지 않도록 합니다. <LearnMore path="/learn/synchronizing-with-effects"> -컴포넌트를 외부 시스템과 동기화하는 방법을 배우려면 **[Effect로 값 동기화하기](/learn/synchronizing-with-effects)** 를 읽어보세요. +컴포넌트를 외부 시스템과 동기화하는 방법을 배우려면 <strong>[Effect로 동기화하기](/learn/synchronizing-with-effects)</strong>를 읽어보세요. </LearnMore> ## Effect가 필요하지 않은 경우 {/*you-might-not-need-an-effect*/} -Effect는 React 패러다임에서 벗어날 수 있는 탈출구입니다. Effect를 사용하면 React를 "벗어나" 컴포넌트를 외부 시스템과 동기화할 수 있습니다. 외부 시스템이 관여하지 않는 경우 (예를 들어 일부 props 또는 state가 변경될 때 컴포넌트의 state를 업데이트하려는 경우) Effect가 필요하지 않습니다. 불필요한 Effect를 제거하면 코드를 더 쉽게 따라갈 수 있고, 실행 속도가 빨라지며, 에러 발생 가능성이 줄어듭니다. +Effect는 React 패러다임에서 벗어날 수 있는 탈출구입니다. Effect를 사용하면 React를 "벗어나" 컴포넌트를 외부 시스템과 동기화할 수 있습니다. 외부 시스템이 관여하지 않는 경우 (예를 들어 일부 Props 또는 State가 변경될 때 컴포넌트의 State를 업데이트하려는 경우) Effect가 필요하지 않습니다. 불필요한 Effect를 제거하면 코드를 더 쉽게 따라갈 수 있고, 실행 속도가 빨라지며, 에러 발생 가능성이 줄어듭니다. Effect가 필요하지 않은 두 가지 일반적인 경우가 있습니다. - **렌더링을 위해 데이터를 변환하는 데 Effect가 필요하지 않습니다.** - **사용자 이벤트를 처리하는 데 Effect가 필요하지 않습니다.** -예를 들어 다른 state에 따라 일부 state를 조정하는 데는 Effect가 필요하지 않습니다. +예를 들어, 다른 State에 따라 일부 State를 조정하는 데는 Effect가 필요하지 않습니다. ```js {5-9} function Form() { @@ -227,19 +227,19 @@ function Form() { } ``` -그러나 외부 시스템과 동기화하려면 Effects가 *필요* 합니다. +그러나 외부 시스템과 동기화하려면 Effect가 <em>필요</em>합니다. <LearnMore path="/learn/you-might-not-need-an-effect"> -불필요한 Effect를 제거하는 방법을 배우려면 **[Effect가 필요하지 않은 경우](/learn/you-might-not-need-an-effect)** 를 읽어보세요. +불필요한 Effect를 제거하는 방법을 배우려면 <strong>[Effect가 필요하지 않은 경우](/learn/you-might-not-need-an-effect)</strong>를 읽어보세요. </LearnMore> ## React Effect의 생명주기 {/*lifecycle-of-reactive-effects*/} -Effect는 컴포넌트와 다른 생명주기를 가집니다. 컴포넌트는 마운트, 업데이트 또는 마운트 해제할 수 있습니다. 반면 Effect는 동기화를 시작하거나 후에 동기화를 중지하는 두 가지 작업만 할 수 있습니다. Effect가 시간에 따라 변하는 props와 state에 의존하는 경우 이 주기는 여러 번 발생할 수 있습니다. +Effect는 컴포넌트와 다른 생명주기를 가집니다. 컴포넌트는 마운트, 업데이트 또는 마운트 해제할 수 있습니다. 반면 Effect는 동기화를 시작하거나 후에 동기화를 중지하는 두 가지 작업만 할 수 있습니다. Effect가 시간에 따라 변하는 Props와 State에 의존하는 경우 이 주기는 여러 번 발생할 수 있습니다. -다음 Effect는 `roomId` prop의 값에 의존합니다. Props는 다시 렌더링할 때 변할 수 있는 *반응형 값* 입니다. `roomId`가 변경되면 Effect가 *다시 동기화* (및 서버에 다시 연결)합니다. +다음 Effect는 `roomId` Prop의 값에 의존합니다. Props는 다시 렌더링할 때 변할 수 있는 *반응형 값* 입니다. `roomId`가 변경되면 Effect가 *다시 동기화* (및 서버에 다시 연결)합니다. <Sandpack> @@ -306,7 +306,7 @@ React는 Effect의 의존성을 올바르게 명시했는지 확인하는 린터 <LearnMore path="/learn/lifecycle-of-reactive-effects"> -Effect의 생명주기가 컴포넌트와 어떻게 다른지를 배우려면 **[React Effect의 생명주기](/learn/lifecycle-of-reactive-effects)** 를 읽어보세요. +Effect의 생명주기가 컴포넌트와 어떻게 다른지를 배우려면 <strong>[React Effect의 생명주기](/learn/lifecycle-of-reactive-effects)</strong>를 읽어보세요. </LearnMore> @@ -314,13 +314,13 @@ Effect의 생명주기가 컴포넌트와 어떻게 다른지를 배우려면 ** <Wip> -이 섹션에서는 아직 안정된 버전의 React로 **출시되지 않은 실험적인 API**에 대해 설명합니다. +이 섹션에서는 아직 안정된 버전의 React로 **출시하지 않은 실험적인 API**에 대해 설명합니다. </Wip> -이벤트 핸들러는 같은 상호작용을 반복하는 경우에만 다시 실행됩니다. Effect는 이벤트 핸들러와 달리 prop이나 state 변수 등 읽은 값이 마지막 렌더링 때와 다르면 다시 동기화합니다. 때로는 두 동작이 섞여서 어떤 값에는 반응해 다시 실행되지만, 다른 값에는 그러지 않는 Effect를 원할 때도 있습니다. 이 페이지에서 그 방법을 알려드리겠습니다. +이벤트 핸들러는 같은 상호작용을 반복하는 경우에만 다시 실행됩니다. Effect는 이벤트 핸들러와 달리 Prop이나 State 변수 등 읽은 값이 마지막 렌더링 때와 다르면 다시 동기화합니다. 때로는 두 동작이 섞여서 어떤 값에는 반응해 다시 실행되지만, 다른 값에는 그러지 않는 Effect를 원할 때도 있습니다. 이 페이지에서 그 방법을 알려드리겠습니다. -Effect 내의 모든 코드는 *반응형* 이며, 읽은 반응형 값이 다시 렌더링되는 것으로 인해 변경되면 다시 실행됩니다. 예를 들어 다음의 Effect는 `roomId` 또는 `theme`이 변경되면 채팅에 다시 연결됩니다: +Effect 내의 모든 코드는 <em>반응형</em>이며, 읽은 반응형 값이 다시 렌더링되는 것으로 인해 변경되면 다시 실행됩니다. 예를 들어 다음의 Effect는 `roomId` 또는 `theme`이 변경되면 채팅에 다시 연결됩니다. <Sandpack> @@ -448,7 +448,7 @@ label { display: block; margin-top: 10px; } </Sandpack> -이것은 이상적이지 않습니다. `roomId`가 변경된 경우에만 채팅에 다시 연결하고 싶습니다. `theme`를 전환해도 채팅에 다시 연결되지 않아야 합니다! `theme`를 읽는 코드를 Effect에서 *Effect Event* 로 옮기세요. +이것은 이상적이지 않습니다. `roomId`가 변경된 경우에만 채팅에 다시 연결하고 싶습니다. `theme`을 전환해도 채팅에 다시 연결되지 않아야 합니다! `theme`를 읽는 코드를 Effect에서 *Effect Event*로 옮기세요. <Sandpack> @@ -581,19 +581,19 @@ label { display: block; margin-top: 10px; } </Sandpack> -Effect 이벤트 내부의 코드는 반응이 아니므로 `theme`를 변경해도 더 이상 Effect가 다시 연결하지 않습니다. +Effect 이벤트 내부의 코드는 반응형이 아니므로 `theme`를 변경해도 더 이상 Effect를 다시 연결하지 않습니다. <LearnMore path="/learn/separating-events-from-effects"> -일부 값이 Effect를 다시 발생시키는 것을 막는 방법을 배우려면 **[Effect에서 이벤트 분리하기](/learn/separating-events-from-effects)** 를 읽어보세요. +일부 값이 Effect를 다시 발생시키는 것을 막는 방법을 배우려면 <strong>[Effect에서 이벤트 분리하기](/learn/separating-events-from-effects)</strong>를 읽어보세요. </LearnMore> ## Effect의 의존성 제거하기 {/*removing-effect-dependencies*/} -Effect를 작성하면 린터는 Effect의 의존성 목록에 Effect가 읽는 모든 반응형 값(예를 들어 props 및 State)을 포함했는지 확인합니다. 이렇게 하면 Effect가 컴포넌트의 최신 props 및 State와 동기화 상태를 유지할 수 있습니다. 불필요한 의존성으로 인해 Effect가 너무 자주 실행되거나 무한 루프를 생성할 수도 있습니다. 이 가이드를 따라 Effect에서 불필요한 의존성을 검토하고 제거하세요. +Effect를 작성하면 린터는 Effect의 의존성 목록에 Effect가 읽는 모든 반응형 값(예를 들어 Props 및 State)을 포함했는지 확인합니다. 이렇게 하면 Effect가 컴포넌트의 최신 Props 및 State와 동기화 상태를 유지할 수 있습니다. 불필요한 의존성으로 인해 Effect가 너무 자주 실행되거나 무한 루프를 생성할 수도 있습니다. 이 가이드를 따라 Effect에서 불필요한 의존성을 검토하고 제거하세요. -예를 들어 다음 Effect는 사용자가 input을 편집할 때마다 다시 생성되는 `options` 객체에 의존합니다. +예를 들어 다음 Effect는 사용자가 Input을 편집할 때마다 다시 생성되는 `options` 객체에 의존합니다. <Sandpack> @@ -742,11 +742,11 @@ button { margin-left: 10px; } </Sandpack> -의존성 목록을 편집하여 `options` 의존성을 제거하지 않았음을 알 수 있습니다. 그것은 잘못된 방법일 것입니다. 대신 주변 코드를 변경함으로써 의존성을 *불필요* 하게 만들었습니다. 의존성 목록을 Effect의 코드에서 사용하는 모든 반응형 값의 목록으로 생각하세요. 이 목록에 무엇을 넣을 것인지 의도적으로 선택하는 것이 아닙니다. 이 목록은 당신의 코드를 설명합니다. 의존성 목록을 변경하려면, 코드를 변경하세요. +의존성 목록을 편집하여 `options` 의존성을 제거하지 않았음을 알 수 있습니다. 그것은 잘못된 방법일 것입니다. 대신 주변 코드를 변경함으로써 의존성을 *불필요*하게 만들었습니다. 의존성 목록을 Effect의 코드에서 사용하는 모든 반응형 값의 목록으로 생각하세요. 이 목록에 무엇을 넣을 것인지 의도적으로 선택하는 것이 아닙니다. 이 목록은 당신의 코드를 설명합니다. 의존성 목록을 변경하려면, 코드를 변경하세요. <LearnMore path="/learn/removing-effect-dependencies"> -Effect 재실행을 줄이는 방법을 배우려면 **[Effect의 의존성 제거하기](/learn/removing-effect-dependencies)** 를 읽어보세요. +Effect 재실행을 줄이는 방법을 배우려면 <strong>[Effect의 의존성 제거하기](/learn/removing-effect-dependencies)</strong>를 읽어보세요. </LearnMore> @@ -839,7 +839,7 @@ body { min-height: 300px; } <LearnMore path="/learn/reusing-logic-with-custom-hooks"> -컴포넌트 간 로직을 공유하는 방법을 배우려면 **[커스텀 Hook으로 로직 재사용하기](/learn/reusing-logic-with-custom-hooks)** 를 읽어보세요. +컴포넌트 간 로직을 공유하는 방법을 배우려면 <strong>[커스텀 Hook으로 로직 재사용하기](/learn/reusing-logic-with-custom-hooks)</strong>를 읽어보세요. </LearnMore> diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md index 286383840..3819741f5 100644 --- a/src/content/learn/lifecycle-of-reactive-effects.md +++ b/src/content/learn/lifecycle-of-reactive-effects.md @@ -1,5 +1,5 @@ --- -title: '반응형 effects의 생명주기' +title: 'React Effect의 생명주기' --- <Intro> diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index ea6287ea2..52b5f0aec 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -4,34 +4,34 @@ title: 'Ref로 값 참조하기' <Intro> -컴포넌트가 일부 정보를 "기억"하고 싶지만, 해당 정보가 [렌더링을 유발](/learn/render-and-commit)하지 않도록 하려면 *ref*를 사용하세요. +컴포넌트가 일부 정보를 "기억"하고 싶지만, 해당 정보가 [렌더링을 유발](/learn/render-and-commit)하지 않도록 하려면 *Ref*를 사용하세요. </Intro> <YouWillLearn> -- 컴포넌트 ref를 어떻게 추가하는가 -- ref의 값이 어떻게 업데이트되는가 -- ref가 state와 어떻게 다른가 -- ref를 어떻게 안전하게 사용할까 +- 컴포넌트 Ref를 어떻게 추가하는가 +- Ref의 값이 어떻게 업데이트되는가 +- Ref가 State와 어떻게 다른가 +- Ref를 어떻게 안전하게 사용할까 </YouWillLearn> -## 컴포넌트에 ref를 추가하기 {/*adding-a-ref-to-your-component*/} +## 컴포넌트에 Ref를 추가하기 {/*adding-a-ref-to-your-component*/} -React에서 `useRef` Hook을 가져와 컴포넌트에 ref를 추가할 수 있습니다. +React에서 `useRef` Hook을 가져와 컴포넌트에 Ref를 추가할 수 있습니다. ```js import { useRef } from 'react'; ``` -컴포넌트 내에서 `useRef` Hook을 호출하고 참조할 초깃값을 유일한 인자로 전달합니다. 예를 들어 다음은 값 `0`에 대한 ref 입니다. +컴포넌트 내에서 `useRef` Hook을 호출하고 참조할 초깃값을 유일한 인자로 전달합니다. 예를 들어 다음은 값 `0`에 대한 Ref입니다. ```js const ref = useRef(0); ``` -`useRef` 는 다음과 같은 객체를 반환합니다. +`useRef`는 다음과 같은 객체를 반환합니다. ```js { @@ -41,7 +41,7 @@ const ref = useRef(0); <Illustration src="/images/docs/illustrations/i_ref.png" alt="An arrow with 'current' written on it stuffed into a pocket with 'ref' written on it." /> -`ref.current` 프로퍼티를 통해 해당 ref의 current 값에 접근할 수 있습니다. 이 값은 의도적으로 변경할 수 있으므로 읽고 쓸 수 있습니다. React가 추적하지 않는 구성 요소의 비밀 주머니라 할 수 있습니다. (이것이 바로 React의 단방향 데이터 흐름에서 "탈출구"가 되는 것입니다--아래에서 자세히 설명하고 있습니다!) +`ref.current` 프로퍼티를 통해 해당 Ref의 `current` 값에 접근할 수 있습니다. 이 값은 의도적으로 변경할 수 있으므로 읽고 쓸 수 있습니다. React가 추적하지 않는 구성 요소의 비밀 주머니라 할 수 있습니다. (이것이 바로 React의 단방향 데이터 흐름에서 "탈출구"가 되는 것입니다. 아래에서 자세히 설명하고 있습니다!) 여기서 버튼은 클릭할 때마다 `ref.current`를 증가시킵니다. @@ -68,13 +68,13 @@ export default function Counter() { </Sandpack> -ref는 숫자를 가리키지만, [state](/learn/state-a-components-memory)처럼 문자열, 객체, 심지어 함수 등 모든 것을 가리킬 수 있습니다. state와 달리 ref는 읽고 수정할 수 있는 `current` 프로퍼티를 가진 일반 자바스크립트 객체입니다. +Ref는 숫자를 가리키지만, [State](/learn/state-a-components-memory)처럼 문자열, 객체, 심지어 함수 등 모든 것을 가리킬 수 있습니다. State와 달리 Ref는 읽고 수정할 수 있는 `current` 프로퍼티를 가진 일반 자바스크립트 객체입니다. -**컴포넌트는 모든 증가에 대하여 다시 렌더링 되지 않습니다.** state와 마찬가지로 ref도 React에 리렌더에 의해 유지됩니다. 그러나, state를 설정하면 컴포넌트가 다시 렌더링 됩니다. ref를 변경하면 다시 렌더링 되지 않습니다! +**컴포넌트는 모든 증가에 대하여 다시 렌더링 되지 않습니다.** State와 마찬가지로 Ref도 React에 리렌더에 의해 유지됩니다. 그러나, State를 설정하면 컴포넌트가 다시 렌더링 됩니다. Ref를 변경하면 다시 렌더링 되지 않습니다! ## 예시: 스톱워치 작성하기 {/*example-building-a-stopwatch*/} -ref와 state를 단일 컴포넌트로 결합할 수 있습니다. 예를 들어 사용자가 버튼을 눌러 시작하거나 중지할 수 있는 스톱워치를 만들어봅시다. 사용자가 "시작"을 누른 후 시간이 얼마나 지났는지 표시하려면 시작 버튼을 누른 시기와 현재 시각을 추적해야 합니다. **이 정보는 렌더링에 사용되므로 state를 유지합니다.** +Ref와 State를 단일 컴포넌트로 결합할 수 있습니다. 예를 들어 사용자가 버튼을 눌러 시작하거나 중지할 수 있는 스톱워치를 만들어봅시다. 사용자가 "시작"을 누른 후 시간이 얼마나 지났는지 표시하려면 시작 버튼을 누른 시기와 현재 시각을 추적해야 합니다. **이 정보는 렌더링에 사용되므로 State를 유지합니다.** ```js const [startTime, setStartTime] = useState(null); @@ -121,7 +121,7 @@ export default function Stopwatch() { </Sandpack> -"Stop" 버튼을 누르면 `now` state 변수의 업데이트를 중지하기 위해 기존 interval을 취소해야 합니다. 이를 위해 [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval)을 호출하면 됩니다. 그러나 이전에 사용자가 시작을 눌렀을 때 `setInterval` 호출로 반환된 interval ID를 제공해야 합니다. interval ID는 어딘가에 보관해야 합니다. **interval ID는 렌더링에 사용되지 않으므로 ref에 저장할 수 있습니다.** +"Stop" 버튼을 누르면 `now` State 변수의 업데이트를 중지하기 위해 기존 Interval을 취소해야 합니다. 이를 위해 [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval)을 호출하면 됩니다. 그러나 이전에 사용자가 시작을 눌렀을 때 `setInterval` 호출로 반환된 interval ID를 제공해야 합니다. Interval ID는 어딘가에 보관해야 합니다. **Interval ID는 렌더링에 사용하지 않으므로 Ref에 저장할 수 있습니다.** <Sandpack> @@ -168,20 +168,20 @@ export default function Stopwatch() { </Sandpack> -렌더링에 정보를 사용할 때 해당 정보를 state로 유지합니다. 이벤트 핸들러에게만 필요한 정보이고 변경이 일어날 때 리렌더링이 필요하지 않다면, ref를 사용하는 것이 더 효율적일 수 있습니다. +렌더링에 정보를 사용할 때 해당 정보를 State로 유지합니다. 이벤트 핸들러에게만 필요한 정보이고 변경이 일어날 때 리렌더링이 필요하지 않다면, Ref를 사용하는 것이 더 효율적일 수 있습니다. -## ref와 state의 차이 {/*differences-between-refs-and-state*/} +## Ref와 State의 차이 {/*differences-between-refs-and-state*/} -ref가 state보다 덜 "엄격한" 것으로 생각될 수 있습니다-예를 들어, 항상 state 설정 함수를 사용하지 않고 변경할 수 있습니다. 하지만 대부분은 state를 사용하고 싶을 것입니다. ref는 자주 필요하지 않은 "탈출구"입니다. state와 ref를 비교한 것은 다음과 같습니다. +Ref가 State보다 덜 "엄격한" 것으로 생각될 수 있습니다. 예를 들어, 항상 State 설정 함수를 사용하지 않고 변경할 수 있습니다. 하지만 대부분은 State를 사용하고 싶을 것입니다. Ref는 자주 필요하지 않은 "탈출구"입니다. State와 Ref를 비교한 것은 다음과 같습니다. -| refs | state | -|---------------------------------------------------------------|----------------------------------------------------------------------------------------------------| -| `useRef(initialValue)` 는 `{ current: initialValue }` 을 반환합니다. | `useState(initialValue)` 은 state 변수의 현재 값과 setter 함수 `[value, setValue]` 를 반환합니다. | -| state를 바꿔도 리렌더 되지 않습니다. | state를 바꾸면 리렌더 됩니다. | -| Mutable-렌더링 프로세스 외부에서 `current` 값을 수정 및 업데이트할 수 있습니다. | "Immutable"—state 를 수정하기 위해서는 state 설정 함수를 반드시 사용하여 리렌더 대기열에 넣어야 합니다. | -| 렌더링 중에는 `current` 값을 읽거나 쓰면 안 됩니다. | 언제든지 state를 읽을 수 있습니다. 그러나 각 렌더마다 변경되지 않는 자체적인 state의 [snapshot](/learn/state-as-a-snapshot)이 있습니다. +| Ref | State | +|--------------------------------------------------------------------|----------------------------------------------------------------------------------------------------| +| `useRef(initialValue)` 는 `{ current: initialValue }`를 반환합니다. | `useState(initialValue)`는 State 변수의 현재 값과 Setter 함수 `[value, setValue]`를 반환합니다. | +| State를 바꿔도 리렌더링 하지 않습니다. | State를 바꾸면 리렌더링 합니다. | +| Mutable: 렌더링 프로세스 외부에서 `current` 값을 수정 및 업데이트할 수 있습니다. | Immutable: State를 수정하기 위해서는 State 설정 함수를 반드시 사용하여 리렌더링 대기열에 넣어야 합니다. | +| 렌더링 중에는 `current` 값을 읽거나 쓰면 안 됩니다. | 언제든지 State를 읽을 수 있습니다. 그러나 각 렌더링마다 변경되지 않는 자체적인 State의 [Snapshot](/learn/state-as-a-snapshot)이 있습니다. | -다음은 state와 함께 구현되는 카운터 버튼입니다. +다음은 State와 함께 구현한 카운터 버튼입니다. <Sandpack> @@ -205,9 +205,9 @@ export default function Counter() { </Sandpack> -`count` 값이 표시되므로 state 값을 사용하는 것이 타당합니다. 카운터의 값이 `setCount()`로 설정되면 React는 컴포넌트를 다시 렌더링하고 새 카운트를 반영하도록 화면이 업데이트됩니다. +`count` 값을 표시하므로 State 값을 사용하는 것이 타당합니다. 카운터의 값을 `setCount()`로 설정하면 React는 컴포넌트를 다시 렌더링하고 새 카운트를 반영하도록 화면을 업데이트합니다. -이를 ref와 함께 구현하려고 하면 React는 컴포넌트를 다시 렌더링하지 않으므로 카운트가 변경되는 것을 볼 수 없습니다! 이 버튼을 클릭해도 **텍스트가 업데이트되지 않는** 방법을 확인해봅시다. +이를 Ref와 함께 구현하려고 하면 React는 컴포넌트를 다시 렌더링하지 않으므로 카운트가 변경되는 것을 볼 수 없습니다! 이 버튼을 클릭해도 **텍스트를 업데이트하지 않는** 방법을 확인해봅시다. <Sandpack> @@ -232,13 +232,13 @@ export default function Counter() { </Sandpack> -이것이 렌더링 중에 `ref.current`를 출력하면 신뢰할 수 없는 코드가 나오는 이유입니다. 이 부분이 필요하면 state를 대신 사용해야 합니다. +이것이 렌더링 중에 `ref.current`를 출력하면 신뢰할 수 없는 코드가 나오는 이유입니다. 이 부분이 필요하면 State를 대신 사용해야 합니다. <DeepDive> #### `useRef`는 내부적으로 어떻게 동작하나요? {/*how-does-useref-work-inside*/} -`useState`와 `useRef`가 모두 React에 의해 제공되지만, 원칙적으로 `useRef`는 `useState` 위에 구현될 수 있습니다. React 내부에서 `useRef`가 이렇게 구현되는 것을 상상할 수 있습니다. +React가 `useState`와 `useRef`를 모두 제공하지만, 원칙적으로 `useRef`는 `useState` 위에 구현할 수 있습니다. React 내부에서 `useRef`를 이렇게 구현하는 것을 상상할 수 있습니다. ```js // Inside of React @@ -248,51 +248,51 @@ function useRef(initialValue) { } ``` -첫 번째 렌더 중에 `useRef`는 `{ current: initialValue }`을 반환합니다. 이 객체는 React에 의해 저장되므로 다음 렌더 중에 같은 객체가 반환됩니다. 이 예시에서는 state setter가 어떻게 사용되지 않는지 주의하세요. `useRef`는 항상 동일한 객체를 반환해야 하므로 필요하지 않습니다! +첫 번째 렌더링 중에 `useRef`는 `{ current: initialValue }`을 반환합니다. 이 객체는 React에 의해 저장되므로 다음 렌더링 중에 같은 객체가 반환됩니다. 이 예시에서는 State Setter가 어떻게 사용되지 않는지 주의하세요. `useRef`는 항상 동일한 객체를 반환해야 하므로 필요하지 않습니다! -React는 `useRef`가 실제로 충분히 일반적이기 때문에 built-in 버전을 제공합니다. setter가 없는 일반적인 state 변수라고 생각할 수 있습니다. 객체 지향 프로그래밍에 익숙하다면 refs는 인스턴스 필드를 상기시킬 수 있습니다-하지만 `this.something` 대신에 `somethingRef.current` 처럼 써야 합니다. +React는 `useRef`가 실제로 충분히 일반적이기 때문에 built-in 버전을 제공합니다. setter가 없는 일반적인 state 변수라고 생각할 수 있습니다. 객체 지향 프로그래밍에 익숙하다면 Ref는 인스턴스 필드를 상기시킬 수 있습니다. 하지만 `this.something` 대신에 `somethingRef.current` 처럼 써야합니다. </DeepDive> -## refs를 사용할 시기 {/*when-to-use-refs*/} +## Ref를 사용할 시기 {/*when-to-use-refs*/} -일반적으로 컴포넌트가 React를 "외부"와 외부 API--컴포넌트의 형태에 영향을 미치지 않는 브라우저 API 와 통신해야 할 때 ref를 사용합니다. 다음은 몇 가지 특별한 상황입니다. +일반적으로 컴포넌트가 React를 "외부"와 외부 API--컴포넌트의 형태에 영향을 미치지 않는 브라우저 API 와 통신해야 할 때 Ref를 사용합니다. 다음은 몇 가지 특별한 상황입니다. -- [timeout IDs](https://developer.mozilla.org/ko/docs/Web/API/setTimeout)를 저장 +- [Timeout ID](https://developer.mozilla.org/ko/docs/Web/API/setTimeout)를 저장 - [다음 페이지](/learn/manipulating-the-dom-with-refs)에서 다루는 [DOM 엘리먼트](https://developer.mozilla.org/ko/docs/Web/API/Element) 저장 및 조작 - JSX를 계산하는 데 필요하지 않은 다른 객체 저장 -컴포넌트가 일부 값을 저장해야 하지만 렌더링 로직에 영향을 미치지 않는 경우, refs를 선택합니다. +컴포넌트가 일부 값을 저장해야 하지만 렌더링 로직에 영향을 미치지 않는 경우, Ref를 선택합니다. -## refs의 좋은 예시 {/*best-practices-for-refs*/} +## Ref의 좋은 예시 {/*best-practices-for-refs*/} 다음 원칙을 따르면 컴포넌트를 보다 쉽게 예측할 수 있습니다. -- **refs를 탈출구로 간주합니다.** Refs는 외부 시스템이나 브라우저 API로 작업할 때 유용합니다. 애플리케이션 로직과 데이터 흐름의 상당 부분이 refs에 의존한다면 접근 방식을 재고해 보는 것이 좋습니다. -- **렌더링 중에 `ref.current`를 읽거나 쓰지 마세요.** 렌더링 중에 일부 정보가 필요한 경우 [state](/learn/state-a-components-memory)를 대신 사용하세요. `ref.current`가 언제 변하는지 React는 모르기 때문에 렌더링할 때 읽어도 컴포넌트의 동작을 예측하기 어렵습니다. (`if (!ref.current) ref.current = new Thing()` 과 같은 코드는 첫 번째 렌더 중에 ref를 한 번만 설정하는 경우가 예외입니다.) +- **Ref를 탈출구로 간주합니다.** Ref는 외부 시스템이나 브라우저 API로 작업할 때 유용합니다. 애플리케이션 로직과 데이터 흐름의 상당 부분이 Ref에 의존한다면 접근 방식을 재고해 보는 것이 좋습니다. +- **렌더링 중에 `ref.current`를 읽거나 쓰지 마세요.** 렌더링 중에 일부 정보가 필요한 경우 [State](/learn/state-a-components-memory)를 대신 사용하세요. `ref.current`가 언제 변하는지 React는 모르기 때문에 렌더링할 때 읽어도 컴포넌트의 동작을 예측하기 어렵습니다. (`if (!ref.current) ref.current = new Thing()`과 같은 코드는 첫 번째 렌더링 중에 Ref를 한 번만 설정하는 경우라 예외입니다.) -React state의 제한은 refs에 적용되지 않습니다. 예를 들어 state는 [모든 렌더링에 대한 snapshot](/learn/state-as-a-snapshot) 및 [동기적으로 업데이트되지 않는 것](/learn/queueing-a-series-of-state-updates)과 같이 작동합니다. 그러나 ref의 current 값을 변조하면 다음과 같이 즉시 변경됩니다. +React State의 제한은 Ref에 적용되지 않습니다. 예를 들어 State는 [모든 렌더링에 대한 Snapshot](/learn/state-as-a-snapshot) 및 [동기적으로 업데이트되지 않는 것](/learn/queueing-a-series-of-state-updates)과 같이 작동합니다. 그러나 Ref의 `current` 값을 변조하면 다음과 같이 즉시 변경됩니다. ```js ref.current = 5; console.log(ref.current); // 5 ``` -그 이유는 **ref 자체가 일반 자바스크립트 객체**처럼 동작하기 때문입니다. +그 이유는 **Ref 자체가 일반 자바스크립트 객체**처럼 동작하기 때문입니다. -또한 ref로 작업할 때 [mutation 방지](/learn/updating-objects-in-state)에 대해 걱정할 필요가 없습니다. 변형하는 객체가 렌더링에 사용되지 않는 한, React는 ref 혹은 해당 콘텐츠를 어떻게 처리하든 신경 쓰지 않습니다. +또한 Ref로 작업할 때 [Mutation 방지](/learn/updating-objects-in-state)에 대해 걱정할 필요가 없습니다. 변형하는 객체를 렌더링에 사용하지 않는 한, React는 Ref 혹은 해당 콘텐츠를 어떻게 처리하든 신경 쓰지 않습니다. -## Refs 와 DOM {/*refs-and-the-dom*/} +## Ref와 DOM {/*refs-and-the-dom*/} -임의의 값을 ref로 지정할 수 있습니다. 그러나 ref의 가장 일반적인 사용 사례는 DOM 엘리먼트에 액세스하는 것입니다. 예를 들어 프로그래밍 방식으로 입력의 초점을 맞추려는 경우 유용합니다. `<div ref={myRef}>`와 같은 JSX의 `ref` 어트리뷰트에 ref를 전달하면 React는 해당 DOM 엘리먼트를 `myRef.current`에 넣습니다. 만약 엘리먼트가 DOM 에서 사라지면, React 는 `myRef.current` 값을 `null` 로 업데이트 합니다. 이에 대한 자세한 내용은 [Refs를 사용하여 DOM 조작](/learn/manipulating-the-dom-with-refs)에서 확인할 수 있습니다. +임의의 값을 Ref로 지정할 수 있습니다. 그러나 Ref의 가장 일반적인 사용 사례는 DOM 엘리먼트에 접근하는 것입니다. 예를 들어 프로그래밍 방식으로 입력창에 초점을 맞추려는 경우 유용합니다. `<div ref={myRef}>`와 같은 JSX의 `ref` 어트리뷰트에 Ref를 전달하면 React는 해당 DOM 엘리먼트를 `myRef.current`에 넣습니다. 만약 엘리먼트가 DOM 에서 사라지면, React 는 `myRef.current` 값을 `null` 로 업데이트 합니다. 이에 대한 자세한 내용은 [Ref로 DOM 조작하기](/learn/manipulating-the-dom-with-refs)에서 확인할 수 있습니다. <Recap> -- Refs는 렌더링에 사용되지 않는 값을 고정하기 위한 탈출구이며, 자주 필요하지는 않습니다. -- ref는 읽거나 설정할 수 있는 `current`라는 프로퍼티를 호출할 수 있는 자바스크립트 순수객체입니다. -- `useRef` Hook을 호출해 ref를 달라고 React에 요청할 수 있습니다. -- state와 마찬가지로 ref는 컴포넌트의 렌더링 간에 정보를 유지할 수 있습니다. -- state와 달리 ref의 `current` 값을 설정하면 리렌더가 트리거되지 않습니다. +- Ref는 렌더링에 사용되지 않는 값을 고정하기 위한 탈출구이며, 자주 필요하지는 않습니다. +- Ref는 읽거나 설정할 수 있는 `current`라는 프로퍼티를 호출할 수 있는 자바스크립트 순수객체입니다. +- `useRef` Hook을 호출해 Ref를 달라고 React에 요청할 수 있습니다. +- State와 마찬가지로 Ref는 컴포넌트의 렌더링 간에 정보를 유지할 수 있습니다. +- State와 달리 Ref의 `current` 값을 설정하면 리렌더링을 트리거하지 않습니다. - 렌더링 중에 `ref.current`를 읽거나 쓰지 마세요. 컴포넌트를 예측하기 어렵게 만듭니다. </Recap> @@ -301,7 +301,7 @@ console.log(ref.current); // 5 #### 정상적으로 동작하지 않는 채팅 입력창 수정 {/*fix-a-broken-chat-input*/} -메시지를 입력하고 "Send"를 클릭합니다. "Sent!" 경고창(alert)이 나타나기 전에 3초 정도 지연된다는 것을 알 수 있습니다. 이 지연된 시간 동안 "Undo" 버튼을 볼 수 있습니다. 누르세요. 이 "Undo" 버튼은 "Sent!" 메시지가 나타나지 않도록 합니다. `handleSend` 중 저장된 timeout ID에 대해 [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout)을 호출하면 됩니다. 그러나 "Undo"를 클릭한 후에도 "Sent!" 메시지가 계속 나타납니다. 왜 작동이 되지 않는지 찾아서 고쳐봅시다. +메시지를 입력하고 "Send"를 클릭합니다. "Sent!" 경고창(alert)이 나타나기 전에 3초 정도 지연된다는 것을 알 수 있습니다. 이 지연된 시간 동안 "Undo" 버튼을 볼 수 있습니다. 누르세요. 이 "Undo" 버튼은 "Sent!" 메시지가 나타나지 않도록 합니다. `handleSend` 중 저장된 Timeout ID에 대해 [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout)을 호출하면 됩니다. 그러나 "Undo"를 클릭한 후에도 "Sent!" 메시지가 계속 나타납니다. 왜 작동하지 않는지 찾아서 고쳐봅시다. <Hint> @@ -410,9 +410,9 @@ export default function Chat() { </Solution> -#### 리렌더를 못하는 컴포넌트 수정 {/*fix-a-component-failing-to-re-render*/} +#### 리렌더링을 못하는 컴포넌트 수정 {/*fix-a-component-failing-to-re-render*/} -이 버튼은 "On"과 "Off"를 표시하게 되어 있습니다. 그러나 항상 "Off"로 표시됩니다. 코드가 뭐가 잘못됐나요? 고쳐봅시다. +이 버튼은 "On"과 "Off"를 표시하게 되어 있습니다. 그러나 항상 "Off"를 표시합니다. 코드가 뭐가 잘못됐나요? 고쳐봅시다. <Sandpack> diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index 28c8ac16e..1e5e3af48 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -1,5 +1,5 @@ --- -title: Effect 의존성 제거하기 +title: Effect의 의존성 제거하기 --- <Intro> diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 9aa5ef161..bb0c1e945 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -1,5 +1,5 @@ --- -title: 'Effect가 필요하지 않을 수도 있습니다' +title: 'Effect가 필요하지 않은 경우' --- <Intro> @@ -26,13 +26,13 @@ Effect가 필요하지 않은 두 가지 일반적인 경우가 있습니다. * **렌더링을 위해 데이터를 변환하는 데 Effect가 필요하지 않습니다.** 예를 들어 리스트를 표시하기 전에 필터링하고 싶다고 가정해 보겠습니다. 리스트가 변경될 때 state 변수를 업데이트하는 Effect를 작성하고 싶을 수 있습니다. 하지만 이는 비효율적입니다. state를 업데이트할 때 React는 먼저 컴포넌트 함수를 호출해 화면에 표시될 내용을 계산합니다. 그런 다음 React는 이러한 변경 사항을 DOM에 ["commit"](/learn/render-and-commit)하여 화면을 업데이트합니다. 그리고 나서 React가 Effect를 실행합니다. 만약 Effect도 *즉시* state를 업데이트한다면 전체 프로세스가 처음부터 다시 시작됩니다! 불필요한 렌더링 패스를 피하려면, 컴포넌트의 최상위 레벨에서 모든 데이터를 변환하세요. 그러면 props나 state가 변경될 때마다 해당 코드가 자동으로 다시 실행됩니다. * **사용자 이벤트를 처리하는 데 Effect가 필요하지 않습니다.** 예를 들어 사용자가 제품을 구매할 때 `/api/buy` POST 요청을 전송하고 알림을 표시하고 싶다고 가정해 보겠습니다. 구매 버튼 클릭 이벤트 핸들러에서는 정확히 어떤 일이 일어났는지 알 수 있습니다. Effect가 실행될 때까지 사용자가 무엇을 했는지 (예: 어떤 버튼을 클릭 했는지) 알 수 없습니다. 그렇기 때문에 일반적으로 해당되는 이벤트 핸들러에서 사용자 이벤트를 처리합니다. -외부 시스템과 [동기화](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events)하려면 Effect가 *반드시* 필요합니다. 예를 들어 jQuery 위젯이 React state와 동기화되도록 유지하는 Effect를 작성할 수 있습니다. Effect로 데이터를 가져올 수도 있습니다: 예를 들어 검색 결과를 현재 검색 쿼리와 동기화할 수 있습니다. 모던 [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)는 컴포넌트에 직접 Effect를 작성하는 것보다 더 효율적인 내장 데이터 가져오기 메커니즘을 제공한다는 점을 명심하세요. +외부 시스템과 [동기화](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events)하려면 Effect가 *반드시* 필요합니다. 예를 들어 jQuery 위젯이 React State와 동기화되도록 유지하는 Effect를 작성할 수 있습니다. Effect로 데이터를 가져올 수도 있습니다: 예를 들어 검색 결과를 현재 검색 쿼리와 동기화할 수 있습니다. 모던 [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)는 컴포넌트에 직접 Effect를 작성하는 것보다 더 효율적인 내장 데이터 가져오기 메커니즘을 제공한다는 점을 명심하세요. 올바른 직관을 얻기 위해, 몇 가지 일반적이고 구체적인 예를 살펴봅시다! ### props 또는 state에 따라 state 업데이트하기 {/*updating-state-based-on-props-or-state*/} -`firstName`과 `lastName`이라는 두 개의 state 변수가 있다고 가정해 봅시다. 두 변수를 연결해서 `fullName`을 계산하고 싶습니다. 또한 `firstName`이나 `lastName`이 변경될 때마다 `fullName`이 업데이트되기를 바랍니다. 가장 먼저 `fullName` state 변수를 추가하고 Effect에서 업데이트하고 싶을 것입니다. +`firstName`과 `lastName`이라는 두 개의 state 변수가 있다고 가정해 봅시다. 두 변수를 연결해서 `fullName`을 계산하고 싶습니다. 또한 `firstName`이나 `lastName`이 변경될 때마다 `fullName`이 업데이트되기를 바랍니다. 가장 먼저 `fullName` State 변수를 추가하고 Effect에서 업데이트하고 싶을 것입니다. ```js {5-9} function Form() {