언제-함수를-Hooks의-의존성배열에-두어야할까요?, 당신의-코드를-즉시-향상시키는-4가지-React-팁들(24.06.03) #6
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
Jaymyong66
changed the title
llqqssttyy
reviewed
Jun 9, 2024
| @@ -0,0 +1,365 @@ | |||
| # 4 React Tips to Instantly Improve Your Code | |||
There was a problem hiding this comment.
번역 글을 보다가 원문의 의미가 궁금할 수도 있으니 원문으로 이동할 수 있는 링크 추가해 주시면 좋을 것 같아요~
| })); | ||
| }; | ||
|
|
||
| // What if we need one more input? Should we create another handler for it? |
There was a problem hiding this comment.
사소하긴 한데 주석에 코드에 대한 설명이 적혀 있는 경우라면 주석도 번역해 주시면 좋을 것 같습니다~
Comment on lines
+291
to
+307
| const ACCOUNTS_MAP = { | ||
| vip: VipAccount, | ||
| usual: UsualAccount, | ||
| admin: AdminAccount, | ||
| moderator: ModeratorAccount, | ||
| }; | ||
|
|
||
| function Account({ type }) { | ||
| const Component = ACCOUNTS_MAP[type]; | ||
|
|
||
| return ( | ||
| <div className="account"> | ||
| <Component /> | ||
| <AccountStatistics /> | ||
| </div> | ||
| ); | ||
| } |
| @@ -0,0 +1,260 @@ | |||
| # [When do I use functions in a Hooks Dependency Array?](https://reacttraining.com/blog/when-to-use-functions-in-hooks-dependency-array) | |||
Comment on lines
+23
to
+24
| // 메시지가 변경될 때마다 제목을 변경하는 것은 side-effects입니다. | ||
| // 그래서 `useEffect`가 필요합니다. |
| } | ||
| ``` | ||
|
|
||
| 우리의 효과는 message 상태에 "의존"합니다. 따라서 그 상태가 변경되면 효과를 다시 실행해야 합니다. |
There was a problem hiding this comment.
*제안
원문 단어가 'effect'여서 '효과'로 번역해주셨군요~
효과도 좋지만 useEffect에서 실행시키는 로직이니 '부수 효과'로 번역하거나 아래에 다시 등장하는 effect 처럼 원래 단어를 그대로 사용해 통일성을 맞추는 건 어떨까요?
|
|
||
| 이제 linter가 saveToLocalStorage를 의존성 배열에 추가하라고 요청합니다. 차이점은 무엇일까요? | ||
|
|
||
| 궁극적으로, React는 effects 내의 상태가 변경될 경우 effect를 re-run 해야 합니다. 이전에 `saveToLocalStorage`가 import 되었을 때, linter는 그 함수가 컴포넌트 상태를 "close over"하여 변경되었을 때 effect를 다시 실행할 필요가 없다는 것을 알고 있습니다. 그러나 `saveToLocalStorage`가 prop일 때, 린터는 부모 컴포넌트가 `ComposeMessage`를 어떻게 구현할지에 대해 충분히 알지 못합니다. 다시 말해, linter는 전체 앱을 탐색하여 `ComposeMessage`가 사용되는 모든 위치와 부모가 prop을 전달하는 방식을 알지 못합니다. 그리고 설령 그렇게 한다 하더라도, linter는 당신이 미래에 그것을 어떻게 사용할지 의도를 알지 못합니다. 이러한 불확실성 때문에, 린터는 이제 `saveToLocalStorage`를 의존성 배열에 추가하라고 요청합니다. |
There was a problem hiding this comment.
*제안
"re-run"도 "close over"처럼 React의 실행 과정을 의미하는 용어인가요? 그렇다면 표현 방식을 통일해서 큰 따옴표를 붙여 주시거나 '재실행'으로 번역해보는 건 어떤가요?
|
피드백 반영 완료했슴다~! 추가 사항 있다면 알려주시고 없으면 머지해주세요! |
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.
4-React-Tips-to-Instantly-Improve-Your-Code 링크
When-do-I-use-functions-in-a-Hooks-Dependency-Array 링크
아티클이 좀 쉬운 것 같아서 하나 더 추가해보았습니닷!