[Paeng] 4번째 2차 번역 #11
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
qq8721443
approved these changes
Jun 6, 2023
| @@ -45,7 +45,7 @@ Hooks를 시작할 때 나 역시 이 질문들에 대해서 혼란스러웠습 | |||
|
|
|||
| 🤔 **Question: `useEffect` 안에서 데이터 패칭(Data Fetching)은 어떻게 합니까? 배열([])은 무엇입니까?** | |||
|
|
|||
| [이 article](https://www.robinwieruch.de/react-hooks-fetch-data/)은 `useEffect`로 데이터 패칭하는 아주 좋은 기본서입니다. 글을 끝까지 꼭 읽어보세요! 지금 글 같이 길지 않습니다. `[]`는 이펙트에 리액트 데이터 흐름에 참여하는 어떠한 값도 사용하지 않겠다는 것을 의미하여, 한 번 적용해도 안전합니다. 빈 배열에 실제 값이 사용되는 것이 버그를 일으키는 주된 원인 중 하나입니다. 의존성 체크를 생략하는 것보다는 의존성을 필요로 하는 상황을 제거하는 몇가지 전략(주로 `useReducer`와 `useCallback`)을 익혀야 할 필요가 있습니다. | |||
| [이 article](https://www.robinwieruch.de/react-hooks-fetch-data/)은 `useEffect`로 데이터 패칭하는 아주 좋은 기본서입니다. 글을 끝까지 꼭 읽어보세요! 지금 글 같이 길지 않습니다. `[]`는 이펙트에 리엑트 데이터 흐름에 참여하는 어떠한 값도 사용하지 않겠다는 것을 의미하여, 한 번 적용해도 안전합니다. 빈 배열에 실제 값이 사용되는 것이 버그를 일으키는 주된 원인 중 하나입니다. 의존성 체크를 생략하는 것보다는 의존성을 필요로 하는 상황을 제거하는 몇가지 전략(주로 `useReducer`와 `useCallback`)을 익혀야 할 필요가 있습니다. | |||
There was a problem hiding this comment.
외래어 표기법에 따라 리엑트 -> 리액트 가 맞는 것 같은데 수정하신 이유가 있을까요?? 같은 이유로 데이터 패칭 -> 데이터 페칭 이 더 낫지 않을까 싶긴 하지만 어차피 외래어니깐 크게 문제는 없을 것 같습니당ㅎㅎ
프런트엔드와 프론트엔드 같은 느낌이랄까...
|
|
||
| 이것은 무슨 의미 입니까? `count`가 state의 변화를 "보고" 자동으로 업데이트 하는 겁니까? 처음 리엑트를 배울때 직관적으로 보기 좋지만 [정확한 멘탈 모델](https://overreacted.io/react-as-a-ui-runtime/)은 아닙니다. | ||
|
|
||
| 이 예제에서 `count`는 단지 숫자입니다. "데이터 바인딩", "watcher", "proxy", 그외와 같은 마법적인 것이 아닙니다. 이것은 그냥 숫자입니다. |
There was a problem hiding this comment.
이것은 마법의 "데이터 바인딩", "와쳐", "프록시", 또는 다른 어떤 것도 아닙니다. 정도로 번역하면 어떨까 싶습니다! magic이 data binding을 수식하는 말인 것 같네욥!
| //... | ||
| ``` | ||
|
|
||
| 컴포넌트를 처음 렌더링 할때, `count`가 `useState()`로 부터 가져온 값은 `0`입니다. `setCount(1)`을 호출하면, 리엑트는 컴포넌트를 다시 호출합니다. 이 때, `count`는 `1`이 되는 식이 됩니다. |
There was a problem hiding this comment.
비슷하지만 useState()로 부터 가져온 count 값은 0입니다. 로 번역하는 게 조금 더 자연스러울 것 같습니다!!
| <p>You clicked {count} times</p> | ||
| ``` | ||
|
|
||
| **이것은 렌더 결과에 숫자 값을 내장한 것입니다.** 이 숫자는 리엑트에 의해 제공됩니다. `setCount`를 호출 할때, 리엑트는 다른 `count` 값과 함께 컴포넌트를 다시 호출합니다. 그리고나서 리엑트는 최신 렌더 결과에 맞도록 업데이트 합니다. |
There was a problem hiding this comment.
DOM을 업데이트 한다는 내용도 포함되어야 할 것 같습니당!
|
|
||
| **이것은 렌더 결과에 숫자 값을 내장한 것입니다.** 이 숫자는 리엑트에 의해 제공됩니다. `setCount`를 호출 할때, 리엑트는 다른 `count` 값과 함께 컴포넌트를 다시 호출합니다. 그리고나서 리엑트는 최신 렌더 결과에 맞도록 업데이트 합니다. | ||
|
|
||
| 요점은 어느 렌더가 있더라도 렌더 내부의 상수 `count`는 변하지 않는 다는 것입니다. 컴포넌트를 다시 호출하고 - 각 렌더사이에서 분리된 각각의 `count` 값들을 "보는" 것입니다. |
|
|
||
| ## 각 렌더는 고유의 이벤트 헨들러들을 가집니다. | ||
|
|
||
| 여태까지 그런데로 잘되었습니다. 이벤트 헨들러들은 무엇입니까? |
There was a problem hiding this comment.
헨들러 -> 핸들러가 더 범용적으로 사용하는 것 같습니다!
이벤트 핸들러들은 무엇입니까? 보다는 이벤트 핸들러에 대해서는 어떨까요? 정도로 번역하면 어떨까 싶네욥.
위에서는 prop과 state에 대해서 이야기 했는데 그럼 이벤트 핸들러는 어떻게 동작할까? 같은 느낌
| sayHi(someone); | ||
| ``` | ||
|
|
||
| 이 [예시에서](https://codesandbox.io/s/mm6ww11lk8), 외부 `someone` 변수는 여러번 재할당 됩니다. (리엑트 어딘가에서와 마찬가지로, 현재 컴포넌트의 state가 변할 수 있습니다.) **그러나, 내부 `sayHi`는, 특정 호출마다 `person`과 연관되어있는 지역 상수 `name`이 있습니다.** 이 상수는 지역상수이기 때문에, 각 호출들로 부터 분리해야 합니다! 시간이 완료될 때, 각 alert는 고유의 `name`을 "기억"하는 결과가 나옵니다. |
There was a problem hiding this comment.
시간이 완료될 때 로 번역하는 것보다 타임아웃이 실행될 때? 저도 말로 쓰려니까 뭐라해야 할 지는 모르겠는데... ㅋㅋㅋㅋㅋ 글에서의 when the timeouts fire는 setTimeout의 콜백함수가 실행되는 걸 의미하니까... 그걸 나타낼 수 있도록 번역하는 게 더 좋을 것 같다는 생각입니당!
| } | ||
| ``` | ||
|
|
||
| 왜 이 [데모](https://codesandbox.io/s/w2wxl3yo0l)에서 이벤트 handler가 특정 렌더에 "속해"있으며, 클릭할 때, 렌더 시점에서 `counter` state를 유지한채 사용합니다. |
There was a problem hiding this comment.
Suggested change
| 왜 이 [데모](https://codesandbox.io/s/w2wxl3yo0l)에서 이벤트 handler가 특정 렌더에 "속해"있으며, 클릭할 때, 렌더 시점에서 `counter` state를 유지한채 사용합니다. | |
| 이것이 [데모](https://codesandbox.io/s/w2wxl3yo0l)에서 이벤트 handler가 특정 렌더에 "속해"있으며, 클릭할 때, 렌더 시점에서 `counter` state를 유지한 채 사용하는 이유입니다. |
로 번역하는 건 어떨까 생각합니당
|
|
||
| **어떠한 렌더내부에서도, props와 state는 같은 값을 유지합니다.** 그러나 props와 state가 렌더사이에서 분리가 된다면, 이 것들을 사용하는 어떤 값들도 분리되어 있는 것입니다.(이벤트 handler 포함) 이것들은 특정 렌더에 "속해"있습니다. 비동기 함수 내부의 이벤트 handler라 할지라도 같은 `count`값을 "보게"될 것 입니다. | ||
|
|
||
| 참고 노트: 위의 `handleAlertClick` 함수에 구체적인 `count` 값을 넣었습니다. `count`가 특정 렌더에서 변할 가능성이 없어 이런 변환은 안전합니다. `const`와 숫자로 선언되어 있기 때문입니다. 객체와 같은 다른 값들 또한 같은 방법이 안전할 것이라고 생각 할 수 있지만, 불변 state가 있어야 하는 전제가 필요합니다. 이전 렌더에 속해있는 state가 손상되지 않기 때문에 객체 변환 대신 새로운 객체로 `setSomething(newObj)`를 호출하는 것이 좋습니다. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
2차 번역 완료했습니다. :)