React에서 자주 쓰이는 용어 정리 (영어/한국어)

React에서 자주 쓰이는 용어 정리 (영어/한국어)

React 개발 중 자주 등장하는 개념과 용어를 영어와 한국어로 정리했다. 각 용어의 의미와 함께 간단한 설명도 포함했다.

1. React의 기본 개념 (React Basics)

Component	컴포넌트	UI를 구성하는 독립적인 블록으로, React의 기본 단위.
Props	속성	부모 컴포넌트가 자식 컴포넌트로 전달하는 데이터.
State	상태	컴포넌트 내부에서 관리되는 데이터.
Hook	훅	함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 함수.
Virtual DOM	가상 DOM	실제 DOM 대신 사용되는 React의 내부 표현 방식으로, 렌더링 효율성을 높임.
JSX (JavaScript XML)	JSX	JavaScript 코드 안에서 HTML과 유사한 문법을 사용할 수 있게 해주는 문법.
Lifecycle Methods	생명주기 메서드	컴포넌트가 생성, 업데이트, 제거될 때 호출되는 메서드.

---

2. Hook 관련 (React Hooks)

useState	상태 사용	함수 컴포넌트에서 상태를 관리하는 Hook.
useEffect	효과 사용	컴포넌트가 렌더링되거나 업데이트될 때 특정 작업을 수행하는 Hook.
useContext	컨텍스트 사용	전역 상태를 쉽게 공유하기 위한 Hook.
useReducer	리듀서 사용	상태 관리를 위해 리듀서를 사용하는 Hook (Redux와 비슷한 방식).
useRef	참조 사용	DOM 요소나 컴포넌트의 참조를 유지하는 Hook.
useMemo	메모이제이션 사용	값 계산 결과를 메모이제이션하여 성능 최적화에 도움을 주는 Hook.
useCallback	콜백 메모이제이션	함수를 메모이제이션하여 불필요한 재생성을 방지하는 Hook.

---

3. 상태 관리 및 데이터 흐름 (State Management & Data Flow)

Unidirectional Data Flow	단방향 데이터 흐름	데이터가 부모에서 자식으로만 전달되는 React의 기본 데이터 흐름.
Context API	컨텍스트 API	전역 상태를 관리하거나 컴포넌트 트리에 데이터를 전달하기 위한 기능.
Lifting State Up	상태 끌어올리기	여러 컴포넌트가 공유해야 할 데이터를 상위 컴포넌트로 이동시키는 패턴.

---

4. 렌더링 관련 (Rendering)

Rendering	렌더링	컴포넌트가 화면에 그려지는 과정.
Conditional Rendering	조건부 렌더링	조건에 따라 다른 컴포넌트를 렌더링하는 방식.
Reconciliation	조정	React가 Virtual DOM과 실제 DOM의 차이를 계산하여 업데이트하는 과정.
Hydration	수화	서버에서 렌더링된 HTML을 React 컴포넌트와 연결하는 과정.

---

5. 이벤트 처리 (Event Handling)

Event Handler	이벤트 핸들러	사용자의 동작(클릭, 입력 등)에 응답하는 함수.
Synthetic Event	합성 이벤트	React에서 사용되는 이벤트 객체로, 브라우저 간 호환성을 제공.
onClick	클릭 이벤트	클릭 이벤트를 처리하기 위한 속성.
onChange	변경 이벤트	입력 필드 값이 변경될 때 실행되는 이벤트.

---

6. 성능 최적화 (Performance Optimization)

Memoization	메모이제이션	이전 계산 결과를 저장하여 불필요한 작업을 줄이는 방법.
Lazy Loading	지연 로딩	필요할 때만 컴포넌트를 로드하여 초기 로딩 속도를 개선하는 방식.
Code Splitting	코드 분할	애플리케이션 코드를 분리하여 효율적으로 로드하는 기술.
React.memo	React.memo	불필요한 렌더링을 방지하기 위한 고차 컴포넌트.

---

7. 기타 (Miscellaneous)

Props Drilling	속성 내려주기	중첩된 자식 컴포넌트에 데이터를 전달하기 위해 여러 단계로 전달하는 방식.
Higher-Order Component	고차 컴포넌트	기존 컴포넌트를 확장하여 새로운 기능을 추가하는 패턴.
Fragment	프래그먼트	여러 요소를 그룹화할 때 사용하며, DOM에 추가적인 노드를 생성하지 않음.
Portal	포탈	DOM의 다른 위치에 컴포넌트를 렌더링할 수 있는 기능.
Key	키	React에서 리스트 렌더링 시 요소를 식별하기 위한 고유 값.