Skip to content

Commit 745503e

Browse files
committed
wip
1 parent 34203a4 commit 745503e

File tree

4 files changed

+9
-9
lines changed

4 files changed

+9
-9
lines changed

src/content/reference/eslint-plugin-react-hooks/lints/purity.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: purity
44

55
<Intro>
66

7-
알려진 순수하지 않은 함수를 호출하지 않는지 확인하여 [컴포넌트/Hook이 순수한지](/reference/rules/components-and-hooks-must-be-pure) 검증합니다.
7+
알려진 순수하지 않은 함수를 호출하지 않는지 확인하여 [컴포넌트와 Hook이 순수한지](/reference/rules/components-and-hooks-must-be-pure) 검증합니다.
88

99
</Intro>
1010

src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: set-state-in-effect
44

55
<Intro>
66

7-
Effect에서 setState를 동기적으로 호출하는 것에 대해 검증합니다. 이는 성능을 저하시키는 재렌더링으로 이어질 수 있습니다.
7+
Effect에서 `setState` 동기적으로 호출하는 것에 대해 검증합니다. 이는 성능을 저하시키는 재렌더링으로 이어질 수 있습니다.
88

99
</Intro>
1010

@@ -14,11 +14,11 @@ Effect 내부에서 즉시 state를 설정하면 React가 전체 렌더링 사
1414

1515
Effect에서 동기적으로 `setState`를 호출하면 브라우저가 페인트하기 전에 즉시 재렌더링이 트리거되어 성능 문제와 시각적 끊김이 발생합니다. React는 두 번 렌더링해야 합니다. 한 번은 state 업데이트를 적용하고, 또 한 번은 Effect가 실행된 후입니다. 단일 렌더링으로 동일한 결과를 얻을 수 있을 때 이러한 이중 렌더링은 낭비입니다.
1616

17-
많은 경우 Effect가 전혀 필요하지 않을 수도 있습니다. 자세한 내용은 [Effect가 필요하지 않을 수 있습니다](/learn/you-might-not-need-an-effect)를 참고하세요.
17+
많은 경우 Effect가 전혀 필요하지 않을 수도 있습니다. 자세한 내용은 [Effect가 필요하지 않은 경우](/learn/you-might-not-need-an-effect)를 참고하세요.
1818

1919
## 일반적인 위반 사례 {/*common-violations*/}
2020

21-
이 규칙은 동기적으로 setState가 불필요하게 사용되는 여러 패턴을 감지합니다.
21+
이 규칙은 동기적으로 `setState` 불필요하게 사용되는 여러 패턴을 감지합니다.
2222

2323
- 로딩 상태를 동기적으로 설정
2424
- Effect에서 props로부터 state 파생
@@ -53,7 +53,7 @@ function Component({rawData}) {
5353
const [processed, setProcessed] = useState([]);
5454

5555
useEffect(() => {
56-
setProcessed(rawData.map(transform)); // 렌더링 중에 파생해야
56+
setProcessed(rawData.map(transform)); // 렌더링 중에 생성해야
5757
}, [rawData]);
5858
}
5959

@@ -90,4 +90,4 @@ function Component({selectedId, items}) {
9090
}
9191
```
9292
93-
**기존 props나 state로부터 계산할 수 있는 경우 state에 넣지 마세요.** 대신 렌더링 중에 계산하세요. 이렇게 하면 코드가 더 빠르고 간단하며 오류가 덜 발생합니다. 자세한 내용은 [Effect가 필요하지 않을 수 있습니다](/learn/you-might-not-need-an-effect)를 참고하세요.
93+
**기존 props나 state로부터 계산할 수 있는 경우 state에 넣지 마세요.** 대신 렌더링 중에 계산하세요. 이렇게 하면 코드가 더 빠르고 간단하며 오류가 덜 발생합니다. 자세한 내용은 [Effect가 필요하지 않은 경우](/learn/you-might-not-need-an-effect)를 참고하세요.

src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,4 +107,4 @@ function Counter({max}) {
107107
108108
이제 setter는 클릭에 대한 응답으로만 실행되고, React는 정상적으로 렌더링을 완료하며, `count`는 절대 `max`를 넘지 않습니다.
109109
110-
드문 경우지만 이전 렌더링의 정보를 기반으로 state를 조정해야 할 수 있습니다. 그런 경우 조건부로 state를 설정하는 [이 패턴](https://react.dev/reference/react/useState#storing-information-from-previous-renders)을 따르세요.
110+
드문 경우지만 이전 렌더링의 정보를 기반으로 state를 조정해야 할 수 있습니다. 그런 경우 조건부로 state를 설정하는 [이 패턴](/reference/react/useState#storing-information-from-previous-renders)을 따르세요.

src/content/reference/eslint-plugin-react-hooks/lints/static-components.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ title: static-components
44

55
<Intro>
66

7-
컴포넌트가 정적이며 렌더링할 때마다 재생성되지 않는지 검증합니다. 동적으로 재생성되는 컴포넌트는 state를 재설정하고 과도한 재렌더링을 트리거할 수 있습니다.
7+
컴포넌트가 정적이며 렌더링할 때마다 다시 생성되지 않는지 검증합니다. 동적으로 다시 생성되는 컴포넌트는 state를 초기화하고 과도한 재렌더링을 트리거할 수 있습니다.
88

99
</Intro>
1010

1111
## 규칙 세부 정보 {/*rule-details*/}
1212

13-
다른 컴포넌트 내부에 정의된 컴포넌트는 렌더링할 때마다 재생성됩니다. React는 각각을 완전히 새로운 컴포넌트 타입으로 간주하여 이전 컴포넌트를 마운트 해제하고 새 컴포넌트를 마운트하며, 그 과정에서 모든 state와 DOM 노드를 파괴합니다.
13+
다른 컴포넌트 내부에 정의된 컴포넌트는 렌더링할 때마다 다시 생성됩니다. React는 각각을 완전히 새로운 컴포넌트 타입으로 간주하여 이전 컴포넌트를 마운트 해제하고 새 컴포넌트를 마운트하며, 그 과정에서 모든 state와 DOM 노드를 파괴합니다.
1414

1515
### 잘못된 예시 {/*invalid*/}
1616

0 commit comments

Comments
 (0)