docs: Translate component styles section (#1278)

sky21kr · lumirlumir · web-flow · commit af9d1cf5e3a4 · 2025-08-24T22:30:24.000+09:00
# 이슈 #1273 # 컴포넌트 \<styles> 번역 추가 https://ko.react.dev/reference/react-dom/components/style#special-rendering-behavior <img width="936" height="534" alt="image" src="https://github.com/user-attachments/assets/79a4c905-9455-4bb6-b267-64f43db07f02" /> <img width="945" height="389" alt="image" src="https://github.com/user-attachments/assets/43667d13-c368-4ecf-b23b-fd0f5fdcaada" /> 위 부분의 번역을 추가했습니다. 다만 첫번쩨 사진에서 번역이 되었는데 사라지지 않은 부분이 있어서 원문 기준으로 내용을 맞춰서 반영하였습니다. 아래가 첫번째 사진의 원문입니다. <img width="949" height="433" alt="image" src="https://github.com/user-attachments/assets/2bd006df-c1ce-4168-9771-8201104250e2" /> 또한 세 가지 주의사항인데 두가지만 표시되어 있어서 세 가지로 수정하고, [원문](https://react.dev/reference/react-dom/components/style#special-rendering-behavior)에도 [정정 요청 PR](https://github.com/reactjs/react.dev/pull/7925)을 올려두었습니다. 전체 수정 후는 아래와 같습니다. <img width="917" height="388" alt="image" src="https://github.com/user-attachments/assets/92a690f4-0b16-43c0-8a3b-ed11c4eae151" /> <img width="931" height="292" alt="image" src="https://github.com/user-attachments/assets/33ade807-1b1c-4bd3-9ae6-60e239586913" /> ## 필수 확인 사항 - [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>
diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
@@ -49,15 +49,11 @@ React는 `<style>` 컴포넌트를 문서의 `<head>`로 이동시키고, 동일
 
 이 동작을 사용하려면 `href`와 `precedence` 속성을 제공하세요. React는 동일한 `href`를 가진 스타일의 중복을 제거합니다. `precedence` 속성은 문서의 `<head>` 내 다른 요소에 비해 `<style>` DOM 노드의 순위를 지정하며, 어떤 스타일시트가 다른 스타일시트를 덮어쓸 수 있는지를 결정합니다.
 
-이러한 처리는 두 가지 주의 사항이 있습니다.
-
-* 스타일이 렌더링된 후에는 React가 속성 변경을 무시합니다. (개발 중에 이 상황이 발생하면 React는 경고를 표시합니다.)
+이러한 처리는 세 가지 주의 사항이 있습니다.
 
+* 스타일이 렌더링된 후에는 React가 Props 변경을 무시합니다. (개발 중에 이 상황이 발생하면 React는 경고를 표시합니다.)
+* React는 `precedence` Prop을 사용할 때 불필요한 Props를 제거합니다. (단, `href`와 `precedence`는 제외.)
 * 스타일을 렌더링한 컴포넌트가 마운트 해제된 후에도 DOM에 스타일이 유지될 수 있습니다.
-* React will ignore changes to props after the style has been rendered. (React will issue a warning in development if this happens.)
-* React will drop all extraneous props when using the `precedence` prop (beyond `href` and `precedence`).
-* React may leave the style in the DOM even after the component that rendered it has been unmounted.
-
 ---
 
 ## 사용법 {/*usage*/}
@@ -66,11 +62,11 @@ React는 `<style>` 컴포넌트를 문서의 `<head>`로 이동시키고, 동일
 
 컴포넌트가 올바르게 표시되기 위해 특정 CSS 스타일에 의존하는 경우, 컴포넌트 내에서 인라인 스타일시트를 렌더링할 수 있습니다.
 
-The `href` prop should uniquely identify the stylesheet, because React will de-duplicate stylesheets that have the same `href`.
-If you supply a `precedence` prop, React will reorder inline stylesheets based on the order these values appear in the component tree.
+React는 동일한 `href`를 가진 스타일시트의 중복을 제거하므로 `href` 속성은 스타일시트를 고유하게 식별해야 합니다.
+`precedence` Prop을 제공하면 React는 컴포넌트 트리에서 해당 값이 표시되는 순서에 따라 인라인 스타일시트의 순서를 다시 지정합니다.
 
-Inline stylesheets will not trigger Suspense boundaries while they're loading.
-Even if they load async resources like fonts or images.
+인라인 스타일시트는 로딩 중이더라도 Suspense 경계를 트리거하지 않습니다.
+이는, 글꼴이나 이미지와 같은 비동기 리소스를 로드하는 경우에도 마찬가지입니다.
 
 <SandpackWithHTMLOutput>
 
