feat: textlint (#971 #926)

[lumirlumir]

feat: textlint (#971 #926)

안녕하세요, 기본적인 textlint 기능 구현을 모두 완료하였습니다😊👍. 아직 모든 기능을 완성한 것은 아니고, translate glossary 상에 존재하는 React 파트에 대해서만 일부 구현 완료하였습니다. (기본 로직은 모두 구현한 상태이고, 나머지 translate glossary 파트에 대해서는 데이터만 추가하면 됩니다...!)

또, CI 기능은 textlint 기능 뿐만 아니라, 다른 코드 부분도 조금 더 손을 봐야만 제대로 구현이 가능해서, 이번 PR에서는 제외하였습니다. (너무 많은 PR을 한번에 보내면 서로 혼란스러울 것만 같아 중간 단계에서 한번 끊고 보냈습니다...!)

좀 더 완벽한 기능을 위해서는 아직 갈 길이 멀기 때문에, 이번 PR은 textlint에 대한 전체적인 흐름과 구조 위주로 확인해주시면 감사하겠습니다.😊

1. 추가된 주요 기능.

CLI 명령어 3개가 추가되었습니다.

1-1. textlint-test

textlint 코드 구현 부분에 대한 test를 진행하는 script 입니다.

textlint/rules 디렉토리에 포함된 모든 규칙 및 textlint/utils 디렉토리에 포함된 모든 util 들에 대한 test를 진행합니다.

test 진행 내역은 아래와 같습니다.

더보기

$ yarn textlint-test
yarn run v1.22.22
$ yarn mocha ./textlint/tests/utils && yarn mocha ./textlint/tests/rules
$ D:\Cloud_Git\ko.react.dev\node_modules\.bin\mocha ./textlint/tests/utils


  Util errMsg strictEqual testing
    errMsgTranslateGlossary
      ✔ ,  => ''은/는 ''(으)로 번역되어야 합니다.     
      ✔ , 무언가 => ''은/는 '무언가'(으)로 번역되어야 합니다.
      ✔ Something,  => 'Something'은/는 ''(으)로 번역 되어야 합니다.
      ✔ Something, 무언가 => 'Something'은/는 '무언가'(으)로 번역되어야 합니다.

  Util is strictEqual testing
    isKoreanIncluded
      ✔ 안녕하세요 => true
      ✔ ㄱ => true
      ✔ ㅏ => true
      ✔ Hello 안녕하세요 => true
      ✔ 123 안녕하세요 => true
      ✔ Hello 123 !@#$%^&*() 한글 こんにちは 你好      => true
      ✔ Hello => false
      ✔ こんにちは => false
      ✔ 你好 => false
      ✔ 123 => false
      ✔ !@#$%^&*() => false
      ✔  => false
      ✔   => false
      ✔       => false

  Util strip strictEqual testing
    stripDoubleQuotes
      ✔ "" =>
      ✔ "" not-stripped-right =>  not-stripped-right  
      ✔ "stripped" =>
      ✔ "stripped" not-stripped-right =>  not-stripped-right
      ✔ not-stripped-left "" => not-stripped-left     
      ✔ not-stripped-left "" not-stripped-right => not-stripped-left  not-stripped-right
      ✔ not-stripped-left "stripped" => not-stripped-left
      ✔ not-stripped-left "stripped" not-stripped-right => not-stripped-left  not-stripped-right
      ✔ this double quote " should not be stripped => this double quote " should not be stripped
    stripParentheses
      ✔ () =>
      ✔ () not-stripped-right =>  not-stripped-right  
      ✔ (stripped) =>
      ✔ (stripped) not-stripped-right =>  not-stripped-right
      ✔ not-stripped-left () => not-stripped-left     
      ✔ not-stripped-left () not-stripped-right => not-stripped-left  not-stripped-right
      ✔ not-stripped-left (stripped) => not-stripped-left
      ✔ not-stripped-left (stripped) not-stripped-right => not-stripped-left  not-stripped-right
      ✔ this left parentheses ( should not be stripped => this left parentheses ( should not be stripped    
      ✔ this right parentheses ) should not be stripped => this right parentheses ) should not be stripped  


  37 passing (14ms)

$ D:\Cloud_Git\ko.react.dev\node_modules\.bin\mocha ./
textlint/tests/rules


  translateGlossary
    term: Tutorial
      ✔ 한글이 포함된 Str node. Tutorial 가나다 abc.  
      ✔ 한글이 포함된 Str node. "Tutorial" 라마바 def.
      ✔ 한글이 포함된 Str node. (Tutorial) 사아자 ghi.
      ✔ 자습서
    term: Declarative
      ✔ 한글이 포함된 Str node. Declarative 가나다 abc.
      ✔ 한글이 포함된 Str node. "Declarative" 라마바 def.
      ✔ 한글이 포함된 Str node. (Declarative) 사아자 ghi.
      ✔ 선언적인
    term: Component
      ✔ 한글이 포함된 Str node. Component 가나다 abc. 
      ✔ 한글이 포함된 Str node. "Component" 라마바 def.
      ✔ 한글이 포함된 Str node. (Component) 사아자 ghi.
      ✔ 컴포넌트
    term: Stateful
      ✔ 한글이 포함된 Str node. Stateful 가나다 abc.  
      ✔ 한글이 포함된 Str node. "Stateful" 라마바 def.
      ✔ 한글이 포함된 Str node. (Stateful) 사아자 ghi.
      ✔ 유상태
    term: Stateless
      ✔ 한글이 포함된 Str node. Stateless 가나다 abc. 
      ✔ 한글이 포함된 Str node. "Stateless" 라마바 def.
      ✔ 한글이 포함된 Str node. (Stateless) 사아자 ghi.
      ✔ 무상태
    term: Render
      ✔ 한글이 포함된 Str node. Render 가나다 abc.    
      ✔ 한글이 포함된 Str node. "Render" 라마바 def.  
      ✔ 한글이 포함된 Str node. (Render) 사아자 ghi.  
      ✔ 렌더링(하다)
    term: Data
      ✔ 한글이 포함된 Str node. Data 가나다 abc.      
      ✔ 한글이 포함된 Str node. "Data" 라마바 def.    
      ✔ 한글이 포함된 Str node. (Data) 사아자 ghi.    
      ✔ 데이터
    term: Application
      ✔ 한글이 포함된 Str node. Application 가나다 abc.
      ✔ 한글이 포함된 Str node. "Application" 라마바 def.
      ✔ 한글이 포함된 Str node. (Application) 사아자 ghi.
      ✔ 애플리케이션
    term: External
      ✔ 한글이 포함된 Str node. External 가나다 abc.  
      ✔ 한글이 포함된 Str node. "External" 라마바 def.
      ✔ 한글이 포함된 Str node. (External) 사아자 ghi.
      ✔ 외부
    term: Plugin
      ✔ 한글이 포함된 Str node. Plugin 가나다 abc.    
      ✔ 한글이 포함된 Str node. "Plugin" 라마바 def.  
      ✔ 한글이 포함된 Str node. (Plugin) 사아자 ghi.  
      ✔ 플러그인
    term: Third
      ✔ 한글이 포함된 Str node. Third 가나다 abc.     
      ✔ 한글이 포함된 Str node. "Third" 라마바 def.   
      ✔ 한글이 포함된 Str node. (Third) 사아자 ghi.   
      ✔ 서드
    term: Syntax
      ✔ 한글이 포함된 Str node. Syntax 가나다 abc.    
      ✔ 한글이 포함된 Str node. "Syntax" 라마바 def.  
      ✔ 한글이 포함된 Str node. (Syntax) 사아자 ghi.  
      ✔ 문법
    term: Embedding Expression
      ✔ 한글이 포함된 Str node. Embedding Expression  가나다 abc.
      ✔ 한글이 포함된 Str node. "Embedding Expression" 라마바 def.
      ✔ 한글이 포함된 Str node. (Embedding Expression) 사아자 ghi.
      ✔ 표현식 포함하기
    term: Attribute
      ✔ 한글이 포함된 Str node. Attribute 가나다 abc. 
      ✔ 한글이 포함된 Str node. "Attribute" 라마바 def.
      ✔ 한글이 포함된 Str node. (Attribute) 사아자 ghi.
      ✔ 어트리뷰트
    term: Element
      ✔ 한글이 포함된 Str node. Element 가나다 abc.   
      ✔ 한글이 포함된 Str node. "Element" 라마바 def. 
      ✔ 한글이 포함된 Str node. (Element) 사아자 ghi. 
      ✔ 엘리먼트
    term: Function
      ✔ 한글이 포함된 Str node. Function 가나다 abc.  
      ✔ 한글이 포함된 Str node. "Function" 라마바 def.
      ✔ 한글이 포함된 Str node. (Function) 사아자 ghi.
      ✔ 함수
    term: Class
      ✔ 한글이 포함된 Str node. Class 가나다 abc.     
      ✔ 한글이 포함된 Str node. "Class" 라마바 def.   
      ✔ 한글이 포함된 Str node. (Class) 사아자 ghi.   
      ✔ 클래스
    term: Composition
      ✔ 한글이 포함된 Str node. Composition 가나다 abc.
      ✔ 한글이 포함된 Str node. "Composition" 라마바 def.
      ✔ 한글이 포함된 Str node. (Composition) 사아자 ghi.
      ✔ 합성
    term: Inheritance
      ✔ 한글이 포함된 Str node. Inheritance 가나다 abc.
      ✔ 한글이 포함된 Str node. "Inheritance" 라마바 def.
      ✔ 한글이 포함된 Str node. (Inheritance) 사아자 ghi.
      ✔ 상속
    term: Lifecycle
      ✔ 한글이 포함된 Str node. Lifecycle 가나다 abc. 
      ✔ 한글이 포함된 Str node. "Lifecycle" 라마바 def.
      ✔ 한글이 포함된 Str node. (Lifecycle) 사아자 ghi.
      ✔ 생명주기
    term: Handling
      ✔ 한글이 포함된 Str node. Handling 가나다 abc.  
      ✔ 한글이 포함된 Str node. "Handling" 라마바 def.
      ✔ 한글이 포함된 Str node. (Handling) 사아자 ghi.
      ✔ 처리
    term: Conditional
      ✔ 한글이 포함된 Str node. Conditional 가나다 abc.
      ✔ 한글이 포함된 Str node. "Conditional" 라마바 def.
      ✔ 한글이 포함된 Str node. (Conditional) 사아자 ghi.
      ✔ 조건부
    term: Operator
      ✔ 한글이 포함된 Str node. Operator 가나다 abc.  
      ✔ 한글이 포함된 Str node. "Operator" 라마바 def.
      ✔ 한글이 포함된 Str node. (Operator) 사아자 ghi.
      ✔ 연산자
    term: Reuse
      ✔ 한글이 포함된 Str node. Reuse 가나다 abc.     
      ✔ 한글이 포함된 Str node. "Reuse" 라마바 def.   
      ✔ 한글이 포함된 Str node. (Reuse) 사아자 ghi.   
      ✔ 재사용
    term: Mock
      ✔ 한글이 포함된 Str node. Mock 가나다 abc.      
      ✔ 한글이 포함된 Str node. "Mock" 라마바 def.    
      ✔ 한글이 포함된 Str node. (Mock) 사아자 ghi.    
      ✔ 모의
    term: Callback
      ✔ 한글이 포함된 Str node. Callback 가나다 abc.  
      ✔ 한글이 포함된 Str node. "Callback" 라마바 def.
      ✔ 한글이 포함된 Str node. (Callback) 사아자 ghi.
      ✔ 콜백
    term: Synthetic
      ✔ 한글이 포함된 Str node. Synthetic 가나다 abc. 
      ✔ 한글이 포함된 Str node. "Synthetic" 라마바 def.
      ✔ 한글이 포함된 Str node. (Synthetic) 사아자 ghi.
      ✔ 합성
    term: Event
      ✔ 한글이 포함된 Str node. Event 가나다 abc.     
      ✔ 한글이 포함된 Str node. "Event" 라마바 def.   
      ✔ 한글이 포함된 Str node. (Event) 사아자 ghi.   
      ✔ 이벤트
    term: Higher Order
      ✔ 한글이 포함된 Str node. Higher Order 가나다 abc.
      ✔ 한글이 포함된 Str node. "Higher Order" 라마바 def.
      ✔ 한글이 포함된 Str node. (Higher Order) 사아자 ghi.
      ✔ 고차
    term: Mount
      ✔ 한글이 포함된 Str node. Mount 가나다 abc.     
      ✔ 한글이 포함된 Str node. "Mount" 라마바 def.   
      ✔ 한글이 포함된 Str node. (Mount) 사아자 ghi.   
      ✔ 마운트
    term: Unmount
      ✔ 한글이 포함된 Str node. Unmount 가나다 abc.   
      ✔ 한글이 포함된 Str node. "Unmount" 라마바 def. 
      ✔ 한글이 포함된 Str node. (Unmount) 사아자 ghi. 
      ✔ 마운트 해제
    term: Form
      ✔ 한글이 포함된 Str node. Form 가나다 abc.      
      ✔ 한글이 포함된 Str node. "Form" 라마바 def.    
      ✔ 한글이 포함된 Str node. (Form) 사아자 ghi.    
      ✔ 폼
    term: Wrapper
      ✔ 한글이 포함된 Str node. Wrapper 가나다 abc.   
      ✔ 한글이 포함된 Str node. "Wrapper" 라마바 def. 
      ✔ 한글이 포함된 Str node. (Wrapper) 사아자 ghi. 
      ✔ 래퍼
    term: Children
      ✔ 한글이 포함된 Str node. Children 가나다 abc.  
      ✔ 한글이 포함된 Str node. "Children" 라마바 def.
      ✔ 한글이 포함된 Str node. (Children) 사아자 ghi.
      ✔ 자식
    term: Code-Splitting
      ✔ 한글이 포함된 Str node. Code-Splitting 가나다 abc.
      ✔ 한글이 포함된 Str node. "Code-Splitting" 라마 바 def.
      ✔ 한글이 포함된 Str node. (Code-Splitting) 사아 자 ghi.
      ✔ 코드 분할
    term: Reconciliation
      ✔ 한글이 포함된 Str node. Reconciliation 가나다 abc.
      ✔ 한글이 포함된 Str node. "Reconciliation" 라마 바 def.
      ✔ 한글이 포함된 Str node. (Reconciliation) 사아 자 ghi.
      ✔ 재조정
    term: Property
      ✔ 한글이 포함된 Str node. Property 가나다 abc.  
      ✔ 한글이 포함된 Str node. "Property" 라마바 def.
      ✔ 한글이 포함된 Str node. (Property) 사아자 ghi.
      ✔ 프로퍼티
    term: Reference
      ✔ 한글이 포함된 Str node. Reference 가나다 abc. 
      ✔ 한글이 포함된 Str node. "Reference" 라마바 def.
      ✔ 한글이 포함된 Str node. (Reference) 사아자 ghi.
      ✔ 레퍼런스
    term: User
      ✔ 한글이 포함된 Str node. User 가나다 abc.      
      ✔ 한글이 포함된 Str node. "User" 라마바 def.    
      ✔ 한글이 포함된 Str node. (User) 사아자 ghi.    
      ✔ 사용자
    term: Interface
      ✔ 한글이 포함된 Str node. Interface 가나다 abc. 
      ✔ 한글이 포함된 Str node. "Interface" 라마바 def.
      ✔ 한글이 포함된 Str node. (Interface) 사아자 ghi.
      ✔ 인터페이스
    term: Markup
      ✔ 한글이 포함된 Str node. Markup 가나다 abc.    
      ✔ 한글이 포함된 Str node. "Markup" 라마바 def.  
      ✔ 한글이 포함된 Str node. (Markup) 사아자 ghi.  
      ✔ 마크업
    term: Interactivity
      ✔ 한글이 포함된 Str node. Interactivity 가나다 abc.
      ✔ 한글이 포함된 Str node. "Interactivity" 라마바 def.
      ✔ 한글이 포함된 Str node. (Interactivity) 사아자 ghi.
      ✔ 상호작용
    term: Architecture
      ✔ 한글이 포함된 Str node. Architecture 가나다 abc.
      ✔ 한글이 포함된 Str node. "Architecture" 라마바 def.
      ✔ 한글이 포함된 Str node. (Architecture) 사아자 ghi.
      ✔ 아키텍처
    term: Full-Stack
      ✔ 한글이 포함된 Str node. Full-Stack 가나다 abc.
      ✔ 한글이 포함된 Str node. "Full-Stack" 라마바 def.
      ✔ 한글이 포함된 Str node. (Full-Stack) 사아자 ghi.
      ✔ 풀스택
    term: Browser
      ✔ 한글이 포함된 Str node. Browser 가나다 abc.   
      ✔ 한글이 포함된 Str node. "Browser" 라마바 def. 
      ✔ 한글이 포함된 Str node. (Browser) 사아자 ghi. 
      ✔ 브라우저
    term: Extension
      ✔ 한글이 포함된 Str node. Extension 가나다 abc. 
      ✔ 한글이 포함된 Str node. "Extension" 라마바 def.
      ✔ 한글이 포함된 Str node. (Extension) 사아자 ghi.
      ✔ 확장 프로그램
    term: Escape Hatches
      ✔ 한글이 포함된 Str node. Escape Hatches 가나다 abc.
      ✔ 한글이 포함된 Str node. "Escape Hatches" 라마 바 def.
      ✔ 한글이 포함된 Str node. (Escape Hatches) 사아 자 ghi.
      ✔ 탈출구


  188 passing (290ms)

Done in 1.48s.

1-2. textlint-docs

문서를 자동 생성하는 명령어 입니다. translate glossary 문서와 textlint 코드 부분은 서로 sync가 맞아야 합니다. 따라서, textlint 코드 구현 부분에 존재하는 data를 기반으로 translate glossary 문서가 자동 생성될 수 있도록 구현하였습니다.

이 부분은 훗날 CI 환경과 통합하여, 자동 문서 생성에 이용할 예정입니다.

이에 따라 translate glossary 문서를 일부 수정하였습니다. 코드 구현간에 필수로 바꿔야만 정상적인 로직을 기대할 수 있을 부분만 변경하였습니다. 변경 내역은 아래와 같습니다.

1. 용어에 대한 원자성 유지. 'stateless component'와 같이 2가지 이상의 단어의 조합으로 이루어진 단어는 각각 'stateless'와 'component'와 같이 분리되어야 합니다. 'stateless component'와 같은 용어는 숙어처럼 2개의 단어의 조합으로 새로운 의미가 생기는 경우가 아니기에, 분리되어야 맞다고 생각합니다. (2개의 단어의 조합으로 새로운 의미가 생기는 경우 ex. 'Escape Hatches 탈출구' 와 같은 경우는 변경하지 않고 그대로 두었습니다.)

2. 정규표현식 부분 추가. wiki 상의 용어 그대로 사용하기에는 lint의 정확성 및 성능 문제가 발생하여, 실질적인 lint 검사는 정규표현식과의 비교를 통해 진행하게 됩니다. 단, 이 부분을 wiki 상에 명시해 두어야 훗날, lint 사용 및 기여자 분들의 해당 파트에 대한 유지보수가 원활할 것 같아 추가하였습니다.

3. 이외의 것. 이외에는, 'React' 파트와 '일반' 파트를 '번역해야 하는 용어' 파트로 묶었습니다. 이 부분은 문서의 구조를 좀 더 명확히 할 수 있을 것 같아 추가하였습니다. 또한, 헤더 부분 옆에 인라인 코드 블럭을 추가하여, 코드 상의 어떤 데이터와 연관되어 있는지 확인하기 용이하게 하였습니다.

변경된 마크다운 문서는 아래와 같습니다. (우선, React 파트에 대해서만 추가되어 있습니다. 나머지 파트는 추후 구현 후 추가예정입니다.)

더보기

Translate Glossary

번역해야 하는 용어

React

용어 term	정규표현식 sources	번역 target	논의 discussions
Tutorial	/Tutorial/, /[듀튜]토리얼/	자습서	#2
Declarative	/Declarative/	선언적인	#2
Component	/Component/, /컴퍼넌트/, /컴포넌츠/	컴포넌트	#2
Stateful	/Stateful/	유상태	#2
Stateless	/Stateless/	무상태	#2
Render	/Render(?!er)(?:ing)?/, /랜더링/, /[렌랜]더(?!링)\s?[하한할함합]/	렌더링(하다)	#2
Data	/Data/, /대이터/	데이터	#2
Application	/Application/, /어플리케이[선션]/, /응용\s?프로그램/	애플리케이션	#2
External	/External/	외부	#2
Plugin	/Plugin/	플러그인	#2
Third	/Third/, /써드/	서드	#2
Syntax	/Syntax/, /[신씬]택스/	문법	#2
Embedding Expression	/Embedding\s?Expression/	표현식 포함하기	#2
Attribute	/Attribute/, /애트리뷰트/	어트리뷰트	#2
Element	/Element/, /[엘앨]리먼츠/, /앨리먼트/	엘리먼트	#2
Function	/Function/, /Functional/	함수	#2
Class	/Class/	클래스	#2
Composition	/Composition/, /[컴콤][퍼포]지[선션]/	합성	#2
Inheritance	/Inheritance/	상속	#2
Lifecycle	/Life\s?Cycle/, /라이프\s?사이클/, /생명 주기/	생명주기	#2
Handling	/Handling/, /핸들링/	처리	#2
Conditional	/Conditional/, /컨디[서셔][날널]/	조건부	#2
Operator	/Operator/, /오퍼[레래]이터/	연산자	#2
Reuse	/Reuse/	재사용	#2
Mock	/Mock/	모의	#2
Callback	/Callback/	콜백	#2
Synthetic	/Synthetic/	합성	#2
Event	/Event/	이벤트	#2
Higher Order	/Higher\s?Order/	고차	#2
Mount	/(?<!Un)Mount/	마운트	#2
Unmount	/Unmount/, /언마운트/	마운트 해제	#2
Form	/Form/	폼	#2
Wrapper	/Wrapper/	래퍼	#2
Children	/Child(?:ren)?/	자식	#2
Code-Splitting	/Code[-\s]?Splitting/	코드 분할	#2
Reconciliation	/Reconciliation/	재조정	#2
Property	/Propert(?:y|ies)/	프로퍼티	#2
Reference	/Reference/, /래퍼런스/	레퍼런스	#569
User	/User/, /유저/	사용자	#569
Interface	/Interface/	인터페이스	#569
Markup	/Markup/, /마크 업/	마크업	#569
Interactivity	/Interacti(?:vity|on)/, /인터[랙렉][선션]/	상호작용	#569
Architecture	/Architecture/, /아키택처/, /아키[택텍]쳐/	아키텍처	#569
Full-Stack	/Full[-\s]?Stack/	풀스택	#569
Browser	/Browser/	브라우저	#610
Extension	/Extension/, /확장프로그램/	확장 프로그램	#610
Escape Hatches	/Escape[-\s]?Hatches/	탈출구	#738

1-3. textlint-lint

이번 PR에서 가장 핵심적인 부분입니다. lint를 진행합니다. React 파트만 구현했는데도 상당히 많은 부분에 오류가 발생합니다...😅

Textlint는 오직 .txt 및 .md 확장자를 가진 파일만 검사합니다. 또한, 실질적으로 공식문서에 나타나는 부분인 src/content 내부의 파일만 검사합니다. Textlint는 텍스트 혹은 마크다운 문서를 AST Tree로 Parsing 합니다. Textlint에서 검사하는 것은 오직 @textlint/text-to-ast Package에 의해 AST Tree로 파싱 된 node들 중 Str node 뿐입니다. 즉, AST Tree의 type 중 code block이나 inline code block, link, HTML tag 등은 검사하지 않습니다.

또한, 한국어가 포함된 Str node만 검사를 진행하도록 구현하였습니다. 그리고 "" 및 ()로 감싸져 있는 부분은 검사하지 않도록 구현하였습니다. ""에는 주로 에러 메시지 등 영어 원문 그 자체의 내용이 들어가는 경우가 많으며, () 역시 마찬가지로, 독자의 이해를 위해 영어 원문이 그대로 들어가는 경우가 많기 때문입니다.

아무것도 수정하지 않은 상황에서, 현재 228개의 오류가 검출됩니다. 해당 228개 오류 모두 직접 확인하였는데, 검출된 오류 부분은 모두 수정되어야만 하는 부분입니다. (이는 백틱 기호를 이용한 인라인 코드 블럭을 사용해야 할 곳에 사용하지 않은 경우, 용어가 잘못 번역된 경우 등이 포함됩니다.)

오류 발생 내역은 아래와 같습니다.

더보기

$ yarn textlint-lint
yarn run v1.22.22
$ yarn textlint ./src/content --rulesdir ./textlint/rules -f pretty-error
$ D:\Cloud_Git\ko.react.dev\node_modules\.bin\textlint ./src/content --rulesdir ./textlint/rules -f pretty-error
translateGlossary: '언마운트'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\blog\2022\03\08\react-18-upgrade-guide.md:242:92
                                                                                                                                                             v  
    241.
    242. React 18은 이러한 문제를 시각적으로 보여주기 위해 Strict 모드에 개발 전용 검사를 새롭게 도입합니다. 이 검사는 컴포넌트가 처음 마운트될 때 자동으로 언마
운트한 다음, 이전 상태를 복원하면서 다시 마운트할 것입니다.
    243.
                                                                                                                                                             ^  

translateGlossary: '인터랙션'은/는 '상호작용'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\blog\2022\06\15\react-labs-what-we-have-been-working-on-june-2022.md:72:7
                   v
    71.
    72. 이전에는 [인터랙션 추적 API](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16)를 만들어 이 문제를 해결하려고 했지만, 이 API는 근본적인  
설계 결함으로 인해 인터랙션이 느린 이유를 추적하는 정확도가 떨어지고 때로는 인터랙션이 끝나지 않는 경우가 있었습니다. 결국 이러한 문제로 인해 이 [API를 제거](ht
tps://github.com/facebook/react/pull/20037)하게 되었습니다.
    73.
                   ^

translateGlossary: '인터랙션'은/는 '상호작용'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\blog\2022\06\15\react-labs-what-we-have-been-working-on-june-2022.md:72:131

                   v
    71.
    72. 이전에는 [인터랙션 추적 API](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16)를 만들어 이 문제를 해결하려고 했지만, 이 API는 근본적인  
설계 결함으로 인해 인터랙션이 느린 이유를 추적하는 정확도가 떨어지고 때로는 인터랙션이 끝나지 않는 경우가 있었습니다. 결국 이러한 문제로 인해 이 [API를 제거](ht
tps://github.com/facebook/react/pull/20037)하게 되었습니다.
    73.

                   ^

translateGlossary: '인터랙션'은/는 '상호작용'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\blog\2022\06\15\react-labs-what-we-have-been-working-on-june-2022.md:74:22
                                              v
    73.
    74. 이러한 문제를 해결하는 새로운 버전의 인터랙션 추적 API(`startTransition`을 통해 시작되므로 가칭 트랜지션 추적이라고 함)를 개발 중입니다.
    75.
                                              ^

translateGlossary: '튜토리얼'은/는 '자습서'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\blog\2023\03\16\introducing-react-dev.md:60:35
                                                          v
    59.
    60. 직접 해보며 배우고 싶다면, 다음으로 [Tic-Tac-Toe 튜토리얼](/learn/tutorial-tic-tac-toe)을 확인하는 것을 추천합니다. React로 작은 게임을 구현하는 것을 자
세히 설명하면서, 동시에 일상적으로 사용할 기술을 가르칩니다. 여기에 구현하게 될 내용이 있습니다.
    61.
                                                          ^

translateGlossary: '튜토리얼'은/는 '자습서'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\blog\2023\03\16\introducing-react-dev.md:229:32
                                                          v
    228.
    229. 또한 많은 사람에게 React를 "완전히 이해시켜 준" 튜토리얼인 [React로 사고하기](/learn/thinking-in-react)도 강조하고 싶습니다. **두 가지 클래식 튜토리얼 
모두 함수 컴포넌트와 Hooks를 사용하도록 업데이트했고,** 따라서 새 튜토리얼만큼 좋습니다.
    230.
                                                          ^

translateGlossary: '튜토리얼'은/는 '자습서'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\blog\2023\03\16\introducing-react-dev.md:229:101
                                                                                                                                                        v       
    228.
    229. 또한 많은 사람에게 React를 "완전히 이해시켜 준" 튜토리얼인 [React로 사고하기](/learn/thinking-in-react)도 강조하고 싶습니다. **두 가지 클래식 튜토리얼 
모두 함수 컴포넌트와 Hooks를 사용하도록 업데이트했고,** 따라서 새 튜토리얼만큼 좋습니다.
    230.
                                                                                                                                                        ^       

translateGlossary: '튜토리얼'은/는 '자습서'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\blog\2023\03\16\introducing-react-dev.md:229:147

                                                                   v
    228.
    229. 또한 많은 사람에게 React를 "완전히 이해시켜 준" 튜토리얼인 [React로 사고하기](/learn/thinking-in-react)도 강조하고 싶습니다. **두 가지 클래식 튜토리얼 
모두 함수 컴포넌트와 Hooks를 사용하도록 업데이트했고,** 따라서 새 튜토리얼만큼 좋습니다.
    230.

                                                                   ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\community\versioning-policy.md:32:231


           v
    31.
    32. 시간이 지남에 따라 React를 변경할 때, 새로운 기능을 활용하는 데 필요한 노력을 최소화하려고 노력합니다. 가능한 경우, 오래된 API를 별개의 패키지에 넣는 한
이 있더라도 작동하도록 합니다. 예를 들어, [믹스인은 몇 년 동안 권장되지 않았지만](https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html) [cr
eate-react-class를 통해](https://legacy.reactjs.org/docs/react-without-es6.html#mixins) 지금까지 지원되고 있으며, 많은 코드베이스가 이를 안정적인 레거시 코드로 
계속 사용하고 있습니다.
    33.


           ^

translateGlossary: '어플리케이션'은/는 '애플리케이션'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\community\videos.md:21:5
             v
    20.
    21. ### 어플리케이션 개발자를 위한 React 18 {/*react-18-for-application-developers*/}
    22.
             ^

translateGlossary: 'event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\community\videos.md:117:126

                      v
    116.
    117. JSConf EU 2013에서 Pete Hunt의 강연: 템플릿 개념을 버리고 JavaScript를 사용하여 view를 구축하는 방법, 데이터가 변경될 때 전체 애플리케이션을 "re-render
ing"하는 방법, DOM 및 event를 경량으로 구현하는 방법 등 세 가지 주제를 다루고 있습니다. - (2013 - 0h30m).
    118. <YouTubeIframe title="Pete Hunt: React: Rethinking Best Practices - JSConf EU 2013" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" />        

                      ^

translateGlossary: '핸들링'은/는 '처리'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\escape-hatches.md:200:14
                              v
    199. - **렌더링을 위해 데이터를 변환하는 데 Effect가 필요하지 않습니다.**
    200. - **사용자 이벤트를 핸들링하는 데 Effect가 필요하지 않습니다.**
    201.
                              ^

translateGlossary: '언마운트'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\escape-hatches.md:240:49
                                                                                         v
    239.
    240. Effect는 컴포넌트와 다른 생명주기를 가집니다. 컴포넌트는 마운트, 업데이트 또는 언마운트할 수 있습니다. 반면 Effect는 동기화를 시작하거나 후에 동기화를 
중지하는 두 가지 작업만 할 수 있습니다. Effect가 시간에 따라 변하는 props와 state에 의존하는 경우 이 주기는 여러 번 발생할 수 있습니다.
    241.
                                                                                         ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\escape-hatches.md:584:8
                v
    583.
    584. Effect Event 내부의 코드는 반응이 아니므로 `theme`를 변경해도 더 이상 Effect가 다시 연결하지 않습니다.
    585.
                ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\index.md:99:28
                                         v
     98.
     99. React에서는 `className`으로 CSS class를 지정합니다. 이것은 HTML의 [`class`](https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/class) 어 
트리뷰트와 동일한 방식으로 동작합니다.
    100.
                                         ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\javascript-in-jsx-with-curly-braces.md:70:29
                                              v
    69.
    70. 이미지를 둥글게 만드는 `"avatar"` CSS class 이름을 지정하는 `className="avatar"`와 `avatar`라는 JavaScript 변수의 값을 읽는 `src={avatar}`의 차이점에 주
목해야 합니다. 중괄호를 사용하면 마크업에서 바로 JavaScript를 사용할 수 있기 때문입니다.
    71.
                                              ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\keeping-components-pure.md:120:178

                                                                       v
    119.
    120. 우리의 공식으로 다시 돌아가봅시다 <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>, 이제 <Math><MathI>x</MathI> = 2</Math>라 하더라도 우리는 <Math><Ma
thI>y</MathI> = 4</Math>를 믿을 수 없습니다. 우리의 테스트는 실패하고 유저는 당황할 것이고 비행기는 추락할지도 모릅니다-이것이 얼마나 혼란스러운 버그로 이어지는
지를 볼 수 있습니다!
    121.

                                                                       ^

translateGlossary: 'function'은/는 '함수'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\lifecycle-of-reactive-effects.md:63:23
                                    v
    62.
    63. effect에서 반환되는 cleanup function는 **동기화를 중지**하는 방법을 지정합니다.
    64.
                                    ^

translateGlossary: 'function'은/는 '함수'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\lifecycle-of-reactive-effects.md:81:21
                               v
    80.
    81. 일부 effects는 cleanup function를 전혀 반환하지 않습니다. [대부분의 경우]((/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-de
velopment)) 함수를 반환하고 싶겠지만, 그렇지 않은 경우 React는 빈 cleanup function를 반환한 것처럼 동작합니다.
    82.
                               ^

translateGlossary: 'function'은/는 '함수'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\lifecycle-of-reactive-effects.md:81:187

                                                                          v
    80.
    81. 일부 effects는 cleanup function를 전혀 반환하지 않습니다. [대부분의 경우]((/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-de
velopment)) 함수를 반환하고 싶겠지만, 그렇지 않은 경우 React는 빈 cleanup function를 반환한 것처럼 동작합니다.
    82.

                                                                          ^

translateGlossary: 'function'은/는 '함수'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\lifecycle-of-reactive-effects.md:130:95
                                                                                                                                                          v     
    129.
    130. **다행히도, 여러분은 이미 이 두 가지를 수행하는 방법을 React에 가르쳤습니다!** effect의 본문에는 동기화를 시작하는 방법이 명시되어 있고, cleanup functi
on에는 동기화를 중지하는 방법이 명시되어 있습니다. 이제 React가 해야 할 일은 올바른 순서로 올바른 props와 state로 호출하기만 하면 됩니다. 정확히 어떻게 일어나는
지 살펴보겠습니다.
    131.
                                                                                                                                                          ^     

translateGlossary: 'function'은/는 '함수'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\lifecycle-of-reactive-effects.md:136:66
                                                                                               v
    135.
    136. **동기화를 중지**하기 위해 React는 `"general"` 방에 연결한 후 effect가 반환한 cleanup function를 호출합니다. `roomId`가 `"general"`이었기 때문에, clean
up function는 `"general"` 방에서 연결을 끊습니다.
    137.
                                                                                               ^

translateGlossary: 'function'은/는 '함수'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\lifecycle-of-reactive-effects.md:136:121

   v
    135.
    136. **동기화를 중지**하기 위해 React는 `"general"` 방에 연결한 후 effect가 반환한 cleanup function를 호출합니다. `roomId`가 `"general"`이었기 때문에, clean
up function는 `"general"` 방에서 연결을 끊습니다.
    137.

   ^

translateGlossary: 'function'은/는 '함수'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\lifecycle-of-reactive-effects.md:161:130

                               v
    160.
    161. 컴포넌트가 다른 `roomId`로 다시 렌더링할 때마다 effect가 다시 동기화됩니다. 예를 들어 사용자가 `roomId`를 `"travel"`에서 `"music"`으로 변경한다고 가정 
해 봅시다. React는 다시 cleanup function를 호출하여 effect **동기화를 중지**합니다(`"travel"` 방에서 연결을 끊습니다). 그런 다음 새 `roomId` prop로 본문을 실행 
하여 **동기화를 다시 시작**합니다(`"music"` 방에 연결).
    162.

                               ^

translateGlossary: '라이프사이클'은/는 '생명주기'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\lifecycle-of-reactive-effects.md:767:26
                                               v
    766. - 컴포넌트는 마운트, 업데이트, 마운트 해제할 수 있습니다.
    767. - 각 effect는 주변 컴포넌트와 별도의 라이프사이클을 가집니다.
    768. - 각 effect는 시작 및 중지할 수 있는 별도의 동기화 프로세스를 설명합니다.
                                               ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\managing-state.md:25:159

                                                                                                    v
    24.
    25. React를 사용하면 코드에서 직접 UI를 수정하지 않습니다. 예를 들어 "버튼 비활성화", "버튼 활성화", "성공 메시지 표시" 등의 명령을 작성하지 않습니다. 대신 
컴포넌트의 여러 시각적 상태("초기 상태", "입력 상태", "성공 상태")에 대해 보고 싶은 UI를 설명하고, 유저 입력에 따라 state 변경을 유발합니다. 이는 디자이너가 UI 
를 바라보는 방식과 비슷합니다.
    26.

                                                                                                    ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\managing-state.md:307:88

  v
    306.
    307. 하지만 때로는 이것이 바람직한 동작이 아닐 수 있습니다. 아래 채팅 앱에서는 메시지를 입력한 후에 수신자를 변경하더라도 입력이 초기화되지 않습니다. 따라서
 유저가 실수로 잘못된 사람에게 메시지를 보낼 수도 있습니다.
    308.

  ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\managing-state.md:505:140

                                                                            v
    504.
    505. 여러 이벤트 핸들러를 통해 많은 state 업데이트가 이루어지는 컴포넌트는 감당하기 힘들 수 있습니다. 이 때 컴포넌트 외부에서 "reducer"라는 단일 함수를 사용
하여 모든 state 업데이트 로직을 통합할 수 있습니다. 이벤트 핸들러는 오로지 유저의 "action"만을 명시하므로 간결해집니다. 각 action에 대한 state 업데이트 방법은  
파일 맨 마지막 부분의 reducer 함수에 명시되어 있습니다.
    506.

                                                                            ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\preserving-and-resetting-state.md:1116:39
                                                                          v
    1115.
    1116. **많은 앱에서 이런 동작을 원하겠지만 채팅 앱에서는 아닙니다!** 유저가 실수로 클릭해서 이미 입력한 내용을 잘못된 사람에게 보내는 것은 바람직하지 않습니
다. 이것을 고치기 위해 `key`를 추가해봅시다.
    1117.
                                                                          ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\preserving-and-resetting-state.md:1227:46
                                                                              v
    1226. - [state를 상위로 올리고](/learn/sharing-state-between-components) 각 수신자의 임시 메시지를 부모 컴포넌트에 가지고 있을 수 있습니다. 이 방법에서 부모
가 중요한 정보를 가지고 있기 때문에 자식 컴포넌트가 제거되어도 상관이 없습니다. 이것이 가장 일반적인 해법입니다.
    1227. - React state 이외의 다른 저장소를 이용할 수도 있습니다. 예를 들어 유저가 페이지를 실수로 닫아도 메시지를 유지하고 싶을 수도 있습니다. 이때 [`localSto
rage`](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)에 메시지를 저장하고 이를 이용해 `Chat` 컴포넌트를 초기화할 수 있습니다.
    1228.
                                                                              ^

translateGlossary: 'plugin'은/는 '플러그인'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\react-compiler.md:141:12
                    v
    140.
    141. ### eslint-plugin-react-compiler 설치 {/*installing-eslint-plugin-react-compiler*/}
    142.
                    ^

translateGlossary: 'plugin'은/는 '플러그인'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\react-compiler.md:231:22
                                      v
    230.
    231. Vite를 사용하고 있다면, vite-plugin-react에 플러그인을 추가할 수 있습니다.
    232.
                                      ^

translateGlossary: 'plugin'은/는 '플러그인'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\react-compiler.md:377:8
                v
    376. ### 컴파일 후 작동하지 않는 문제 {/*something-is-not-working-after-compilation*/}
    377. eslint-plugin-react-compiler을 설치한 경우, 컴파일러는 에디터에서 React 규칙 위반 사항을 표시합니다. 이 경우 컴파일러가 해당 컴포넌트나 Hook의 최적화를
 건너뛰었음을 의미합니다. 이것은 완전히 정상적인 동작이며, 컴파일러는 이를 복구하고 코드베이스의 다른 컴포넌트를 계속해서 최적화할 수 있습니다. **모든 eslint 위
반 사항을 즉시 수정할 필요는 없습니다.** 자신의 속도에 맞춰 해결하면서 최적화되는 컴포넌트와 Hooks의 수를 점진적으로 늘릴 수 있습니다.
    378.
                ^

translateGlossary: '인터랙션'은/는 '상호작용'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:21:4
            v
    20.
    21. UI 인터랙션을 디자인할 때 유저가 액션을 하면 어떻게 UI를 *변경* 해야 할지 고민해본 적이 있을 것입니다. 유저가 폼을 제출한다고 생각해봅시다.
    22.
            ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:21:17
                                   v
    20.
    21. UI 인터랙션을 디자인할 때 유저가 액션을 하면 어떻게 UI를 *변경* 해야 할지 고민해본 적이 있을 것입니다. 유저가 폼을 제출한다고 생각해봅시다.
    22.
                                   ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:21:64
                                                                                                                v
    20.
    21. UI 인터랙션을 디자인할 때 유저가 액션을 하면 어떻게 UI를 *변경* 해야 할지 고민해본 적이 있을 것입니다. 유저가 폼을 제출한다고 생각해봅시다.
    22.
                                                                                                                ^

translateGlossary: '인터랙션'은/는 '상호작용'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:28:23
                                             v
    27.
    28. 위 내용은 **명령형 프로그래밍**에서 인터랙션을 구현하는 방법입니다. UI를 조작하기 위해서는 발생한 상황에 따라 정확한 지침을 작성해야만 합니다. 다른 방법
을 한번 생각해봅시다. 옆에 누군가를 태우고 차례대로 어디를 가야 할지 말해준다고 상상해보세요.
    29.
                                             ^

translateGlossary: '인터랙션'은/는 '상호작용'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:134:121

                                                         v
    133.
    134. 위의 예시에서는 문제가 없겠지만 위와 같이 UI를 조작하면 더 복잡한 시스템에서는 난이도가 기하급수적으로 올라갑니다. 여러 다른 폼으로 가득 찬 페이지를 업
데이트해야 한다고 생각해보세요. 새로운 UI 요소나 새로운 인터랙션을 추가하려면 버그의 발생을 막기 위해 기존의 모든 코드를 주의 깊게 살펴봐야만 할 겁니다 (예를 들
면 어떤 것을 보여주거나 숨기거나 하는 것을 잊을지도 모릅니다).
    135.

                                                         ^

translateGlossary: '인터랙션'은/는 '상호작용'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:484:52
                                                                                                   v
    483.
    484. 이러한 코드가 기존의 명령형 프로그래밍 예제보다는 길지만 그래도 조금 더 견고합니다. 모든 인터랙션을 state로 표현하게 되면 이후에 새로운 시각적 state가 
추가되더라도 기존의 로직이 손상되는 것을 막을 수 있습니다. 또한 인터랙션 자체의 로직을 변경하지 않고도 각각의 state에 표시되는 항목을 변경할 수 있습니다.       
    485.
                                                                                                   ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:502:10
                  v
    501.
    502. #### CSS class를 추가하고 제거하기 {/*add-and-remove-a-css-class*/}
    503.
                  ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:504:51
                                                                        v
    503.
    504. 사진을 클릭하면 바깥에 있는 `<div>`의 `background--active` CSS class를 *제거*하고 `<img>`에 `picture--active` class를 추가합니다. 그리고 배경을 다시 클
릭하면 원래 CSS class로 돌아와야 합니다.
    505.
                                                                        ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:504:92
                                                                                                                       v
    503.
    504. 사진을 클릭하면 바깥에 있는 `<div>`의 `background--active` CSS class를 *제거*하고 `<img>`에 `picture--active` class를 추가합니다. 그리고 배경을 다시 클
릭하면 원래 CSS class로 돌아와야 합니다.
    505.
                                                                                                                       ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:558:21
                                        v
    557.
    558. * 이미지가 활성화되었을 때 CSS class는 `background`와 `picture picture--active`가 됩니다.
    559. * 이미지가 비활성화되었을 때 CSS class는 `background background--active`와 `picture`가 됩니다.
                                        ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:559:22
                                          v
    558. * 이미지가 활성화되었을 때 CSS class는 `background`와 `picture picture--active`가 됩니다.
    559. * 이미지가 비활성화되었을 때 CSS class는 `background background--active`와 `picture`가 됩니다.
    560.
                                          ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:561:73
                                                                                                                     v
    560.
    561. 이미지의 활성화 state를 기억하기 위해서는 하나의 boolean state 변수로 충분합니다. 원래 하려고 했던 것은 CSS class를 제거하거나 추가하는 것이었습니다.  
하지만 리액트에서는 UI 요소를 *조작하는 것* 보다는 무엇을 보여주길 원하는지 *묘사하는 것*이 필요합니다. 그렇기 때문에 현재 state를 기반으로 두 CSS class 모두를 
계산해야 합니다. 그리고 이미지를 클릭했을 때 배경이 클릭되지 않도록 이벤트의 [전파를 막을](/learn/responding-to-events#stopping-propagation) 필요가 있습니다.   
    562.
                                                                                                                     ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reacting-to-input-with-state.md:561:190

                                                                                                                                                  v
    560.
    561. 이미지의 활성화 state를 기억하기 위해서는 하나의 boolean state 변수로 충분합니다. 원래 하려고 했던 것은 CSS class를 제거하거나 추가하는 것이었습니다.  
하지만 리액트에서는 UI 요소를 *조작하는 것* 보다는 무엇을 보여주길 원하는지 *묘사하는 것*이 필요합니다. 그렇기 때문에 현재 state를 기반으로 두 CSS class 모두를 
계산해야 합니다. 그리고 이미지를 클릭했을 때 배경이 클릭되지 않도록 이벤트의 [전파를 막을](/learn/responding-to-events#stopping-propagation) 필요가 있습니다.   
    562.

                                                                                                                                                  ^

translateGlossary: 'event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\referencing-values-with-refs.md:171:37
                                                                   v
    170.
    171. 렌더링에 정보를 사용할 때 해당 정보를 state로 유지합니다. event handler에게만 필요한 정보이고 변경이 일어날 때 리렌더가 필요하지 않다면, ref를 사용하는
 것이 더 효율적일 수 있습니다.
    172.
                                                                   ^

translateGlossary: 'render'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\referencing-values-with-refs.md:235:5
                v
    234.
    235. 이것이 render 중에 `ref.current`를 출력하면 신뢰할 수 없는 코드가 나오는 이유입니다. 이 부분이 필요하면 state를 대신 사용해야 합니다..
    236.
                ^

translateGlossary: 'useR'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\referencing-values-with-refs.md:239:6
              v
    238.
    239. #### useRef는 내부적으로 어떻게 동작하나요? {/*how-does-useref-work-inside*/}
    240.
              ^

translateGlossary: 'render'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\referencing-values-with-refs.md:274:52
                                                                                v
    273.
    274. React state의 제한은 refs에 적용되지 않습니다. 예를 들어 state는 [모든 render에 대한 snapshot](/learn/state-as-a-snapshot) 및 [동기적으로 업데이트되지 
않는 것](/learn/queueing-a-series-of-state-updates)과 같이 작동합니다. 그러나 ref의 current 값을 변조하면 다음과 같이 즉시 변경됩니다.
    275.
                                                                                ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\removing-effect-dependencies.md:355:111

               v
    354.
    355. 린터를 무시하는 것보다 더 좋은 해결책은 항상 있습니다! 이 코드를 수정하려면 의존성 목록에 `onTick`을 추가해야 합니다. (interval을 한 번만 설정하려면 [o
nTick을 Effect Event로 만드세요.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events))
    356.

               ^

translateGlossary: '핸들링'은/는 '처리'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\responding-to-events.md:14:7
                  v
    13. * 이벤트 핸들러를 작성하는 여러가지 방법
    14. * 이벤트 핸들링 로직을 부모 컴포넌트에서 전달하는 방법
    15. * 이벤트가 전파되는 방식와 이를 멈추는 방법
                  ^

translateGlossary: '핸들링'은/는 '처리'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\responding-to-events.md:319:49
                                                                                          v
    318.
    319. 이벤트 핸들러에 적절한 HTML 태그를 사용하고 있는지 확인하세요. 예를 들어 클릭을 핸들링하기 위해서는 `<div onClick={handleClick}>` 대신 [`<button onClic
k={handleClick}>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/button)을 사용하세요. 실제 브라우저에서 `<button>`은 키보드 내비게이션과 같은 빌트인  
브라우저 동작을 활성화 합니다. 만일 버튼의 기본 브라우저 스타일링이 싫어서 링크나 다른 UI 요소처럼 보이도록 하고 싶다면 CSS를 통해 그 목적을 이룰 수 있습니다. [
접근성을 위한 마크업 작성법에 대해 더 알아보세요.](https://developer.mozilla.org/ko/docs/Learn/Accessibility/HTML)
    320.
                                                                                          ^

translateGlossary: '핸들링'은/는 '처리'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\responding-to-events.md:463:132

                                                                       v
    462.
    463. 이 핸들러 내에서 부모의 `onClick` 이벤트 핸들러를 호출하는 부분 앞에 코드를 더 추가할 수도 있습니다. 이러한 패턴은 전파의 대안을 제공합니다. 부모 컴포 
넌트가 일부 추가적인 동작에 특화되도록 하면서 자식 컴포넌트가 이벤트를 핸들링할 수 있도록 합니다. 전파와는 다르게 자동으로 동작하지 않습니다. 이 패턴의 장점은  
일부 이벤트의 결과로 실행되는 전체 코드 체인을 명확히 좇을 수 있게 해줍니다.
    464.

                                                                       ^

translateGlossary: '핸들링'은/는 '처리'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\responding-to-events.md:527:43
                                                                       v
    526.
    527. * `<button>`과 같은 요소에 함수를 prop으로 전달하여 이벤트를 핸들링할 수 있습니다.
    528. * 이벤트 핸들러는 **호출이 아니라** 전달만 가능합니다! `onClick={handleClick()}`이 아니라 `onClick={handleClick}`입니다.
                                                                       ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\reusing-logic-with-custom-hooks.md:22:49
                                                                                           v
    21.
    22. 네트워크에 크게 의존하는 앱 (대부분의 앱이 그렇듯)을 개발 중이라고 생각해 보세요. 유저가 앱을 사용하는 동안 네트워크가 갑자기 사라진다면, 유저에게 경고 
하고 싶을 겁니다. 이런 경우 어떻게 하실 건가요? 컴포넌트에는 다음 두 가지가 필요할 것입니다.
    23.
                                                                                           ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:16:10
                 v
    15. - Effect의 코드 일부가 반응형이 아니길 원한다면 해야 할 것
    16. - Effect Event의 정의와 Effect에서 추출하는 방법
    17. - Effect Event를 사용해 Effect에서 최근의 props와 state를 읽는 방법
                 ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:17:10
                 v
    16. - Effect Event의 정의와 Effect에서 추출하는 방법
    17. - Effect Event를 사용해 Effect에서 최근의 props와 state를 읽는 방법
    18.
                 ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:401:12
                    v
    400.
    401. ### Effect Event 선언하기 {/*declaring-an-effect-event*/}
    402.
                    ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:423:23
                                     v
    422.
    423. 이제 Effect 내부에서 Effect Event인 `onConnected`를 호출할 수 있습니다.
    424.
                                     ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:442:81
                                                                                                                             v
    441.
    442. 이렇게 하면 문제가 해결됩니다. Effect의 의존성 목록에서 `onConnected`를 *제거*해야 한다는 것에 유의하세요. **Effect Event는 반응형이 아니므로 의존성에 
서 제외되어야 합니다.**
    443.
                                                                                                                             ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:577:8
                v
    576.
    577. Effect Event가 이벤트 핸들러와 아주 비슷하다고 생각할 수 있습니다. 이벤트 핸들러는 사용자의 상호작용에 대한 응답으로 실행되는 반면에 Effect Event는 Eff
ect에서 직접 트리거 된다는 것이 주요한 차이점입니다. Effect Event를 사용하면 Effect의 반응성과 반응형이어서는 안 되는 코드 사이의 "연결을 끊어줍니다".
    578.
                ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:579:12
                    v
    578.
    579. ### Effect Event로 최근 props와 state 읽기 {/*reading-latest-props-and-state-with-effect-events*/}
    580.
                    ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:587:8
                v
    586.
    587. Effect Event는 의존성 린터를 억제하고 싶었을 많은 패턴을 수정하게 합니다.
    588.
                ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:656:23
                                   v
    655.
    656. 여기서 `onVisit`은 Effect Event입니다. 그 내부의 코드는 반응형이 아닙니다. 그러므로 `numberOfItems` (또는 다른 반응형 값!)의 변경이 주변 코드를 재실행 
시킬 걱정 없이 사용할 수 있습니다.
    657.
                                   ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:658:112

          v
    657.
    658. 반면에 Effect 자체는 여전히 반응형입니다. Effect 내부의 코드는 prop인 `url`을 사용하므로 다른 `url`로 리렌더링 될 때마다 Effect가 재실행됩니다. 그로 인
해 Effect Event인 `onVisit`가 호출될 것입니다.
    659.

          ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:676:31
                                                   v
    675.
    676. 이렇게 해도 읽을 수 있지만 `url`을 Effect Event에 명시적으로 전달하는 것이 좋습니다. **`url`을 Effect Event에 인수로 전달함으로써 다른 `url`로 페이지를
 방문하는 것이 사용자 관점에서는 별도의 "이벤트"임을 나타내는 것입니다.** `visitedUrl`은 발생한 "이벤트"의 *일부분*입니다.
    677.
                                                   ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:676:74
                                                                                                               v
    675.
    676. 이렇게 해도 읽을 수 있지만 `url`을 Effect Event에 명시적으로 전달하는 것이 좋습니다. **`url`을 Effect Event에 인수로 전달함으로써 다른 `url`로 페이지를
 방문하는 것이 사용자 관점에서는 별도의 "이벤트"임을 나타내는 것입니다.** `visitedUrl`은 발생한 "이벤트"의 *일부분*입니다.
    677.
                                                                                                               ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:688:8
                v
    687.
    688. Effect Event가 `visitedUrl`을 명시적으로 "요구"하므로 `url`을 Effect의 의존성에서 실수로 제거하는 일은 이제 있을 수 없습니다. 의존성에서 `url`을 제거하
면 (별개의 페이지 방문을 하나로 취급하게 되는데) 린터가 경고할 것입니다. `onVisit`이 `url`에 반응하기를 원하므로 `url`을 (반응형이 아닌) `onVisit` 내부에서 읽지
 말고 Effect에서 전달해 줍니다.
    689.
                ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:873:156

                                                                             v
    872.
    873. `useEffectEvent`가 *항상* 올바른 해결책이라는 의미는 아닙니다. `useEffectEvent`는 반응형이 아니길 원하는 코드 라인에만 적용해야 합니다. 위의 샌드박스에
서는 Effect의 코드가 `canMove`에 반응하길 원하지 않았습니다. 그러므로 Effect Event로 추출하는 것이 합리적이었습니다.
    874.

                                                                             ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:879:12
                    v
    878.
    879. ### Effect Event의 한계 {/*limitations-of-effect-events*/}
    880.
                    ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:887:8
                v
    886.
    887. Effect Event는 사용할 수 있는 방법이 매우 제한적입니다.
    888.
                ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:892:21
                                      v
    891.
    892. 예를 들어 아래와 같이 Effect Event를 선언하고 전달하지 마세요.
    893.
                                      ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:919:13
                        v
    918.
    919. 그 대신 Effect Event는 항상 자신을 사용하는 Effect의 바로 근처에 선언하세요.
    920.
                        ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:946:8
                v
    945.
    946. Effect Event는 Effect의 코드 중 비반응형인 "부분"입니다. Effect Event는 자신을 사용하는 Effect 근처에 있어야 합니다.
    947.
                ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:954:27
                                           v
    953. - Effect 내부의 로직은 반응형입니다.
    954. - Effect의 비반응형 로직은 Effect Event로 옮길 수 있습니다.
    955. - Effect Event는 Effect 내부에서만 호출하세요.
                                           ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:955:10
                  v
    954. - Effect의 비반응형 로직은 Effect Event로 옮길 수 있습니다.
    955. - Effect Event는 Effect 내부에서만 호출하세요.
    956. - Effect Event를 다른 컴포넌트나 Hook에 전달하지 마세요.
                  ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:956:10
                  v
    955. - Effect Event는 Effect 내부에서만 호출하세요.
    956. - Effect Event를 다른 컴포넌트나 Hook에 전달하지 마세요.
    957.
                  ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1156:29
                                                 v
    1155.
    1156. 이 문제를 해결하려면 Effect에서 Effect Event를 `onTick`으로 추출하세요.
    1157.
                                                 ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1226:18
                            v
    1225.
    1226. `onTick`은 Effect Event이므로 내부의 코드는 반응형이 아닙니다. `increment`가 변해도 Effect를 트리거 하지 않습니다.
    1227.
                            ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1236:8
                 v
    1235.
    1236. Effect Event 내부의 코드는 반응형이 아닙니다. `setInterval` 호출이 재실행되길 _원할_ 경우가 있을까요?
    1237.
                 ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1325:55
                                                                                           v
    1324.
    1325. 위 예제의 문제는 코드가 실제로 해야 하는 일을 고려하지 않고 `onMount`라는 Effect Event로 추출했다는 것입니다. Effect Event는 코드 일부를 비반응형으로 
만들고 싶다는 특정한 이유가 있을 때만 추출해야 합니다. 하지만 `setInterval` 호출은 state 변수 `delay`에 *반응해야 합니다*. `delay`가 변경되면 interval이 다시 설
정되기를 원하는 겁니다! 이 코드를 고치려면 모든 반응형 코드를 Effect 내부로 다시 가져오세요.
    1326.
                                                                                           ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1405:113

                          v
    1404.
    1405. 코드의 *목적*보다는 *타이밍*에 초점을 두는 `onMount` 같은 함수는 보통 의심해 봐야 합니다. 언뜻 보기에 "더 잘 설명한다"라고 느낄 수 있지만 의도를 모호 
하게 합니다. 경험상 Effect Event는 *사용자* 관점에서 일어나는 일에 부합해야 합니다. 예를 들어 `onMessage`, `onTick`, `onVisit` 또는 `onConnected`는 Effect Event
의 이름으로 좋습니다. 내부의 코드는 반응형일 필요가 없을 가능성이 높습니다. 반면에 `onMount`, `onUpdate`, `onUnmount` 또는 `onAfterRender`는 너무 일반적이어서 *
반응형이어야 하는* 코드를 실수로 넣기 쉽습니다. 그러므로 Effect Event의 이름은 코드가 실행된 시점이 아니라 *사용자가 일어났다고 생각하는 일*을 따서 지어야 합니 
다.
    1406.

                          ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1405:213

                                                                                                                                                          v     
    1404.
    1405. 코드의 *목적*보다는 *타이밍*에 초점을 두는 `onMount` 같은 함수는 보통 의심해 봐야 합니다. 언뜻 보기에 "더 잘 설명한다"라고 느낄 수 있지만 의도를 모호 
하게 합니다. 경험상 Effect Event는 *사용자* 관점에서 일어나는 일에 부합해야 합니다. 예를 들어 `onMessage`, `onTick`, `onVisit` 또는 `onConnected`는 Effect Event
의 이름으로 좋습니다. 내부의 코드는 반응형일 필요가 없을 가능성이 높습니다. 반면에 `onMount`, `onUpdate`, `onUnmount` 또는 `onAfterRender`는 너무 일반적이어서 *
반응형이어야 하는* 코드를 실수로 넣기 쉽습니다. 그러므로 Effect Event의 이름은 코드가 실행된 시점이 아니라 *사용자가 일어났다고 생각하는 일*을 따서 지어야 합니 
다.
    1406.

                                                                                                                                                          ^     

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1405:372



                                                               v
    1404.
    1405. 코드의 *목적*보다는 *타이밍*에 초점을 두는 `onMount` 같은 함수는 보통 의심해 봐야 합니다. 언뜻 보기에 "더 잘 설명한다"라고 느낄 수 있지만 의도를 모호 
하게 합니다. 경험상 Effect Event는 *사용자* 관점에서 일어나는 일에 부합해야 합니다. 예를 들어 `onMessage`, `onTick`, `onVisit` 또는 `onConnected`는 Effect Event
의 이름으로 좋습니다. 내부의 코드는 반응형일 필요가 없을 가능성이 높습니다. 반면에 `onMount`, `onUpdate`, `onUnmount` 또는 `onAfterRender`는 너무 일반적이어서 *
반응형이어야 하는* 코드를 실수로 넣기 쉽습니다. 그러므로 Effect Event의 이름은 코드가 실행된 시점이 아니라 *사용자가 일어났다고 생각하는 일*을 따서 지어야 합니 
다.
    1406.



                                                               ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1419:41
                                                                     v
    1418.
    1419. Effect는 자신이 어느 방에 연결했는지 알고 있습니다. Effect Event에 전달하고 싶을 만한 정보는 없나요?
    1420.
                                                                     ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1558:8
                 v
    1557.
    1558. Effect Event 내부의 `roomId`는 *Effect Event가 호출되는 시점*의 값입니다.
    1559.
                 ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1558:36
                                                 v
    1557.
    1558. Effect Event 내부의 `roomId`는 *Effect Event가 호출되는 시점*의 값입니다.
    1559.
                                                 ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1560:8
                 v
    1559.
    1560. Effect Event는 2초의 지연 후에 호출됩니다. travel 방에서 music 방으로 빠르게 전환하는 경우 travel 방의 알림을 보여줄 때쯤이면 `roomId`는 이미 `"music"
`입니다. 그러므로 두 알림 모두 "music에 오신 것을 환영합니다"를 보여줍니다.
    1561.
                 ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1562:19
                                    v
    1561.
    1562. 이 문제를 고치려면 Effect Event 내부에서 *최근의* `roomId`를 읽는 게 아니라 아래의 `connectedRoomId`처럼 Effect Event의 매개변수로 만드세요. 그다음 Ef
fect에서 `onConnected(roomId)`로 호출해서 `roomId`를 전달하세요.
    1563.
                                    ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\separating-events-from-effects.md:1562:86
                                                                                                                          v
    1561.
    1562. 이 문제를 고치려면 Effect Event 내부에서 *최근의* `roomId`를 읽는 게 아니라 아래의 `connectedRoomId`처럼 Effect Event의 매개변수로 만드세요. 그다음 Ef
fect에서 `onConnected(roomId)`로 호출해서 `roomId`를 전달하세요.
    1563.
                                                                                                                          ^

translateGlossary: 'code-splitting'은/는 '코드 분할'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\start-a-new-react-project.md:12:59
                                                                                                          v
    11.
    12. 프레임워크 없이 React 를 사용할 수 있습니다. 그러나 대부분에 애플리케이션이나 사이트들이 결국에는 code-splitting, routing, data fetching, 그리고 HTML 생
성에 대한 해결책을 찾고 있다는것을 발견했습니다. 이러한 문제들은 UI 라이브러리들의 기본적인 문제이며 React 만의 문제는 아닙니다.
    13.
                                                                                                          ^

translateGlossary: 'data'은/는 '데이터'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\start-a-new-react-project.md:12:84
                                                                                                                                   v
    11.
    12. 프레임워크 없이 React 를 사용할 수 있습니다. 그러나 대부분에 애플리케이션이나 사이트들이 결국에는 code-splitting, routing, data fetching, 그리고 HTML 생
성에 대한 해결책을 찾고 있다는것을 발견했습니다. 이러한 문제들은 UI 라이브러리들의 기본적인 문제이며 React 만의 문제는 아닙니다.
    13.
                                                                                                                                   ^

translateGlossary: '아키텍쳐'은/는 '아키텍처'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\start-a-new-react-project.md:99:19
                                 v
     98.
     99. #### React 팀의 풀스택 아키텍쳐 비전을 구현한 기능은 무엇인가요? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
    100.
                                 ^

translateGlossary: 'Component'은/는 '컴포넌트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\start-a-new-react-project.md:101:43
                                                          v
    100.
    101. Next.js의 App Router 번들러는 공식 [React Server Components 명세](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) 전체를 구현
했습니다. 이를 통해 빌드 시간, 서버 전용, 대화형 컴포넌트를 하나의 React 트리에서 혼합할 수 있습니다.
    102.
                                                          ^

translateGlossary: 'Component'은/는 '컴포넌트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\start-a-new-react-project.md:127:8
                v
    126.
    127. Server Component와 Suspense는 Next.js의 기능이 아닌 React의 기능입니다. 하지만 프레임워크 수준에서 이를 채택하려면 많은 노력과 비교적 복잡한 구현 작업 
이 필요합니다. 현재 기준으로는 Next.js의 App Router가 가장 완벽한 구현입니다. React 팀은 차세대 프레임워크에서는 이러한 기능을 구현하기 쉽도록 번들러 개발자와  
공동으로 노력하고 있습니다.
    128.
                ^

translateGlossary: '써드'은/는 '서드'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:42:100
                                                                                                                                                               v
    41.
    42. **컴포넌트에 Effect를 무작정 추가하지 마세요.** Effect는 주로 React 코드를 벗어난 특정 *외부* 시스템과 동기화하기 위해 사용됩니다. 이는 브라우저 API, 써
드파티 위젯, 네트워크 등을 포함합니다. 만약 당신의 Effect가 단순히 다른 상태에 기반하여 일부 상태를 조정하는 경우에는 [Effect가 필요하지 않을 수 있습니다.](/lea
rn/you-might-not-need-an-effect)
    43.
                                                                                                                                                               ^

translateGlossary: '언마운트'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:527:196

                                                                                                                                                           v    
    526.
    527. ChatRoom 컴포넌트가 여러 화면으로 구성된 큰 앱의 일부라고 가정해 보겠습니다. 사용자가 ChatRoom 페이지에서 여정을 시작합니다. 컴포넌트가 마운트되고 conn
ection.connect()를 호출합니다. 그런 다음 사용자가 다른 화면으로 이동한다고 상상해보세요. 예를 들어, 설정 페이지로 이동할 수 있습니다. ChatRoom 컴포넌트가 언마운
트됩니다. 마지막으로 사용자가 뒤로 가기 버튼을 클릭하고 ChatRoom이 다시 마운트됩니다. 이렇게 되면 두 번째 연결이 설정되지만 첫 번째 연결은 종료되지 않았습니다! 
사용자가 앱을 탐색하는 동안 연결은 종료되지 않고 계속 쌓일 것입니다.
    528.

                                                                                                                                                           ^    

translateGlossary: '언마운트'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:531:60
                                                                                                          v
    530.
    531. "✅ 연결 중..." 로그가 두 번 출력되는 것을 보면 결국 무엇이 문제인지 알 수 있습니다. 컴포넌트가 언마운트될 때 연결을 닫지 않는 문제가 바로 그것이죠.   
    532.
                                                                                                          ^

translateGlossary: '언마운트'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:545:48
                                                                                   v
    544.
    545. React는 Effect가 다시 실행되기 전마다 클린업 함수를 호출하고, 컴포넌트가 언마운트(제거)될 때에도 마지막으로 호출합니다. 클린업 함수가 구현된 경우 어떤 
일이 일어나는지 살펴보겠습니다.
    546.
                                                                                   ^

translateGlossary: '언마운트'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:730:77
                                                                                                                                      v
    729. - **Effect 안에서 직접 가져오면 "네트워크 폭포"를 쉽게 만들 수 있습니다.** 부모 컴포넌트를 렌더링하면 일부 데이터를 가져오고 자식 컴포넌트를 렌더링한  
다음 그들이 데이터를 가져오기 시작합니다. 네트워크가 빠르지 않으면 이는 모든 데이터를 병렬로 가져오는 것보다 훨씬 느립니다.
    730. - **Effect 안에서 직접 가져오는 것은 일반적으로 데이터를 미리 로드하거나 캐시하지 않음을 의미합니다.** 예를 들어 컴포넌트가 언마운트되고 다시 마운트되 
면 데이터를 다시 가져와야 합니다.
    731. - **그리 편리하지 않습니다.** `fetch` 호출을 작성할 때 [경쟁 상태](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect)와 같은 버그
에 영향을 받지 않는 방식으로 작성하는 데 꽤 많은 보일러플레이트 코드가 필요합니다.
                                                                                                                                      ^

translateGlossary: '언마운트'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:861:24
                                                  v
    860.
    861. 입력란에 무언가를 입력한 다음 "컴포넌트 언마운트"를 눌러보세요. 언마운트가 마지막 렌더의 Effect를 정리함을 주목하세요. 여기서는 타임아웃이 실행되기 전 
에 마지막 타임아웃이 취소됩니다.
    862.
                                                  ^

translateGlossary: '랜더링'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:911:20
                                        v
    910.
    911. #### 같은 의존성 사이에서의 재랜더링 {/*re-render-with-same-dependencies*/}
    912.
                                        ^

translateGlossary: '언마운트'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:967:6
               v
    966.
    967. #### 언마운트 {/*unmount*/}
    968.
               ^

translateGlossary: '언마운트'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:969:46
                                                                                 v
    968.
    969. 마지막으로, 사용자가 다른 페이지로 이동하게 되어 `ChatRoom` 컴포넌트가 언마운트됩니다. React는 마지막 Effect의 클린업 함수를 실행합니다. 마지막 Effect 
는 세 번째 렌더링에서 온 것입니다. 세 번째 렌더링의 클린업은 `createConnection('travel')` 연결을 종료합니다. 그래서 앱은 `'travel'` 채팅방과의 연결을 해제하게  
됩니다.
    970.
                                                                                 ^

translateGlossary: '언마운트'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:987:43
                                                                        v
    986. - Effect가 다시 마운트로 인해 중단된 경우 클린업 함수를 구현해야 합니다.
    987. - React는 Effect가 다음에 실행되기 전에 정리 함수를 호출하며, 언마운트 중에도 호출합니다.
    988.
                                                                        ^

translateGlossary: 'form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:995:9
                       v
    994.
    995. 이 예시에서는 form이 `<MyInput />` 컴포넌트를 렌더링합니다.
    996.
                       ^

translateGlossary: 'form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:1161:3
             v
    1160.
    1161. 이 form은 두 개의 `<MyInput />` 컴포넌트를 렌더링합니다.
    1162.
             ^

translateGlossary: 'form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\synchronizing-with-effects.md:1245:37
                                                                       v
    1244.
    1245. 해당 코드를 실행하고 주어진 검증 방법을 따라 진행해 봅시다. "form 보기" 버튼을 반복적으로 누르고 "form 숨기기" 버튼을 클릭하여 결과를 확인할 수 있습니
다. form이 나타날 때, *첫 번째* 입력 필드에만 포커스가 설정됩니다. 부모 컴포넌트가 첫 번째 입력 필드를 `shouldFocus={true}`로 렌더링하고 두 번째 입력 필드를 `sh
ouldFocus={false}`로 렌더링하기 때문입니다. 또한 두 입력 필드 모두 정상적으로 작동하며, 둘 다 텍스트를 입력할 수 있습니다.
    1246.
                                                                       ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\thinking-in-react.md:40:12
                   v
    39. * **Programming**--새로운 함수나 객체를 만드는 방식과 같은 방법으로 해봅시다. 이 중 [단일책임 원칙](https://ko.wikipedia.org/wiki/%EB%8B%A8%EC%9D%BC_%EC
%B1%85%EC%9E%84_%EC%9B%90%EC%B9%99)을 반영하고자 한다면 컴포넌트는 이상적으로는 한 번에 한 가지 일만 해야 합니다. 만약 컴포넌트가 점점 커진다면 작은 하위 컴포넌
트로 쪼개져야 하겠죠.
    40. * **CSS**--class 선택자를 무엇으로 만들지 생각해 봅시다. (실제 컴포넌트들은 약간 좀 더 세분되어 있습니다.)
    41. * **Design**--디자인 계층을 어떤 식으로 구성할 지 생각해 봅시다.
                   ^

translateGlossary: '렌더하'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\thinking-in-react.md:444:102
                                                                                                                                    v
    443.
    444. 위에 있는 샌드박스를 보면, `ProductTable`와 `SearchBar`가 `filterText`와 `inStockOnly` props를 table, input과 체크 박스를 렌더하기 위해서 읽고 있습니다
. 예를 들면, `SearchBar` input의 value를 아래와 같이 채우고 있습니다.
    445.
                                                                                                                                    ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\tutorial-tic-tac-toe.md:330:139

                                           v
    329.
    330. CodeSandBox의 _파일_ 구역에서 `styles.css` 파일을 여세요. 이 파일은 React 앱의 스타일을 정의합니다. 처음 두 개의 _CSS 선택자_ 인 `*`와 `body`는 앱 대부
분의 스타일을 정의하고, `.square` 선택자는 className 프로퍼티가 `square`로 설정된 모든 컴포넌트의 스타일을 정의합니다. 초기 코드에서는 `App.js` 파일의 Square 컴
포넌트의 버튼과 매치됩니다.
    331.

                                           ^

translateGlossary: 'event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\typescript.md:380:13
                       v
    379.
    380. React에서 DOM events로 작업할 때, 종종 이벤트 핸들러로부터 이벤트의 타입을 추론할 수 있습니다. 하지만, 이벤트 핸들러에 전달할 함수를 추출하고 싶을 때는
 이벤트 타입을 명시적으로 설정해야 합니다.
    381.
                       ^

translateGlossary: '핸들링'은/는 '처리'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\you-might-not-need-an-effect.md:27:14
                             v
    26. * **렌더링을 위해 데이터를 변환하는 데 Effect가 필요하지 않습니다.** 예를 들어 리스트를 표시하기 전에 필터링하고 싶다고 가정해 보겠습니다. 리스트가 변경
될 때 state 변수를 업데이트하는 Effect를 작성하고 싶을 수 있습니다. 하지만 이는 비효율적입니다. state를 업데이트할 때 React는 먼저 컴포넌트 함수를 호출해 화면에
 표시될 내용을 계산합니다. 그런 다음 React는 이러한 변경 사항을 DOM에 ["commit"](/learn/render-and-commit)하여 화면을 업데이트합니다. 그리고 나서 React가 Effect
를 실행합니다. 만약 Effect도 *즉시* state를 업데이트한다면 전체 프로세스가 처음부터 다시 시작됩니다! 불필요한 렌더링 패스를 피하려면, 컴포넌트의 최상위 레벨에서
 모든 데이터를 변환하세요. 그러면 props나 state가 변경될 때마다 해당 코드가 자동으로 다시 실행됩니다.
    27. * **사용자 이벤트를 핸들링하는 데 Effect가 필요하지 않습니다.** 예를 들어 사용자가 제품을 구매할 때 `/api/buy` POST 요청을 전송하고 알림을 표시하고 싶다
고 가정해 보겠습니다. 구매 버튼 클릭 이벤트 핸들러에서는 정확히 어떤 일이 일어났는지 알 수 있습니다. Effect가 실행될 때까지 사용자가 무엇을 했는지 (예: 어떤 버 
튼을 클릭 했는지) 알 수 없습니다. 그렇기 때문에 일반적으로 해당되는 이벤트 핸들러에서 사용자 이벤트를 핸들링합니다.
    28.
                             ^

translateGlossary: '핸들링'은/는 '처리'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\you-might-not-need-an-effect.md:27:255


                                                                                                      v
    26. * **렌더링을 위해 데이터를 변환하는 데 Effect가 필요하지 않습니다.** 예를 들어 리스트를 표시하기 전에 필터링하고 싶다고 가정해 보겠습니다. 리스트가 변경
될 때 state 변수를 업데이트하는 Effect를 작성하고 싶을 수 있습니다. 하지만 이는 비효율적입니다. state를 업데이트할 때 React는 먼저 컴포넌트 함수를 호출해 화면에
 표시될 내용을 계산합니다. 그런 다음 React는 이러한 변경 사항을 DOM에 ["commit"](/learn/render-and-commit)하여 화면을 업데이트합니다. 그리고 나서 React가 Effect
를 실행합니다. 만약 Effect도 *즉시* state를 업데이트한다면 전체 프로세스가 처음부터 다시 시작됩니다! 불필요한 렌더링 패스를 피하려면, 컴포넌트의 최상위 레벨에서
 모든 데이터를 변환하세요. 그러면 props나 state가 변경될 때마다 해당 코드가 자동으로 다시 실행됩니다.
    27. * **사용자 이벤트를 핸들링하는 데 Effect가 필요하지 않습니다.** 예를 들어 사용자가 제품을 구매할 때 `/api/buy` POST 요청을 전송하고 알림을 표시하고 싶다
고 가정해 보겠습니다. 구매 버튼 클릭 이벤트 핸들러에서는 정확히 어떤 일이 일어났는지 알 수 있습니다. Effect가 실행될 때까지 사용자가 무엇을 했는지 (예: 어떤 버 
튼을 클릭 했는지) 알 수 없습니다. 그렇기 때문에 일반적으로 해당되는 이벤트 핸들러에서 사용자 이벤트를 핸들링합니다.
    28.


                                                                                                      ^

translateGlossary: '핸들링'은/는 '처리'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\learn\you-might-not-need-an-effect.md:790:7
                    v
    789.
    790. 또한 에러 핸들링과 콘텐츠 로딩 여부를 추적하기 위한 로직을 추가하고 싶을 것입니다. 이와 같은 Hook을 직접 빌드하거나 React 에코시스템에서 이미 사용 가능
한 많은 솔루션 중 하나를 사용할 수 있습니다. **이 방법만으로는 프레임워크에 내장된 데이터 가져오기 메커니즘을 사용하는 것만큼 효율적이지는 않지만, 데이터 가져오
기 로직을 사용자 정의 Hook으로 옮기면 나중에 효율적인 데이터 가져오기 전략을 취하기가 더 쉬워집니다.**
    791.
                    ^

translateGlossary: 'unmount'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\createRoot.md:106:38
                                                               v
    105.
    106. `root.unmount`를 호출하면 루트에 있는 모든 컴포넌트가 unmount 되고, 트리상의 이벤트 핸들러나 state가 제거되며, 루트 DOM 노드에서 React가 "분리"됩니다. 
    107.
                                                               ^

translateGlossary: 'unmount'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\createRoot.md:120:37
                                                            v
    119.
    120. * `root.unmount`를 호출하면 트리의 모든 컴포넌트가 unmount 되고 루트 DOM 노드에서 React가 "분리"됩니다.
    121.
                                                            ^

translateGlossary: 'unmount'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\createRoot.md:122:69
                                                                                                       v
    121.
    122. * `root.unmount`를 한 번 호출한 후에는 같은 루트에서 `root.render`를 다시 호출할 수 없습니다. unmount 된 루트에서 `root.render`를 호출하려고 하면 "unmo
unt 된 root를 업데이트할 수 없습니다." 오류가 발생합니다. 그러나 해당 노드의 이전 루트가 unmount 된 후 동일한 DOM 노드에 새로운 루트를 만들 수는 있습니다.      
    123.
                                                                                                       ^

translateGlossary: 'unmount'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\createRoot.md:122:109
                                                                                                                                                            v   
    121.
    122. * `root.unmount`를 한 번 호출한 후에는 같은 루트에서 `root.render`를 다시 호출할 수 없습니다. unmount 된 루트에서 `root.render`를 호출하려고 하면 "unmo
unt 된 root를 업데이트할 수 없습니다." 오류가 발생합니다. 그러나 해당 노드의 이전 루트가 unmount 된 후 동일한 DOM 노드에 새로운 루트를 만들 수는 있습니다.      
    123.
                                                                                                                                                            ^   

translateGlossary: 'component'은/는 '컴포넌트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:32:89
                                                                                                                                   v
    31.
    32. React는 `domNode` 내부의 HTML에 붙어, 내부 DOM을 직접 관리할 것입니다. App을 React로 전부 만들었다면 보통은 단 하나의 root component와 함께 `hydrateRoot
`를 한 번 호출할 것입니다.
    33.
                                                                                                                                   ^

translateGlossary: 'element'은/는 '엘리먼트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:38:24
                                   v
    37.
    38. * `domNode`: 서버에서 root element로 렌더링된 [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element)
    39.
                                   ^

translateGlossary: 'markup'은/는 '마크업'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:59:107

                  v
    58. * `hydrateRoot()`는 서버에서 렌더링된 내용과 후에 렌더링된 내용이 동일할 것을 기대합니다. 따라서 동일하지 않은 부분들은 직접 버그로 취급해주거나 고쳐줘 
야 합니다.
    59. * 개발 모드에선, React가 hydration 중에 동일하지 않은 부분에 대해 경고해줍니다. 속성이 동일하지 않을 경우에 해당 속성이 올바르게 적용될 것이라고 보장할 
수 없습니다. 모든 markup을 보장하지 않는 것은 성능면에서 중요하기 때문입니다. markup이 동일하지 않는 경우는 드물기 때문에 모든 markup을 검증하는 비용은 굉장히  
비쌉니다.
    60. * 여러분은 App에서 `hydrateRoot`를 단 한 번만 호출하게 될 것입니다. 만약 프레임워크를 사용한다면, 프레임워크가 대신 호출해 줄 것입니다.

                  ^

translateGlossary: 'unmount'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:103:40
                                                               v
    102.
    103. `root.unmount`를 호출하면 root 내부의 모든 컴포넌트를 unmount하고 root DOM node에서 React를 "떼어"냅니다. root 내부의 event handler와 state까지 모두 포
함해 unmount 및 삭제됩니다.
    104.
                                                               ^

translateGlossary: 'event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:103:91
                                                                                                                               v
    102.
    103. `root.unmount`를 호출하면 root 내부의 모든 컴포넌트를 unmount하고 root DOM node에서 React를 "떼어"냅니다. root 내부의 event handler와 state까지 모두 포
함해 unmount 및 삭제됩니다.
    104.
                                                                                                                               ^

translateGlossary: 'unmount'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:116:45
                                                                      v
    115.
    116. * `root.unmount`를 호출하면 root부터 그 안의 모든 컴포넌트가 unmount되고 root DOM node에서 React를 떼어냅니다.
    117.
                                                                      ^

translateGlossary: 'unmount'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:118:66
                                                                                               v
    117.
    118. * `root.unmount`를 한번 호출한 이후엔 `root.render`를 root에 다시 사용할 수 없습니다. unmount된 root에 다시 `root.render`를 호출하려고 한다면 "Cannot u
pdate an unmounted root" 에러를 throw하게 됩니다.
    119.
                                                                                               ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:189:23
                                                v
    188.
    189. 이는 사용자 경험을 위해서 중요합니다. 유저는 서버에서 만들어진 HTML을 JavaScript 코드가 로드될 때까지 둘러보게 됩니다. 앱의 로딩을 더 빠르게 하기 위해 
서버는 일종의 신기루로서 React 결과물인 HTML 스냅샷을 만들어 보여줍니다. 갑자기 다른 컨텐츠를 보여주게 되면 신기루가 깨져버리게 됩니다. 이런 이유로 서버에서 렌 
더링한 결과물과 클라이언트에서 최초로 렌더링한 결과물이 같아야 합니다.
    190.
                                                ^

translateGlossary: 'element'은/는 '엘리먼트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:198:110

                       v
    197.
    198. React는 hydration 에러에서 복구됩니다, 하지만 **다른 버그들과 같이 반드시 고쳐줘야 합니다.** 가장 나은 경우는 그저 느려지기만 할 뿐이지만, 최악의 경우 
엔 이벤트 핸들러가 다른 element에 붙어버립니다.
    199.

                       ^

translateGlossary: 'element'은/는 '엘리먼트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:239:4
              v
    238.
    239. 어떤 element의 속성이나 text content가 서버와 클라이언트에서 어쩔 수 없이 다를 땐(예를 들어, timestamp를 이용했다거나), hydration 불일치 경고를 안보이 
게 할 수 있습니다.
    240.
              ^

translateGlossary: 'element'은/는 '엘리먼트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:241:4
              v
    240.
    241. 해당 element에서 hydration 경고를 끄기 위해선 `suppressHydrationWarning={true}`를 추가하면 됩니다.
    242.
              ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:323:155

                                                                                       v
    322.
    323. 이 방법은 2번 렌더링해야 하기 때문에 hydration을 느리게 합니다. 느린 통신 상태일 경우에 사용자 경험을 염두하세요. 초기 HTML이 렌더된 한참 이후에야 Java
Script 코드를 불러오게 됩니다. 따라서 hydration 이후에 바로 다른 UI를 렌더링하는 것은 유저에게 UI가 삐걱거리는 것처럼 보일 수 있습니다.
    324.

                                                                                       ^

translateGlossary: 'render'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\client\hydrateRoot.md:1181:10
                     v
    1180.
    1181. 경고: root.render(...)에 두 번째 인자를 전달했지만, 이 함수는 하나의 인자만 허용합니다.
    1182.
                     ^

translateGlossary: 'attribute'은/는 '어트리뷰트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\components\common.md:52:366


                                                                                  v
    51. * [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint): 문자열 타입입니다. 가상 키보드의 입력 키에 어떤 동작을 표
시할지 지정합니다.
    52. * [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor): 문자열 타입입니다. [`<label>`](https://developer.mozilla.org/k
o/docs/Web/HTML/Element/label) 이나 [`<output>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/output)의 경우 [label을 일부 동작에 연결할 수 있습니다.]
(/reference/react-dom/components/input#providing-a-label-for-an-input) 이는 [HTML attribute의 `for` 과 동일합니다.](https://developer.mozilla.org/en-US/docs/Web
/HTML/Attributes/for) React는 HTML 어트리뷰트의 이름 대신 `htmlFor`와 같은 표준 DOM 프로퍼티의 이름을 사용합니다.
    53. * [`hidden`](https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/hidden): 불리언 혹은 문자열 타입입니다. 엘리먼트를 숨길지에 대한 여부를 지
정합니다.


                                                                                  ^

translateGlossary: '렌더하'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\components\form.md:34:119
                                                                                                                                                               v
    33.
    34. 정보 제출을 위한 대화형 컨트롤을 생성하기 위해, [내장된 브라우저 `<form>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)를 렌
더하세요.
    35.
                                                                                                                                                               ^

translateGlossary: '렌더하'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\components\form.md:97:25
                                            v
    96.
    97. 입력과 제출 버튼과 함께 `<form>`을 렌더하세요. 폼이 제출될 때 해당 함수를 실행하기 위해 Server Action([`'use server'`](/reference/rsc/use-server)가 표시
된 함수)를 폼의 `action`의 프로퍼티로 전달하세요.
    98.
                                            ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\components\form.md:99:68
                                                                                                           v
     98.
     99. `<form action>`에 Server Action을 전달하면 자바스크립트가 활성화되기 전이나 코드가 로드되기 전에 유저가 폼을 제출할 수 있습니다. 이는 연결 상태나 기계 
가 느리거나 자바스크립트가 비활성화된 유저에게 유용하고, `action` 프로퍼티에 URL이 전달될 때와 폼이 동작하는 방식은 비슷합니다.
    100.
                                                                                                           ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\components\form.md:201:53
                                                                                      v
    200.
    201. `useOptimistic` hook은 네트워크 요청과 같은 백그라운드의 작업이 끝나기 전에 유저 인터페이스에 낙관적으로 업데이트하는 방법을 제공합니다. 폼의 맥락에서 
이 기술은 앱을 더욱 반응형으로 느끼게 해줍니다. 유저가 폼을 제출하면 인터페이스는 유저가 기대하는 결과물로 즉시 업데이트됩니다.
    202.
                                                                                      ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\components\form.md:203:8
                     v
    202.
    203. 예를 들어, 유저가 폼에 메시지를 입력하고 "제출" 버튼을 클릭하면 `useOptimistic` hook은 "제출중..." 라벨과 함께 메시지가 서버에 보내지기 전에 리스트에  
즉시 보입니다. 이러한 '낙관적인' 접근 방식은 속도와 반응성이 뛰어나다는 인상을 줍니다. 그다음 폼은 실제로 백그라운드에 메시지 보내기를 시도합니다. 서버에 메시지
가 잘 도착하면, "제출중..." 라벨은 사라집니다.
    204.
                     ^

translateGlossary: '렌더하'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\components\index.md:45:70
                                                                                                               v
    44.
    45. 위의 컴포넌트들은 React 에서 특별하게 다뤄집니다. React 에서는 위의 컴포넌트들을 document head 내부에 렌더하고, 리소스가 로딩 될 동안 일시 중단하고, 각 
특정 구성 요소의 참조 페이지에 설명된 다른 동작을 시행합니다.
    46.
                                                                                                               ^

translateGlossary: 'form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\components\input.md:7:105
                                                                                                                                   v
    6.
    7. [`<input>` 브라우저 내장 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) 를 사용하면 여러 종류의 form input 을 렌더링 할 수 있
습니다.
    8.
                                                                                                                                   ^

translateGlossary: '언마운트'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\components\link.md:105:18
                                       v
    104. * 링크가 렌더링 된 후에 React가 속성 변경을 무시합니다. (개발 중에 경고 메시지가 표시됩니다)
    105. * 링크를 렌더링한 컴포넌트가 언마운트된 후에도 React는 링크를 DOM에 남길 수 있습니다.
    106.
                                       ^

translateGlossary: 'render'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\components\script.md:123:17
                                      v
    122.
    123. 인라인 스크립트를 포함하려면 render the `<script>` 컴포넌트를 자식으로 스크립트 소스 코드와 함께 렌더링하세요. 인라인 스크립트는 중복 처리되거나 문서 `
<head>`로 이동되지 않으며, 외부 리소스를 로드하지 않기 때문에 컴포넌트가 중단되지 않습니다.
    124.
                                      ^

translateGlossary: '생명 주기'은/는 '생명주기'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\components\select.md:73:15
                        v
    72. - select box는 제어 상태와 비제어 상태를 동시에 행할 수 없습니다. 둘 중 하나의 상태만 가질 수 있습니다.
    73. - select box는 생명 주기 동안 처음 설정한 제어 상태를 변경할 수 없습니다.
    74. - 제어되는 모든 select box는 제공되는 값을 동기적으로 업데이트하는 `onChange` 이벤트 핸들러가 필요합니다.
                        ^

translateGlossary: '언마운트'은/는 '마운트 해제'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\components\style.md:63:19
                                        v
    62.
    63. * 스타일을 렌더링한 컴포넌트가 언마운트된 후에도 DOM에 스타일이 유지될 수 있습니다.
    64.
                                        ^

translateGlossary: '써드'은/는 '서드'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\flushSync.md:62:5
             v
    61.
    62. ### 써드파티 통합을 위한 업데이트 flushing {/*flushing-updates-for-third-party-integrations*/}
    63.
             ^

translateGlossary: '써드'은/는 '서드'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\flushSync.md:64:26
                                                v
    63.
    64. 브라우저 API 또는 UI 라이브러리와 같은 써드파티 코드를 통합할 때 React가 업데이트를 처리하도록 강제할 필요가 있을 수 있습니다. `flushSync`를 사용해서 Re
act가 콜백 내부의 모든 <CodeStep step={1}>state updates</CodeStep>를 동기적으로 처리하도록 할 수 있습니다.
    65.
                                                ^

translateGlossary: '써드'은/는 '서드'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\flushSync.md:75:94
                                                                                                                                                          v     
    74.
    75. **`flushSync`를 사용하는 것은 일반적이지 않고 자주 사용하면 애플리케이션의 성능이 크게 저하될 수 있습니다.** 애플리케이션이 React API만 사용하고 써드파 
티 라이브러리와 통합하지 않는다면 `flushSync`는 필요하지 않습니다.
    76.
                                                                                                                                                          ^     

translateGlossary: '써드'은/는 '서드'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\flushSync.md:77:18
                                    v
    76.
    77. 그러나 브라우저 API와 같은 써드파티 코드와 통합할 때 유용할 수 있습니다.
    78.
                                    ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\render.md:57:54
                                                                                v
    56.
    57. `render`는 일반적으로 `null`을 반환합니다. 하지만 전달한 `reactNode`가 *class 컴포넌트*인 경우, 해당 컴포넌트의 인스턴스를 반환합니다.
    58.
                                                                                ^

translateGlossary: '래퍼런스'은/는 '레퍼런스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\server\renderToNodeStream.md:25:4
            v
    24.
    25. ## 래퍼런스 {/*reference*/}
    26.
            ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\server\renderToReadableStream.md:325:4
               v
    324.
    325. 이는 유저가 보는 최초의 로딩 상태를 정해줍니다:
    326.
               ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react-dom\server\renderToReadableStream.md:444:166

                                                                                 v
    443.
    444. 만약 클라이언트에서도 `Posts` 렌더링 재시도가 실패한다면, React는 클라이언트에서 에러를 던지게 됩니다. 렌더링 중에 일어난 모든 에러과 함께, [가장 가까 
운 부모 에러 경계](/reference/react/Component#static-getderivedstatefromerror)로 유저에게 어떤 에러를 보여줘야할 지를 결정하게 됩니다. 실제로는, 사용자가 에러가
 복구될 수 없다는 것이 확실시 될 때까지 로딩 표시기를 보고있어야 한 다는 것을 의미합니다.
    445.

                                                                                 ^

translateGlossary: '렌더한'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\cache.md:136:177

                                                                           v
    135.
    136. 위의 예시에서, <CodeStep step={2}>`Precipitation`</CodeStep>와 <CodeStep step={1}>`Temperature`</CodeStep>는 각각 `cache`를 호출하여 자체 캐시 조회를  
통해 새로운 메모화된 함수를 만들어 냅니다. 두 컴포넌트가 같은 `cityData`를 렌더한다면, `calculateWeekReport`를 호출하는 반복 작업을 하게 됩니다.
    137.

                                                                           ^

translateGlossary: '렌더하'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\cache.md:211:34
                                                                      v
    210. ```
    211. 클라이언트 컴포넌트에서 비동기 데이터를 사용하는 컴포넌트를 렌더하고 싶다면 [`use`](/reference/react/use) 문서를 참고하세요.
    212.
                                                                      ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\cache.md:248:121
                                                                                                                                                       v        
    247.
    248. `Profile`을 렌더링할 때, <CodeStep step={2}>`getUser`</CodeStep>를 다시 호출합니다. 초기 <CodeStep step={1}>`getUser`</CodeStep> 호출이 이미 유저 데이 
터에 반환되고 캐싱 되었다면, `Profile`이 <CodeStep step={2}>해당 데이터를 요청하고 기다릴 때</CodeStep>, 다른 원격 프로시저 호출 없이 쉽게 캐시에서 읽어올 수 있
습니다. <CodeStep step={1}> 초기 데이터 요청</CodeStep>이 완료되지 않은 경우, 이 패턴으로 데이터를 미리 로드하면 데이터를 받아올 때 생기는 지연이 줄어듭니다.   
    249.
                                                                                                                                                       ^        

translateGlossary: 'children'은/는 '자식'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Children.md:197:5
             v
    196.
    197. ### children 변환하기 {/*transforming-children*/}
    198.
             ^

translateGlossary: 'children'은/는 '자식'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Children.md:296:6
              v
    295.
    296. #### children prop는 왜 항상 배열이 아닌가요? {/*why-is-the-children-prop-not-always-an-array*/}
    297.
              ^

translateGlossary: 'children'은/는 '자식'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Children.md:422:5
             v
    421.
    422. ### children 카운팅하기 {/*counting-children*/}
    423.
             ^

translateGlossary: 'children'은/는 '자식'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Children.md:493:5
             v
    492.
    493. ### children 배열로 병합하기 {/*converting-children-to-an-array*/}
    494.
             ^

translateGlossary: 'render'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Children.md:797:5
             v
    796.
    797. ### render prop로 렌더링 커스텀하기 {/*calling-a-render-prop-to-customize-rendering*/}
    798.
             ^

translateGlossary: 'Render'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Children.md:850:1
         v
    849.
    850. Render props는 함수이므로 정보를 전달할 수 있습니다.
    851. 아래 예시에서 `RowList` 컴포넌트는 각 row의 `id`와 `index`를 `renderRow`에 render prop로 전달하고, `index`가 짝수인 row를 강조합니다.
         ^

translateGlossary: 'render'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Children.md:851:60
                                                                                    v
    850. Render props는 함수이므로 정보를 전달할 수 있습니다.
    851. 아래 예시에서 `RowList` 컴포넌트는 각 row의 `id`와 `index`를 `renderRow`에 render prop로 전달하고, `index`가 짝수인 row를 강조합니다.
    852.
                                                                                    ^

translateGlossary: 'element'은/는 '엘리먼트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\cloneElement.md:13:22
                                  v
    12.
    13. `cloneElement`를 사용하면 element를 기준으로 새로운 React 엘리먼트를 만들 수 있습니다.
    14.
                                  ^

translateGlossary: 'render'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\cloneElement.md:247:5
             v
    246.
    247. ### render prop으로 데이터를 전달하기 {/*passing-data-with-a-render-prop*/}
    248.
             ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:7:7
                  v
    6.
    7. 컴포넌트를 class 대신 함수로 정의하는 것을 추천합니다. [마이그레이션 방법을 확인하세요.](#alternatives)
    8.
                  ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:13:22
                                    v
    12.
    13. `Component`는 [자바스크립트 class](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes)로 정의된 React 컴포넌트의 기본 class입니다. R
eact에서 클래스 컴포넌트를 계속 지원하지만, 새 코드에서는 사용하지 않는 것을 추천합니다.
    14.
                                    ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:13:121
                                                                                                                                                  v
    12.
    13. `Component`는 [자바스크립트 class](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes)로 정의된 React 컴포넌트의 기본 class입니다. R
eact에서 클래스 컴포넌트를 계속 지원하지만, 새 코드에서는 사용하지 않는 것을 추천합니다.
    14.
                                                                                                                                                  ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:33:13
                         v
    32.
    33. React 컴포넌트를 class로 정의하려면, 내장 `Component` class를 확장하고 [`render` 메서드](#render)를 정의하세요.
    34.
                         ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:33:42
                                                              v
    32.
    33. React 컴포넌트를 class로 정의하려면, 내장 `Component` class를 확장하고 [`render` 메서드](#render)를 정의하세요.
    34.
                                                              ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:161:194

                                                                                               v
    160.
    161. 클래스 컴포넌트가 *마운트*(화면에 추가됨)되기 전에 [constructor](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/constructor)가 
실행됩니다. 일반적으로 constructor는 React에서 두 가지 목적으로만 사용됩니다. state를 선언하고 class 메서드를 class 인스턴스에 [바인딩](https://developer.mozill
a.org/ko/docs/Web/JavaScript/Reference/Global_objects/Function/bind)할 수 있습니다.
    162.

                                                                                               ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:176:110

         v
    175.
    176. 최신 자바스크립트 문법을 사용한다면 constructor는 거의 필요하지 않습니다. 대신 최신 브라우저와 [Babel](https://babeljs.io/)과 같은 도구에서 모두 지원되
는 [공용 class 필드 문법](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/Public_class_fields)을 사용하여 위의 코드를 다시 작성할 수 있습
니다.
    177.

         ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:773:36
                                                    v
    772.
    773. - state를 초기화하려면 [`state`](#state)를 class 필드로 선언하거나 [`constructor`](#constructor) 내에서 `this.state`를 설정하세요.
    774. - 부수 효과를 실행하거나 구독을 설정해야 하는 경우 해당 로직을 [`componentDidMount`](#componentdidmount)로 옮기세요.
                                                    ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:937:29
                                          v
    936.
    937. `static defaultProps`를 정의하여 class의 기본 props을 설정할 수 있습니다. `undefined`와 누락된 props에는 사용되지만 `null` props에는 사용되지 않습니다.
    938.
                                          ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1090:46
                                                                                       v
    1089.
    1090. - 이 메서드에는 컴포넌트 인스턴스에 대한 액세스 권한이 없습니다. 원하는 경우 class 정의 외부 컴포넌트 props 및 state의 순수 함수를 추출하여 `static ge
tDerivedStateFromProps`와 다른 class 메서드 사이에 일부 코드를 재사용할 수 있습니다.
    1091.
                                                                                       ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1090:128

                               v
    1089.
    1090. - 이 메서드에는 컴포넌트 인스턴스에 대한 액세스 권한이 없습니다. 원하는 경우 class 정의 외부 컴포넌트 props 및 state의 순수 함수를 추출하여 `static ge
tDerivedStateFromProps`와 다른 class 메서드 사이에 일부 코드를 재사용할 수 있습니다.
    1091.

                               ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1104:13
                           v
    1103.
    1104. React 컴포넌트를 class로 정의하려면 기본 제공 `Component` class를 확장하고 [`render` 메서드](#render)를 정의합니다,
    1105.
                           ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1104:44
                                                                    v
    1103.
    1104. React 컴포넌트를 class로 정의하려면 기본 제공 `Component` class를 확장하고 [`render` 메서드](#render)를 정의합니다,
    1105.
                                                                    ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1148:7
                     v
    1147.
    1148. 컴포넌트를 class 대신 함수로 정의하는 것을 추천합니다. [마이그레이션 방법을 확인하세요.](#migrating-a-simple-component-from-a-class-to-a-function)    
    1149.
                     ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1156:1
          v
    1155.
    1156. class에 [state](/learn/state-a-components-memory)를 추가하려면 [`state`](#state)라는 프로퍼티에 객체를 할당합니다. state를 업데이트하려면 [`this.setSt
ate`](#setstate)를 호출합니다.
    1157.
          ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1206:7
                     v
    1205.
    1206. 컴포넌트를 class 대신 함수로 정의하는 것을 추천합니다. [마이그레이션 방법을 확인하세요.](#migrating-a-component-with-state-from-a-class-to-a-function)
    1207.
                     ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1214:1
          v
    1213.
    1214. class에서 정의할 수 있는 몇 가지 특별한 메서드가 있습니다.
    1215.
          ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1340:7
                     v
    1339.
    1340. 컴포넌트를 class 대신 함수로 정의하는 것을 추천합니다. [마이그레이션 방법을 확인하세요.](#migrating-a-component-with-lifecycle-methods-from-a-class-to
-a-function)
    1341.
                     ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1398:67
                                                                                                      v
    1397.
    1398. 현재 error boundary를 함수 컴포넌트로 작성할 수 있는 방법은 없습니다. 하지만 error boundary class를 직접 작성할 필요는 없습니다. 예를 들어 [`react-err
or-boundary`](https://github.com/bvaughn/react-error-boundary)를 대신 사용할 수 있습니다.
    1399.
                                                                                                      ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1406:5
              v
    1405.
    1406. ### class에서 함수로 간단한 컴포넌트 마이그레이션하기 {/*migrating-a-simple-component-from-a-class-to-a-function*/}
    1407.
              ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1476:21
                                      v
    1475.
    1476. ### state가 있는 컴포넌트를 class에서 함수로 마이그레이션하기 {/*migrating-a-component-with-state-from-a-class-to-a-function*/}
    1477.
                                      ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1598:24
                                                v
    1597.
    1598. ### 생명주기 메서드가 있는 컴포넌트를 class에서 함수로 마이그레이션하기 {/*migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function*/} 
    1599.
                                                ^

translateGlossary: 'class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\Component.md:1833:23
                                        v
    1832.
    1833. ### context가 있는 컴포넌트를 class에서 함수로 마이그레이션하기 {/*migrating-a-component-with-context-from-a-class-to-a-function*/}
    1834.
                                        ^

translateGlossary: 'children'은/는 '자식'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\createElement.md:64:59
                                                                     v
    63.
    64. * `createElement('h1', {}, child1, child2, child3)`와 같이 **children이 모두 정적인 경우에만 `createElement`에 여러 인수로 전달해야 합니다.** children이
 동적이라면 전체 배열을 세 번째 인수로 전달해야 합니다. 이렇게 하면 React는 [누락된 `키`에 대한 경고](/learn/rendering-lists#keeping-list-items-in-order-with-ke
y)를 표시합니다. 정적 목록인 경우 재정렬하지 않기 때문에 작업이 필요하지 않습니다.
    65.
                                                                     ^

translateGlossary: 'children'은/는 '자식'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\createElement.md:64:117
                                                                                                                                                      v
    63.
    64. * `createElement('h1', {}, child1, child2, child3)`와 같이 **children이 모두 정적인 경우에만 `createElement`에 여러 인수로 전달해야 합니다.** children이
 동적이라면 전체 배열을 세 번째 인수로 전달해야 합니다. 이렇게 하면 React는 [누락된 `키`에 대한 경고](/learn/rendering-lists#keeping-list-items-in-order-with-ke
y)를 표시합니다. 정적 목록인 경우 재정렬하지 않기 때문에 작업이 필요하지 않습니다.
    65.
                                                                                                                                                      ^

translateGlossary: 'Element'은/는 '엘리먼트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\createElement.md:74:144

      v
    73.
    74. JSX 없이 엘리먼트를 생성하려면  <CodeStep step={1}>type</CodeStep>, <CodeStep step={2}>props</CodeStep>,  <CodeStep step={3}>children</CodeStep>와 함께 
createElement를 호출합니다
    75.

      ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\createFactory.md:65:66
                                                                                           v
    64.
    65. 비록 대부분의 React 프로젝트들은 [JSX](/learn/writing-markup-with-jsx)를 사용하여 유저 인터페이스를 표현하지만, JSX가 필수는 아닙니다. 과거에는 `createF
actory`를 JSX 없이 유저 인터페이스를 표현하는 방법의 하나로 사용하였습니다.
    66.
                                                                                           ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\createFactory.md:65:127

                    v
    64.
    65. 비록 대부분의 React 프로젝트들은 [JSX](/learn/writing-markup-with-jsx)를 사용하여 유저 인터페이스를 표현하지만, JSX가 필수는 아닙니다. 과거에는 `createF
actory`를 JSX 없이 유저 인터페이스를 표현하는 방법의 하나로 사용하였습니다.
    66.

                    ^

translateGlossary: 'render'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\forwardRef.md:52:15
                       v
    51.
    52. `forwardRef`는 render 함수를 인수로 받습니다. React는 `props`와 `ref`와 함께 이 함수를 호출합니다.
    53.
                       ^

translateGlossary: 'Class'은/는 '클래스'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\legacy.md:17:57
                                                                 v
    16. * [`cloneElement`](/reference/react/cloneElement)를 통해 다른 엘리먼트를 시작점으로 사용하여 React 엘리먼트를 생성할 수 있습니다. [대안 확인하기](/refer
ence/react/cloneElement#alternatives)
    17. * [`Component`](/reference/react/Component)는 Javascript Class로써 React 컴포넌트를 정의합니다. [대안 확인하기](/reference/react/Component#alternatives)
    18. * [`createElement`](/reference/react/createElement)로 React 엘리먼트를 생성합니다. 일반적으로 JSX를 대신 사용합니다.
                                                                 ^

translateGlossary: '인터랙션'은/는 '상호작용'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\memo.md:114:16
                                    v
    113.
    114. 이 사이트와 같이 대부분의 인터랙션이 투박한 앱의 경우(페이지 또는 전체 섹션 교체 등) 일반적으로 memoization는 불필요합니다. 반면 앱이 그림 편집기이고  
도형 이동과 같이 대부분의 인터랙션이 세분되어 있다면, memoization가 유용할 수 있습니다.
    115.
                                    ^

translateGlossary: 'wrapper'은/는 '래퍼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\memo.md:122:122

         v
    121.
    122. 1. 컴포넌트가 다른 컴포넌트를 시각적으로 감쌀 때 [JSX를 자식으로 받아들이도록 하세요.](/learn/passing-props-to-a-component#passing-jsx-as-children) 이 
렇게 하면 wrapper 컴포넌트가 자신의 state를 업데이트할 때 React는 그 자식 컴포넌트가 리렌더링 될 필요가 없다는 것을 알 수 있습니다.
    123. 2. 지역 state를 선호하고 필요 이상으로 [state를 끌어올리기](/learn/sharing-state-between-components)를 하지 마세요. 예를 들어, 최상위 트리나 전역 state
 라이브러리에 폼이나 아이템이 호버되었는지와 같은 일시적인 state를 두지 마세요.

         ^

translateGlossary: '인터랙션'은/는 '상호작용'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\memo.md:128:4
               v
    127.
    128. 특정 인터랙션이 여전히 느리게 느껴진다면 [React 개발자 도구 profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)를
 사용해 어떤 컴포넌트가 memoization를 통해 가장 큰 이점을 얻을 수 있는지 확인하고 필요한 경우에 memoization 하세요. 이러한 원칙은 컴포넌트를 더 쉽게 디버깅하고 
이해할 수 있게 해주므로 어떤 경우든 이 원칙을 따르는 것이 좋습니다. 장기적으로는 이 문제를 완전히 해결하기 위해 [세분된 memoization를 자동으로 수행하는 방법](ht
tps://www.youtube.com/watch?v=lGEMwh32soc)을 연구하고 있습니다.
    129.
               ^

translateGlossary: 'rendering'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\PureComponent.md:65:21
                                       v
    64.
    65. 리액트 컴포넌트에는 항상 [pure rendering 로직](/learn/keeping-components-pure)이 있어야 합니다. 즉, props, state 및 context가 변경되지 않은 경우 같은 출
력을 반환해야 합니다. `PureComponent`를 사용하면 컴포넌트가 이 요구 사항을 준수한다고 리액트에게 알리므로 props 및 state가 변경되지 않는 한 React는 다시 렌더링 
하지 않습니다. 그러나 사용 중인 context가 변경된다면 컴포넌트는 다시 렌더링 됩니다.
    66.
                                       ^

translateGlossary: 'Component'은/는 '컴포넌트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useActionState.md:81:16
                       v
    80.
    81. * React Server Components를 지원하는 프레임워크와 함께 사용할 때, `useActionState`는 클라이언트에서 자바스크립트가 실행되기 이전에도 폼을 상호작용하도록
 만들 수 있습니다. Server Components를 사용하지 않는다면 컴포넌트 지역 state와 동일합니다.
    82. * `useActionState`에 전달한 함수는 첫 번째 인수로 이전 혹은 초기 state를 추가로 받습니다. 이를 통해 `useActionState`를 사용하지 않고 직접 폼 액션을 사용
했을 경우와는 다른 시그니처를 가지게 됩니다.
                       ^

translateGlossary: 'Component'은/는 '컴포넌트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useActionState.md:81:123

                          v
    80.
    81. * React Server Components를 지원하는 프레임워크와 함께 사용할 때, `useActionState`는 클라이언트에서 자바스크립트가 실행되기 이전에도 폼을 상호작용하도록
 만들 수 있습니다. Server Components를 사용하지 않는다면 컴포넌트 지역 state와 동일합니다.
    82. * `useActionState`에 전달한 함수는 첫 번째 인수로 이전 혹은 초기 state를 추가로 받습니다. 이를 통해 `useActionState`를 사용하지 않고 직접 폼 액션을 사용
했을 경우와는 다른 시그니처를 가지게 됩니다.

                          ^

translateGlossary: '랜더링'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useCallback.md:104:49
                                                                                         v
    103.
    104. **기본적으로, 컴포넌트가 리렌더링할 때 React는 이것의 모든 자식을 재귀적으로 재랜더링합니다.** 이것이 `ProductPage`가 다른 `theme` 값으로 리렌더링 할  
때, `ShippingForm` 컴포넌트 **또한** 리렌더링 하는 이유입니다. 이 것은 리렌더링에 많은 계산을 요구하지 않는 컴포넌트에서는 괜찮습니다. 하지만 리렌더링이 느린 것
을 확인한 경우, `ShippingForm`을 [`memo`](/reference/react/memo)로 감싸면 마지막 렌더링과 동일한 props일 때 리렌더링을 건너뛰도록 할 수 있습니다.
    105.
                                                                                         ^

translateGlossary: 'Callback'은/는 '콜백'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useCallback.md:166:9
                 v
    165.
    166. #### useCallback과 useMemo는 어떤 연관이 있나요? {/*how-is-usecallback-related-to-usememo*/}
    167.
                 ^

translateGlossary: 'Callback'은/는 '콜백'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useCallback.md:215:12
                      v
    214.
    215. #### 항상 useCallback을 사용해야 할까요? {/*should-you-add-usecallback-everywhere*/}
    216.
                      ^

translateGlossary: 'third'은/는 '서드'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useEffect.md:793:20
                                     v
    792.
    793. 예를 들어 React 없이 작성된 third-party 지도 위젯이나 비디오 플레이어 컴포넌트가 있다면 이 컴포넌트의 state를 현재 React 컴포넌트의 state와 일치하도록 
하기 위해 Effect를 사용할 수 있습니다. 이 Effect는 `map-widget.js`에 정의된 `MapWidget` 클래스의 인스턴스를 생성합니다. `Map` 컴포넌트의 `zoomLevel` prop을 변경
할 때, Effect는 해당 클래스 인스턴스의 `setZoom()`을 호출하여 동기화를 유지합니다.
    794.
                                     ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useEffect.md:1726:10
                   v
    1725.
    1726. **Effect Event는 반응적이지 않으며 Effect의 의존성에서 배제되어야 합니다.** Effect Event에는 비 반응형 코드(Effect Event 로직은 최신 props와 state를  
읽을 수 있음)를 배치할 수 있습니다. `onVisit`내의 `shoppingCart`를 읽음으로써 `shoppingCart`의 변경으로 인한 Effect의 재실행을 방지합니다.
    1727.
                   ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useEffect.md:1726:61
                                                                                             v
    1725.
    1726. **Effect Event는 반응적이지 않으며 Effect의 의존성에서 배제되어야 합니다.** Effect Event에는 비 반응형 코드(Effect Event 로직은 최신 props와 state를  
읽을 수 있음)를 배치할 수 있습니다. `onVisit`내의 `shoppingCart`를 읽음으로써 `shoppingCart`의 변경으로 인한 Effect의 재실행을 방지합니다.
    1727.
                                                                                             ^

translateGlossary: 'Event'은/는 '이벤트'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useEffect.md:1728:9
                  v
    1727.
    1728. [Effect Event가 어떻게 반응형 및 비 반응형 코드를 분리하는 데 도움이 되는지에 대한 자세한 내용은 여기를 읽어보세요.](/learn/separating-events-from-eff
ects#reading-latest-props-and-state-with-effect-events)
    1729.
                  ^

translateGlossary: '렌더 함'은/는 '렌더링(하다)'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useImperativeHandle.md:41:24
                                v
    40.
    41. * `ref`: [`forwardRef` 렌더 함수](/reference/react/forwardRef#render-function)에서 두 번째 인자로 받은 ref입니다.
    42.
                                ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useLayoutEffect.md:261:142

                                                                       v
    260.
    261. React는 `useLayoutEffect` 내부의 코드와 이로 인한 모든 state 업데이트가 **브라우저가 화면을 다시 그리기 전에** 처리되는 것을 보장합니다. 덕분에 툴팁을 
렌더링하고, 위치와 크기를 계산하고 다시 렌더링하면서 첫 번째 렌더링은 유저가 모르게 할 수 있습니다. 즉, `useLayoutEffect`는 브라우저가 화면을 그리는 것을 막습니
다.
    262.

                                                                       ^

translateGlossary: '유저'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useLayoutEffect.md:738:263


                                        v
    737.
    738. - 또는 `useLayoutEffect`가 있는 컴포넌트를 hydration 이후에만 렌더링할 수도 있습니다. 불리언 타입인 `isMounted` state를 초깃값인 `false`로 유지하다가, 
`useEffect` 호출되면 거기서 `true`로 값을 변경하세요. 그러면 렌더링 로직은 `return isMounted ? <RealContent /> : <FallbackContent />` 처럼 될 수 있습니다. 서버 
에서 렌더링하는 중이거나 hydration 동안 유저는 `FallbackContent`를 볼 것이고 `FallbackContent`는 `useLayoutEffect`를 호출하지 않아야 합니다. 그 후에 React가 `Fa
llbackContent`를 클라이언트 전용이면서 `useLayoutEffect`를 호출하는 `RealContent`로 변경할 겁니다.
    739.


                                        ^

translateGlossary: 'form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useMemo.md:159:90
                                                                                                                                v
    158. 1. 컴포넌트가 다른 컴포넌트를 시각적으로 감쌀 때 [JSX를 자식처럼 받아들이도록 하세요.](/learn/passing-props-to-a-component#passing-jsx-as-children) 이 
렇게 하면 감싸는 구성 요소가 자신의 상태를 업데이트하더라도 React는 자식을 다시 렌더링할 필요가 없습니다.
    159. 1. 지역 상태를 선호하고 필요 이상으로 [상태를 위로 올리지](/learn/sharing-state-between-components) 마세요. 예를 들어, forms와 같이 일시적인 상태나 어 
떤 항목이 트리의 맨 위에 위치하거나, 전역 상태 라이브러리에 있게 하지 마세요.
    160. 1. [순수한 렌더링 로직](/learn/keeping-components-pure)을 유지하세요. 컴포넌트를 다시 렌더링할 때 문제가 발생하거나 눈에 띄는 시각적인 부작용이 발생하 
면 컴포넌트에 버그가 있는 것입니다! 메모이제이션을 하는 대신 버그를 수정하세요.
                                                                                                                                ^

translateGlossary: 'useR'은/는 '사용자'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useRef.md:515:6
              v
    514.
    515. #### useRef를 초기화할 때 null 검사를 피하는 방법 {/*how-to-avoid-null-checks-when-initializing-use-ref-later*/}
    516.
              ^

translateGlossary: 'form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useState.md:444:48
                                                                            v
    443.
    444. 이 예시에서 `form` state 변수는 객체를 받습니다. 각 input에는 전체 form의 다음 state로 `setForm`을 호출하는 change 핸들러가 있습니다. 전개 구문인 `{ ..
.form }`은 state 객체를 변경하지 않고 교체합니다.
    445.
                                                                            ^

translateGlossary: 'third'은/는 '서드'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\react\useSyncExternalStore.md:333:3
           v
    332. - 브라우저 전용 API에 연결하는 경우 서버에 해당 API가 존재하지 않으므로 작동하지 않습니다.
    333. - third-party 데이터 저장소에 연결하는 경우 서버와 클라이언트 간에 일치하는 데이터가 필요합니다.
    334.
           ^

translateGlossary: 'Form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\rsc\server-actions.md:143:31
                                            v
    142.
    143. Server Actions는 React 19의 새로운 Form 기능과 함께 작동합니다.
    144.
                                            ^

translateGlossary: 'Form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\rsc\server-actions.md:145:16
                         v
    144.
    145. Server Action을 Form에 전달하여 폼을 서버에 자동으로 제출할 수 있습니다.
    146.
                         ^

translateGlossary: 'Form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\rsc\server-actions.md:162:1
         v
    161.
    162. Form 제출이 성공하면, React는 자동으로 폼을 재설정합니다. 보류 상태, 마지막 응답에 액세스하거나 점진적인 향상을 지원하기 위해 `useActionState`를 추가할
 수 있습니다.
    163.
         ^

translateGlossary: 'properties'은/는 '프로퍼티'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\rsc\use-client.md:271:108
                                                                                                                               v
    270. * [Date](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date)
    271. * 일반 [객체](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object) (직렬화할 수 있는 properties를 사용하여 [객체 이니 
셜라이저](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer)로 생성된 객체)
    272. * [서버 액션](/reference/react/use-server)으로서의 함수
                                                                                                                               ^

translateGlossary: 'Function'은/는 '함수'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\rsc\use-server.md:101:49
                                                                             v
    100.
    101. Server Action의 가장 일반적인 사용 사례는, 데이터를 변경하는 Server Function을 호출하는 것입니다. 브라우저에서 [HTML form 엘리먼트](https://developer.m
ozilla.org/ko/docs/Web/HTML/Element/form)는 사용자가 mutation을 제출하는 전통적인 접근 방식입니다. React 서버 컴포넌트로, React는 [forms](/reference/react-dom/c
omponents/form)에서 Server Action에 대한 최상의 지원을 제공합니다.
    102.
                                                                             ^

translateGlossary: 'form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\rsc\use-server.md:101:83
                                                                                                                              v
    100.
    101. Server Action의 가장 일반적인 사용 사례는, 데이터를 변경하는 Server Function을 호출하는 것입니다. 브라우저에서 [HTML form 엘리먼트](https://developer.m
ozilla.org/ko/docs/Web/HTML/Element/form)는 사용자가 mutation을 제출하는 전통적인 접근 방식입니다. React 서버 컴포넌트로, React는 [forms](/reference/react-dom/c
omponents/form)에서 Server Action에 대한 최상의 지원을 제공합니다.
    102.
                                                                                                                              ^

translateGlossary: 'form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\rsc\use-server.md:124:113

 v
    123.
    124. 예시에서 `requestUsername`는 `<form>`을 통한 Server Action입니다. 사용자가 이 양식을 제출하면 서버 함수인 `requestUsername`에 네트워크 요청이 있습니다.
 form에서 Server Action을 호출할 때 React는 form의 <CodeStep step={1}>[FormData](https://developer.mozilla.org/ko/docs/Web/API/FormData)</CodeStep>를 Server Act
ion의 첫 번째 인자로 제공합니다.
    125.

 ^

translateGlossary: 'form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\rsc\use-server.md:126:16
                         v
    125.
    126. Server Action을 form `action`에 전달하여, React는 form을 [점진적 향상](https://developer.mozilla.org/ko/docs/Glossary/Progressive_Enhancement)할 수 있 
습니다. 이것은 자바스크립트 번들이 로드되기 전에 양식을 제출할 수 있다는 것을 의미합니다.
    127.
                         ^

translateGlossary: 'form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\rsc\use-server.md:126:44
                                                           v
    125.
    126. Server Action을 form `action`에 전달하여, React는 form을 [점진적 향상](https://developer.mozilla.org/ko/docs/Glossary/Progressive_Enhancement)할 수 있 
습니다. 이것은 자바스크립트 번들이 로드되기 전에 양식을 제출할 수 있다는 것을 의미합니다.
    127.
                                                           ^

translateGlossary: 'form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\rsc\use-server.md:129:6
              v
    128.
    129. #### form에서 반환 값 처리 {/*handling-return-values*/}
    130.
              ^

translateGlossary: 'Form'은/는 '폼'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\reference\rsc\use-server.md:175:223

                                                                                                                                     v
    174.
    175. [form](/reference/react-dom/components/form) 외부에서 Server Action을 사용할 때, [Transition](/reference/react/useTransition)에서 서버 액션을 호출하면 
로딩 인디케이터를 표시하고, [낙관적 상태 업데이트](/reference/react/useOptimistic)를 표시하며 예기치 않은 오류를 처리할 수 있습니다. Form은 transition의 Server 
Action을 자동으로 래핑합니다.
    176.

                                                                                                                                     ^

translateGlossary: 'Application'은/는 '애플리케이션'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\warnings\invalid-aria-prop.md:5:67
                                                                             v
    4.
    5. 이 경고는 Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [명세](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties
)에 존재하지 않는 `aria-*` 프로퍼티를 가진 DOM 요소를 렌더링하려고 할 때 발생합니다.
    6.
                                                                             ^

translateGlossary: 'plugin'은/는 '플러그인'(으)로 번역되어야 합니다.
D:\Cloud_Git\ko.react.dev\src\content\warnings\invalid-hook-call-warning.md:106:23
                                         v
    105.
    106. 이러한 실수를 잡기 위해 [eslint-plugin-react-hooks 플러그인](https://www.npmjs.com/package/eslint-plugin-react-hooks)을 사용할 수 있습니다.
    107.
                                         ^

✖ 228 problems (228 errors, 0 warnings)

2. 주요 파일 변동 사항.

2-1. .gitignore

• yarn textlint-docs를 통해 자동 생성되는 문서는 자동 commit되지 않게 수정하였습니다.

2-2. .textlintrc

• .eslintrc 및 .prettierrc 파일 모두 json 파일 형식이기에, .textlintrc.js 파일을 삭제하고 .textlintrc 형식으로 통일성 있게 수정하였습니다.

2-3. .package.json

• textlint 간 필요한 npm 모듈 및 scripts 명령어를 추가하였습니다.

2-4. textlint/data

• textlint 간 필요한 data가 위치하는 디렉토리 입니다.

2-5. textlint/fixtures

• 불필요하여 삭제하였습니다.

2-6. textlint/generators

• 자동 문서 생성기가 위치하는 디렉토리 입니다.

2-7. textlint/rules

• textlint 간 가장 핵심적인 로직인, textlint 규칙이 위치하는 디렉토리 입니다.

2-8. textlint/tests

• test 파일들이 위치하는 디렉토리 입니다.

2-9. textlint/utils

• util 파일들이 위치하는 디렉토리 입니다.

2-10. wiki

• 추후, [Suggestion]: Is textlint deprecated? #971 (comment) 에서 논의한 wiki 통합을 위한 디렉토리 입니다. 현재는 우선적으로, textlint 관련 파일만 위치시켰습니다.

2-11. yarn.lock

• 모듈 설치 시, 자동 수정됩니다.

Progress

• 번역 초안 작성 (Draft translation)
• 공통 스타일 가이드 확인 (Check the common style guide)
• 모범사례 확인 (Check best practices)
• 용어 확인 (Check the term)
• 맞춤법 검사 (Spelling check)
• 리뷰 반영 (Resolve reviews)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
ko-legacy-reactjs-org	⬜️ Ignored (Inspect)	Visit Preview		Jul 12, 2024 0:50am

[github-actions]

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	104.15 KB (🟡 +3 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[hg-pyun]

오 PR분량이 커서 천천히 꼼꼼하게 리뷰해보겠습니다. 🙇‍♂️

[lumirlumir]

넵👍 혹시 애매하거나 이상한 부분 있으면 언제든지 물어봐 주세요!

[hg-pyun]

요거 내일까지 리뷰 완료해보겠습니다. 🙇‍♂️

[hg-pyun]

한번 쭉 읽어봤는데 큰 문제는 없어보입니다!, 다만 오늘 시간이 없어서 내일 찬찬히 다시한번 검토해 보겠습니다. 조금만 더 기다려주세요 🙇‍♂️