Skip to content

docs: translation passing-data-deeply-with-context in react-learn #1189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

docs: translation passing-data-deeply-with-context in react-learn #1189

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e757720
docs(i18n-ko): translate diagram title for context providing data to …
ohsung0722 Apr 29, 2025
3d58b70
docs(i18n-ko): Remove leftover English sentences
ohsung0722 Apr 29, 2025
fa658c2
docs(i18n-ko): Remove leftover English sentences
ohsung0722 Apr 29, 2025
65d6212
docs(i18n-ko): Remove leftover English sentences
ohsung0722 Apr 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 2 additions & 17 deletions src/content/learn/passing-data-deeply-with-context.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,13 +214,13 @@ Context는 부모가 트리 내부 전체에, 심지어 멀리 떨어진 컴포

<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." >

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

</Diagram>

<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.">

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

</Diagram>

Expand Down Expand Up @@ -478,8 +478,6 @@ export default function Section({ level, children }) {

이것은 React에게 `Section` 내의 어떤 컴포넌트가 `LevelContext`를 요구하면 `level`을 주라고 알려줍니다. 컴포넌트는 그 위에 있는 UI 트리에서 가장 가까운 `<LevelContext.Provider>`의 값을 사용합니다.

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.

<Sandpack>

```js
Expand Down Expand Up @@ -572,10 +570,6 @@ export const LevelContext = createContext(1);
2. `Section`은 자식을 `<LevelContext.Provider value={level}>`로 감싸줍니다.
3. `Heading`은 `useContext(LevelContext)`를 사용해 가장 근처의 `LevelContext`의 값을 요청합니다.

1. You pass a `level` prop to the `<Section>`.
2. `Section` wraps its children into `<LevelContext value={level}>`.
3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`.

## 같은 컴포넌트에서 context를 사용하며 제공하기 {/*using-and-providing-context-from-the-same-component*/}

지금은 각각의 섹션에 `level`을 수동으로 지정해야 합니다.
Expand Down Expand Up @@ -879,15 +873,6 @@ Context는 정적인 값으로 제한되지 않습니다. 다음 렌더링 시
- Context를 활용해 "주변에 적응하는" 컴포넌트를 작성할 수 있습니다.
- Context를 사용하기 전에 props를 전달하거나 JSX를 `children`으로 전달하는 것을 먼저 시도해보세요.

* Context lets a component provide some information to the entire tree below it.
* To pass context:
1. Create and export it with `export const MyContext = createContext(defaultValue)`.
2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
3. Wrap children into `<MyContext value={...}>` to provide it from a parent.
* Context passes through any components in the middle.
* Context lets you write components that "adapt to their surroundings".
* Before you use context, try passing props or passing JSX as `children`.

</Recap>

<Challenges>
Expand Down