Skip to content

Commit 9d1acdb

Browse files
docs: add Korean translation for act page (#1205)
이 PR은 React 공식 문서 중 [act 영문 공식문서](https://react.dev/reference/react/act)를 한국어로 번역한 내용입니다. close #1201 ## 필수 확인 사항 - [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 <[email protected]>
1 parent 216bf5e commit 9d1acdb

File tree

1 file changed

+31
-31
lines changed
  • src/content/reference/react

1 file changed

+31
-31
lines changed

src/content/reference/react/act.md

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,32 @@ title: act
44

55
<Intro>
66

7-
`act` is a test helper to apply pending React updates before making assertions.
7+
`act`는 테스트 헬퍼<sup>Helper</sup>로, 대기 중인 React 업데이트를 모두 적용한 뒤 단언<sup>Assert</sup>할 수 있게 도움을 줍니다.
88

99
```js
1010
await act(async actFn)
1111
```
1212

1313
</Intro>
1414

15-
To prepare a component for assertions, wrap the code rendering it and performing updates inside an `await act()` call. This makes your test run closer to how React works in the browser.
15+
컴포넌트를 단언<sup>Assertion</sup>할 수 있도록 준비하려면 `await act()` 호출 안에 컴포넌트를 렌더링하고 업데이트하는 코드를 감싸세요. 이렇게 하면 테스트가 브라우저에서 작동하는 실제 React 방식과 더 유사하게 실행됩니다.
1616

1717
<Note>
18-
You might find using `act()` directly a bit too verbose. To avoid some of the boilerplate, you could use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), whose helpers are wrapped with `act()`.
18+
`act()`를 직접 사용하는 것이 다소 장황하다고 느껴질 수 있습니다. 반복되는 코드를 줄이고 싶다면 [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)처럼 내부적으로 `act()`로 감싼 헬퍼를 제공하는 라이브러리를 사용하는 것도 좋습니다.
1919
</Note>
2020

2121

2222
<InlineToc />
2323

2424
---
2525

26-
## Reference {/*reference*/}
26+
## 레퍼런스 {/*reference*/}
2727

2828
### `await act(async actFn)` {/*await-act-async-actfn*/}
2929

30-
When writing UI tests, tasks like rendering, user events, or data fetching can be considered as "units" of interaction with a user interface. React provides a helper called `act()` that makes sure all updates related to these "units" have been processed and applied to the DOM before you make any assertions.
30+
UI 테스트를 작성할 때 렌더링, 사용자 이벤트, 데이터 가져오기 등은 사용자 인터페이스와의 상호작용 "단위"로 볼 수 있습니다. React는 `act()`라는 헬퍼를 제공하는데 이는 이 "단위"와 관련된 모든 업데이트가 DOM에 적용되기 전까지 단언이 실행되지 않도록 보장해 줍니다.
3131

32-
The name `act` comes from the [Arrange-Act-Assert](https://wiki.c2.com/?ArrangeActAssert) pattern.
32+
`act` 라는 이름은 [Arrange-Act-Assert](https://wiki.c2.com/?ArrangeActAssert) 패턴에서 따온 것입니다.
3333

3434
```js {2,4}
3535
it ('renders with button disabled', async () => {
@@ -42,25 +42,25 @@ it ('renders with button disabled', async () => {
4242

4343
<Note>
4444

45-
We recommend using `act` with `await` and an `async` function. Although the sync version works in many cases, it doesn't work in all cases and due to the way React schedules updates internally, it's difficult to predict when you can use the sync version.
45+
`act``await``async` 함수와 함께 사용하는 것을 권장합니다. 동기 버전도 대부분의 경우 동작하지만 React가 내부적으로 업데이트를 예약하는 방식 때문에 언제 동기 버전을 써도 되는지 예측하기 어렵습니다.
4646

47-
We will deprecate and remove the sync version in the future.
47+
앞으로 동기 버전은 더 이상 사용되지 않을 예정이며 제거될 예정입니다.
4848

4949
</Note>
5050

51-
#### Parameters {/*parameters*/}
51+
#### 매개변수 {/*parameters*/}
5252

53-
* `async actFn`: An async function wrapping renders or interactions for components being tested. Any updates triggered within the `actFn`, are added to an internal act queue, which are then flushed together to process and apply any changes to the DOM. Since it is async, React will also run any code that crosses an async boundary, and flush any updates scheduled.
53+
* `async actFn`: 테스트할 컴포넌트를 렌더링하거나 상호작용을 수행하는 비동기 함수입니다. `actFn` 내부에서 발생하는 업데이트는 내부 act 큐에 추가되며 모두 모아서 DOM에 적용됩니다. 비동기 함수이기 때문에 React는 비동기 경계를 넘는 코드도 실행하고 예약된 업데이트도 함께 처리합니다.
5454

55-
#### Returns {/*returns*/}
55+
#### 반환값 {/*returns*/}
5656

57-
`act` does not return anything.
57+
`act`는 아무 값도 반환하지 않습니다.
5858

59-
## Usage {/*usage*/}
59+
## 사용법 {/*usage*/}
6060

61-
When testing a component, you can use `act` to make assertions about its output.
61+
컴포넌트를 테스트할 때 `act`를 사용하면 출력 결과에 대한 단언을 더 안전하게 할 수 있습니다.
6262

63-
For example, let’s say we have this `Counter` component, the usage examples below show how to test it:
63+
예시로 `Counter`라는 컴포넌트가 있다고 가정하고 아래 사용 예시는 이를 테스트하는 방법을 보여줍니다.
6464

6565
```js
6666
function Counter() {
@@ -84,9 +84,9 @@ function Counter() {
8484
}
8585
```
8686

87-
### Rendering components in tests {/*rendering-components-in-tests*/}
87+
### 테스트에서 컴포넌트를 렌더링하는 방법 {/*rendering-components-in-tests*/}
8888

89-
To test the render output of a component, wrap the render inside `act()`:
89+
컴포넌트의 렌더링 결과를 테스트하려면 렌더링 코드를 `act()`로 감싸야 합니다.
9090

9191
```js {10,12}
9292
import {act} from 'react';
@@ -97,7 +97,7 @@ it('can render and update a counter', async () => {
9797
container = document.createElement('div');
9898
document.body.appendChild(container);
9999

100-
//Render the component inside act().
100+
//컴포넌트를 act() 안에서 렌더링합니다.
101101
await act(() => {
102102
ReactDOMClient.createRoot(container).render(<Counter />);
103103
});
@@ -109,13 +109,13 @@ it('can render and update a counter', async () => {
109109
});
110110
```
111111

112-
Here, we create a container, append it to the document, and render the `Counter` component inside `act()`. This ensures that the component is rendered and its effects are applied before making assertions.
112+
위 예시에서는 컨테이너를 만들고 문서에 추가한 뒤 `Counter` 컴포넌트를 `act()` 안에서 렌더링합니다. 이렇게 하면 컴포넌트가 렌더링되고 효과가 적용된 후에 단언을 수행할 수 있습니다.
113113

114-
Using `act` ensures that all updates have been applied before we make assertions.
114+
`act`를 사용하면 모든 업데이트가 적용된 뒤 단언을 실행할 수 있습니다.
115115

116-
### Dispatching events in tests {/*dispatching-events-in-tests*/}
116+
### 테스트에서 이벤트 디스패칭하는 방법 {/*dispatching-events-in-tests*/}
117117

118-
To test events, wrap the event dispatch inside `act()`:
118+
이벤트를 테스트하려면 이벤트를 `act()`로 감싸세요.
119119

120120
```js {14,16}
121121
import {act} from 'react';
@@ -130,7 +130,7 @@ it.only('can render and update a counter', async () => {
130130
ReactDOMClient.createRoot(container).render(<Counter />);
131131
});
132132

133-
//Dispatch the event inside act().
133+
//이벤트 디스패치를 act() 안에서 실행합니다.
134134
await act(async () => {
135135
button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
136136
});
@@ -142,36 +142,36 @@ it.only('can render and update a counter', async () => {
142142
});
143143
```
144144

145-
Here, we render the component with `act`, and then dispatch the event inside another `act()`. This ensures that all updates from the event are applied before making assertions.
145+
위 예시에서는 컴포넌트를 먼저 `act`로 감싸 렌더링하고, 이벤트 디스패치도 `act()`로 감쌉니다. 이렇게 하면 해당 이벤트로 인한 모든 업데이트가 적용된 뒤 단언이 수행됩니다.
146146

147147
<Pitfall>
148148

149-
Don’t forget that dispatching DOM events only works when the DOM container is added to the document. You can use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to reduce the boilerplate code.
149+
DOM 이벤트를 디스패치할 때는 DOM 컨테이너가 문서에 추가되어 있어야 합니다. 반복되는 설정 코드를 줄이고 싶다면 [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)를 사용하는 것도 고려해보세요.
150150

151151
</Pitfall>
152152

153-
## Troubleshooting {/*troubleshooting*/}
153+
## 문제 해결 {/*troubleshooting*/}
154154

155-
### I'm getting an error: "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
155+
### "The current testing environment is not configured to support act(...)" 오류가 발생하는 경우 {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
156156

157-
Using `act` requires setting `global.IS_REACT_ACT_ENVIRONMENT=true` in your test environment. This is to ensure that `act` is only used in the correct environment.
157+
`act`를 사용하려면 테스트 환경에서 `global.IS_REACT_ACT_ENVIRONMENT=true`를 설정해야 합니다. 이 설정은 act가 올바른 환경에서만 사용되도록 보장합니다.
158158

159-
If you don't set the global, you will see an error like this:
159+
이 전역 설정이 없으면 다음과 같은 오류가 표시됩니다.
160160

161161
<ConsoleBlock level="error">
162162

163163
Warning: The current testing environment is not configured to support act(...)
164164

165165
</ConsoleBlock>
166166

167-
To fix, add this to your global setup file for React tests:
167+
이 문제를 해결하려면 React 테스트를 위한 전역 설정 파일에 다음 코드를 추가하세요.
168168

169169
```js
170170
global.IS_REACT_ACT_ENVIRONMENT=true
171171
```
172172

173173
<Note>
174174

175-
In testing frameworks like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), `IS_REACT_ACT_ENVIRONMENT` is already set for you.
175+
[React Testing Library](https://testing-library.com/docs/react-testing-library/intro)같은 테스트 프레임워크에서는 `IS_REACT_ACT_ENVIRONMENT`가 이미 설정되어 있습니다.
176176

177177
</Note>

0 commit comments

Comments
 (0)