Add translation of hooks-effect - #205

yumidev · 2020-01-29T14:33:26Z

Progress

번역 초안 작성 (Draft translation)
공통 스타일 가이드 확인 (Check the common style guide)
모범사례 확인 (Check best practices)
용어 확인 (Check the term)
맞춤법 검사 (Spelling check)
리뷰 반영 (Resolve reviews)

netlify · 2020-01-29T14:38:36Z

Deploy preview for ko-reactjs-org ready!

Built with commit 6330b28

https://deploy-preview-205--ko-reactjs-org.netlify.com

anthonyminyungi

@yumidev 님 안녕하세요.
리뷰 요청하서서 한번 쭉 읽어보고 개인적인 감상을 남겨보았습니다.
우선 전체적으로 짜임새 있게 잘 번역이 되어 있어서 굉장히 좋게 읽었습니다.
다만 몇 가지 첨언드리고 싶은 것이 있어서 몇 자 적어보았습니다.

저의 리뷰는 참고 사항으로만 보시고 한 편으로 흘리신 뒤에
메인테이너 분들과 관리자께서 리뷰를 해주시면 그것을 반영하시면서
셀프 리뷰를 한번 더 하시는 것이 좋을 것 같다는 생각이 들었습니다.
제가 토씨 하나 곱씹으면서 읽은 것이 아니라 정확치 않을 수도 있겠지만
제가 리뷰에 미처 명시적으로 표시하지 못하고 놓친 부분들도 몇 가지 있는 것 같습니다. (띄어쓰기라던가.. 미세한 뉘앙스 등.)

저는 개인적으로 이 문서 번역 작업을 하면서 기존에 번역되어 있던 문서들을 많이 참고하면서
의미를 전달하는 전체적인 톤과 뉘앙스에 많이 초점을 맞췄었고, 그래서 번역 착수한 기간에 비해서
(물론 다른 개인적인 일들이 있긴 했지만) 조금 느리고 오래걸리지 않았나 하는 생각이 듭니다.

우선 자세한 내용들은 리뷰에 있지만 이 문서 번역 전반에 걸쳐
제가 말씀드리고 싶은 큰 줄기는 이렇습니다.

side effect를 부작용으로 번역 후 괄호 안에 영문을 남겨두신 것

이 것은 원문을 사용하는 것이 좋을 것 같습니다.

argument를 인수 라고 표현하신 것.

이 부분은 개인적으로 인자 가 맞는 표현이라고 생각됩니다.

봅시다 와 같은 let's ~의 반 강제(?)뉘앙스의 번역

이 것은 조금 더 개인적인 생각에 가깝지만, 보겠습니다, 살펴보도록 하겠습니다. 와 같은 식의 뉘앙스가 더 매끄럽다고 생각됩니다.

대강 이정도인 것 같습니다.
다른 문서에 비해서 매우 긴 편에 속하는데, 번역하시느라 정말 고생하셨습니다.
저도 처음 이 문서 번역에 착수하면서 막막한 느낌이 조금 들었었거든요... ㅋㅋ
곧 머지되어 react.org 에서 반영된 문서로 만날수 있길 기대하겠습니다!

anthonyminyungi · 2020-02-01T08:00:53Z


-Now let's see how we can do the same with the `useEffect` Hook.
+이제 `useEffect` Hook에서 같은 기능을 어떻게 구현하는지 봅시다.

-### Example Using Hooks {#example-using-hooks}
+### Hook을 이용하는 예시 {#example-using-hooks}

-We've already seen this example at the top of this page, but let's take a closer look at it:
+아래의 코드는 위에서 이미 보았던 것이지만 이번엔 좀 더 자세히 들여다봅시다.



저는 번역 작업을 하면서 기존에 번역되어있던 문서들의 뉘앙스를 많이 참고했습니다.
let's see ~ 혹은 let's take a look ~과 같은 느낌은 살펴보겠습니다. 혹은 보겠습니다. 와 같은 뉘앙스로 작성했었습니다.

anthonyminyungi · 2020-02-01T08:03:16Z

  componentDidUpdate(prevProps) {
-    // Unsubscribe from the previous friend.id
+    // 이전 friend.id에서 구독을 해지한다.
    ChatAPI.unsubscribeFromFriendStatus(
      prevProps.friend.id,
      this.handleStatusChange
    );
-    // Subscribe to the next friend.id
+    // 다음 friend.id를 구독한다
    ChatAPI.subscribeToFriendStatus(


이 부분도 존댓말 뉘앙스가 들어가면 좋을 것 같습니다.

anthonyminyungi · 2020-02-01T08:06:10Z

+**`useEffect`가 하는 일은 무엇인가요?** useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말합니다. 리액트는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다) DOM 업데이트를 수행한 이후에 불러낼 것입니다. 우리는 이 effect를 통해 문서 타이틀을 지정하지만 이 외에도 데이터를 가져오거나 다른 명령형(imperative) API를 불러내는 일도 할 수 있습니다. 

-**Why is `useEffect` called inside a component?** Placing `useEffect` inside the component lets us access the `count` state variable (or any props) right from the effect. We don't need a special API to read it -- it's already in the function scope. Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.
+**`useEffect`를 컴포넌트 안에서 불러내는 이유는 무엇인가요?** `useEffect`를 컴포넌트 내부에 둠으로써 effect를 통해 `count` state 변수(또는 그 어떤 prop에도)에 접근할 수 있게 됩니다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있는 것입니다. Hook은 자바스크립트의 클로저를 이용하여 리액트에 한정된 API를 고안하는 것보다 자바스크립트가 이미 가지고 있는 방법을 이용하여 문제를 해결합니다.

-**Does `useEffect` run after every render?** Yes! By default, it runs both after the first render *and* after every update. (We will later talk about [how to customize this](#tip-optimizing-performance-by-skipping-effects).) Instead of thinking in terms of "mounting" and "updating", you might find it easier to think that effects happen "after render". React guarantees the DOM has been updated by the time it runs the effects.
+**`useEffect`는 렌더링 이후에 매번 수행되는 건가요?** 네, 기본적으로 첫번째 렌더링*과* 이후의 모든 업데이트에서 수행됩니다.(나중에 [effect를 필요에 맞게 수정하는 방법](#tip-optimizing-performance-by-skipping-effects)에 대해 다룰 것입니다.) 마운팅과 업데이트라는 방식으로 생각하는 대신 effect를 렌더링 이후에 발생하는 것으로 생각하는 것이 더 쉬울 것입니다. 리액트는 effect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장합니다.


L227, L229에 사용하신 것처럼 ~일까요? 와 같은 뉘앙스가 더욱 읽기 좋다고 생각합니다.

anthonyminyungi · 2020-02-01T08:09:51Z

+>팁
 >
->Unlike `componentDidMount` or `componentDidUpdate`, effects scheduled with `useEffect` don't block the browser from updating the screen. This makes your app feel more responsive. The majority of effects don't need to happen synchronously. In the uncommon cases where they do (such as measuring the layout), there is a separate [`useLayoutEffect`](/docs/hooks-reference.html#uselayouteffect) Hook with an API identical to `useEffect`.
+>`componentDidMount`나 `componentDidUpdate`와는 달리 `useEffect`에서 사용되는 effect는 브라우저에서 화면이 업데이트되는 것을 방해하지 않습니다. 애플리케이션이 좀 더 반응형으로 보일 수 있게 하는 부분입니다. 대부분의 effect는 동기적 실행이 필요없습니다. 동기적 실행이 필요한 드문 경우들(레이아웃의 계산과 같은)은 `useEffect`과 동일한 [`useLayoutEffect`](/docs/hooks-reference.html#uselayouteffect) Hook을 사용하면 됩니다.


반응형으로 보일수 있게 와 같은 부분은 응답성 혹은 반응성을 향상시킨다는 의미가 되면 좋을 것 같습니다.
아래는 제가 작성했던 번역입니다. 참고가 되실까 해서 첨부합니다.

componentDidMount 혹은 componentDidUpdate 와는 달리 useEffect를 통해 예약된 effect는 브라우저가 화면을 업데이트하는 것을 차단하지 않습니다. 이를 통해 앱의 응답성을 더욱 향상시켜줍니다. 대부분의 effect들은 동기적으로 발생할 필요가 없습니다. 흔한 경우는 아니지만 (레이아웃 측정과 같은 경우) useEffect와 동일한 API를 사용하는 useLayoutEffect 라는 별도의 Hook이 존재합니다.

첨부해주신 내용을 상당 부분 반영해서 수정하겠습니다.

componentDidMount 혹은 componentDidUpdate와는 달리 useEffect에서 사용되는 effect는 브라우저가 화면을 업데이트되는 것을 차단하지 않습니다. 이를 통해 애플리케이션의 반응성을 향상시켜줍니다. 대부분의 effect들은 동기적으로 실행될 필요가 없습니다. 흔하지는 않지만 (레이아웃의 측정과 같은) 동기적 실행이 필요한 경우에는 useEffect와 동일한 API를 사용하는 useLayoutEffect라는 별도의 Hook이 존재합니다.

anthonyminyungi · 2020-02-01T08:17:19Z


-### Tip: Use Multiple Effects to Separate Concerns {#tip-use-multiple-effects-to-separate-concerns}
+### 팁: 관심사를 구분하려고 한다면 Multiple Effect를 사용하라{#tip-use-multiple-effects-to-separate-concerns}



여기도 존댓말 뉘앙스가 들어가면 좋지 않을까 하는 생각이 들었습니다.

anthonyminyungi · 2020-02-01T08:18:53Z


-## Next Steps {#next-steps}
+## 다음 순서 {#next-steps}



다른 번역본을 참고해봤을 때, 다음 단계라는 표현이 더 맞는 표현일 것 같습니다.

anthonyminyungi · 2020-02-01T08:20:55Z

 ```

-In the future, the second argument might get added automatically by a build-time transformation.
+두번째 인수는 장차 build-time 변환에 의해 자동으로 더해질 수도 있습니다.


두 번째 인자는 빌드 시 변환에 의해 자동으로 추가될 수도 있습니다.

인수 ==> 인자

build time ==> 빌드 시

장차 ==> (삭제)

와 같이 작성하는 것이 좋을 것 같습니다.

anthonyminyungi · 2020-02-01T08:24:18Z

+### 팁: Effect를 건너뛰어 성능 최적화하기 {#tip-optimizing-performance-by-skipping-effects}

-In some cases, cleaning up or applying the effect after every render might create a performance problem. In class components, we can solve this by writing an extra comparison with `prevProps` or `prevState` inside `componentDidUpdate`:
+모든 렌더링 이후에 effect를 정리(clean-up)하거나 적용하는 것이 때때로 퍼포먼스 이슈(성능저하)를 발생시키는 경우도 있습니다. 클래스 컴포넌트의 경우에는 `componentDidUpdate`에서 `prevProps`나 `prevState`와의 비교를 통해 이러한 문제를 해결할 수 있습니다.


퍼포먼스 이슈 는 삭제하고 성능 저하라고만 작성하셔도 좋을 것 같습니다.

anthonyminyungi · 2020-02-01T08:27:29Z

+>주의
 >
->If you use this optimization, make sure the array includes **all values from the component scope (such as props and state) that change over time and that are used by the effect**. Otherwise, your code will reference stale values from previous renders. Learn more about [how to deal with functions](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) and [what to do when the array changes too often](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often).
+>이 최적화 방법을 사용한다면 배열이 **컴포넌트 범위 내에서 바뀌는 값들과 effect에 의해 사용되는 값들을 모두 포함하는 것**을 잊지 말아주세요. 그렇지 않으면 현재 값이 아닌 이전의 렌더링 때의 값을 참고하게 됩니다. 이에 대해서는 [함수를 다루는 방법](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies)과 [의존성 값 배열이 자주 바뀔 때는 어떻게 해야하는가](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often)에서 더 자세히 알아볼 수 있습니다.


잊지 말아주세요 ==> 기억해주세요
의존성 값 배열 ==> 의존성 배열

과 같이 변경되면 좋을 것 같습니다.

into hooks_effect

anthonyminyungi · 2020-02-10T03:16:56Z

알림이 와서 새로 수정하여 커밋하신 내용을 확인했는데, 제가 리뷰한 내용을 면밀하게 반영해주셨더라구요!
받아들여주셔서 감사드립니다. 제가 읽기에는 굉장히 매끄러운 번역이 된 것 같습니다. 고생하셨습니다!
메인테이너분들이 한번 더 체크해주시고 approval 주시면 될 것 같습니다.

yumidev · 2020-03-01T01:28:21Z

알림이 와서 새로 수정하여 커밋하신 내용을 확인했는데, 제가 리뷰한 내용을 면밀하게 반영해주셨더라구요!
받아들여주셔서 감사드립니다. 제가 읽기에는 굉장히 매끄러운 번역이 된 것 같습니다. 고생하셨습니다!
메인테이너분들이 한번 더 체크해주시고 approval 주시면 될 것 같습니다.

업데이트 확인해주셔서 감사합니다. 혹여 모르니 오늘 맞춤법 검사를 한번 더 진행하고 approval에 필요한 순서를 확인해보겠습니다. 리뷰 정말 감사해요!

hg-pyun

@anthonyminyungi 님께서 굉장히 잘 보아주셔서, 따로 더 코멘트 할 건 없을 것 같습니다. 감사합니다.
@yumidev 번역하느라 고생하셨습니다!

hg-pyun · 2020-03-06T10:25:45Z

딱히 맞춤법도 문제없어 보이므로 머지하겠습니다!

yumidev mentioned this pull request Jan 29, 2020

Korean Translation Progress #1

Open

yumidev force-pushed the hooks_effect branch 9 times, most recently from fbf65d4 to 811ea75 Compare January 29, 2020 15:41

Add translation of hooks-effect

3c00e5c

yumidev force-pushed the hooks_effect branch from 811ea75 to 3c00e5c Compare January 29, 2020 15:44

anthonyminyungi reviewed Feb 1, 2020

View reviewed changes

hg-pyun and others added 3 commits February 5, 2020 23:10

Merge branch 'master' into hooks_effect

23988bd

Update translation by review comments

667df47

Merge branch 'hooks_effect' of https://github.com/yumidev/ko.reactjs.org

8a10f62

into hooks_effect

yumidev and others added 2 commits March 1, 2020 11:20

Grammar check

4145fb0

Merge branch 'master' into hooks_effect

7428075

hg-pyun approved these changes Mar 4, 2020

View reviewed changes

hg-pyun added the needs +1 approval label Mar 4, 2020

hg-pyun self-requested a review March 4, 2020 13:20

hg-pyun added ready to merge and removed needs +1 approval labels Mar 5, 2020

Merge branch 'master' into hooks_effect

6330b28

hg-pyun merged commit 970a44f into reactjs:master Mar 6, 2020


		### Tip: Use Multiple Effects to Separate Concerns {#tip-use-multiple-effects-to-separate-concerns}
		### 팁: 관심사를 구분하려고 한다면 Multiple Effect를 사용하라{#tip-use-multiple-effects-to-separate-concerns}

Conversation

yumidev commented Jan 29, 2020 • edited by hg-pyun Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Progress

Uh oh!

netlify Bot commented Jan 29, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

anthonyminyungi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yumidev Feb 9, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

anthonyminyungi commented Feb 10, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yumidev commented Mar 1, 2020

Uh oh!

hg-pyun left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hg-pyun commented Mar 6, 2020

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yumidev commented Jan 29, 2020 •

edited by hg-pyun

Loading

netlify Bot commented Jan 29, 2020 •

edited

Loading

yumidev Feb 9, 2020 •

edited

Loading

anthonyminyungi commented Feb 10, 2020 •

edited

Loading

hg-pyun left a comment •

edited

Loading