Skip to content

Commit ea17947

Browse files
docs: translate passing-data-deeply-with-context in react-learn (#1189)
# context를 사용해 데이터를 깊게 전달하기 번역 및 불필요한 영문 제거 다음 페이지를 번역하였습니다. 또한, 이미 번역되었음에도 계속 남아있던 영어 원문을 제거하였습니다. 페이지 링크(https://ko.react.dev/learn/passing-data-deeply-with-context) ## 필수 확인 사항 - [x] [기여자 행동 강령 규약<sup>Code of Conduct</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md) - [x] [기여 가이드라인<sup>Contributing</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md) - [x] [공통 스타일 가이드<sup>Universal Style Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md) - [x] [번역을 위한 모범 사례<sup>Best Practices for Translation</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md) - [x] [번역 용어 정리<sup>Translate Glossary</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md) - [x] [`textlint` 가이드<sup>Textlint Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md) - [x] [맞춤법 검사<sup>Spelling Check</sup>](https://nara-speller.co.kr/speller/) ## 선택 확인 사항 - [ ] 번역 초안 작성<sup>Draft Translation</sup> - [ ] 리뷰 반영<sup>Resolve Reviews</sup> --------- Co-authored-by: 루밀LuMir <rpfos@naver.com>
1 parent c53dfca commit ea17947

File tree

1 file changed

+5
-20
lines changed

1 file changed

+5
-20
lines changed

src/content/learn/passing-data-deeply-with-context.md

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -214,13 +214,13 @@ Context는 부모가 트리 내부 전체에, 심지어 멀리 떨어진 컴포
214214

215215
<Diagram name="passing_data_context_close" height={160} width={608} captionPosition="top" alt="Diagram with a tree of three components. The parent contains a bubble representing a value highlighted in orange which projects down to the two children, each highlighted in orange." >
216216

217-
Using context in close children
217+
Context를 가까운 자식 컴포넌트에서 사용하기
218218

219219
</Diagram>
220220

221221
<Diagram name="passing_data_context_far" height={430} width={608} captionPosition="top" alt="Diagram with a tree of ten nodes, each node with two children or less. The root parent node contains a bubble representing a value highlighted in orange. The value projects down directly to four leaves and one intermediate component in the tree, which are all highlighted in orange. None of the other intermediate components are highlighted.">
222222

223-
Using context in distant children
223+
Context를 먼 자식 컴포넌트에서 사용하기
224224

225225
</Diagram>
226226

@@ -476,9 +476,7 @@ export default function Section({ level, children }) {
476476
}
477477
```
478478

479-
이것은 React에게 `Section` 내의 어떤 컴포넌트가 `LevelContext`를 요구하면 `level`을 주라고 알려줍니다. 컴포넌트는 그 위에 있는 UI 트리에서 가장 가까운 `<LevelContext.Provider>`의 값을 사용합니다.
480-
481-
This tells React: "if any component inside this `<Section>` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `<LevelContext>` in the UI tree above it.
479+
이것은 React에게 `<Section>` 내의 어떤 컴포넌트가 `LevelContext`를 요구하면 `level`을 주라고 알려줍니다. 컴포넌트는 그 위에 있는 UI 트리에서 가장 가까운 `<LevelContext>`의 값을 사용합니다.
482480

483481
<Sandpack>
484482

@@ -569,13 +567,9 @@ export const LevelContext = createContext(1);
569567
기존 코드와 동일한 결과이지만 `level` prop을 각 `Heading` 컴포넌트에 전달할 필요는 없습니다! 대신 위의 가장 가까운 `Section`에게 제목 레벨을 "확인"합니다.
570568

571569
1. `level` prop 을 `<Section>`에 전달합니다.
572-
2. `Section`은 자식을 `<LevelContext.Provider value={level}>`로 감싸줍니다.
570+
2. `Section`은 자식을 `<LevelContext value={level}>`로 감싸줍니다.
573571
3. `Heading``useContext(LevelContext)`를 사용해 가장 근처의 `LevelContext`의 값을 요청합니다.
574572

575-
1. You pass a `level` prop to the `<Section>`.
576-
2. `Section` wraps its children into `<LevelContext value={level}>`.
577-
3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`.
578-
579573
## 같은 컴포넌트에서 context를 사용하며 제공하기 {/*using-and-providing-context-from-the-same-component*/}
580574

581575
지금은 각각의 섹션에 `level`을 수동으로 지정해야 합니다.
@@ -874,20 +868,11 @@ Context는 정적인 값으로 제한되지 않습니다. 다음 렌더링 시
874868
- Context를 전달하려면 다음과 같습니다
875869
1. `export const MyContext = createContext(defaultValue)`로 context를 생성하고 내보내세요.
876870
2. `useContext(MyContext)` Hook에 전달해 얼마나 깊이 있든 자식 컴포넌트가 읽을 수 있도록 합니다.
877-
3. 자식을 `<MyContext.Provider value={...}>`로 감싸 부모로부터 context를 받도록 합니다.
871+
3. 자식을 `<MyContext value={...}>`로 감싸 부모로부터 context를 받도록 합니다.
878872
- Context는 중간의 어떤 컴포넌트도 지나갈 수 있습니다.
879873
- Context를 활용해 "주변에 적응하는" 컴포넌트를 작성할 수 있습니다.
880874
- Context를 사용하기 전에 props를 전달하거나 JSX를 `children`으로 전달하는 것을 먼저 시도해보세요.
881875
882-
* Context lets a component provide some information to the entire tree below it.
883-
* To pass context:
884-
1. Create and export it with `export const MyContext = createContext(defaultValue)`.
885-
2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
886-
3. Wrap children into `<MyContext value={...}>` to provide it from a parent.
887-
* Context passes through any components in the middle.
888-
* Context lets you write components that "adapt to their surroundings".
889-
* Before you use context, try passing props or passing JSX as `children`.
890-
891876
</Recap>
892877
893878
<Challenges>

0 commit comments

Comments
 (0)