React 필수 용어 총정리

React란?

React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다. 상태(state)의 변화에 따라 화면을 동적으로 갱신할 수 있어 효율적인 웹 개발이 가능합니다.

컴포넌트 (Component)

UI를 구성하는 독립적 단위입니다. 하나의 페이지는 여러 개의 컴포넌트로 구성됩니다. 재사용성과 유지보수성을 높입니다.

JSX (JavaScript XML)

HTML처럼 보이는 JavaScript 문법입니다. React에서 UI를 선언적으로 작성할 수 있게 해줍니다.

const title = <h1>Hello, React!</h1>;

상태 (State)

컴포넌트 내에서 관리되는 데이터입니다. 상태가 변경되면 해당 컴포넌트가 자동으로 리렌더링됩니다.

const [count, setCount] = useState(0);

Props (프로퍼티)

부모 컴포넌트가 자식 컴포넌트로 데이터를 전달할 때 사용하는 값입니다.

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

useState

React에서 상태를 관리할 수 있게 해주는 Hook입니다.

useEffect

컴포넌트가 렌더링된 이후 특정 동작을 수행하도록 하는 Hook입니다. 주로 API 호출, 이벤트 등록 등에 사용됩니다.

Hook

함수형 컴포넌트에서 상태 관리나 생명주기 처리를 가능하게 하는 함수들입니다. 예: useState, useEffect, useRef, useMemo, useCallback

생명주기 (Lifecycle)

컴포넌트가 생성되고 업데이트되며 제거되는 일련의 과정입니다. 함수형 컴포넌트에서는 useEffect로 대체합니다.

이벤트 핸들링

사용자 이벤트(클릭, 입력 등)를 처리하는 방식입니다.

<button onClick={handleClick}>Click me</button>

조건부 렌더링

조건에 따라 렌더링할 컴포넌트를 바꾸는 기법입니다.

{isLoggedIn ? <Dashboard /> : <Login />}

리스트 렌더링

여러 개의 데이터를 반복 렌더링할 때 사용합니다.

{items.map(item => <li key={item.id}>{item.name}</li>)}

key

리스트 렌더링 시 각 요소를 고유하게 식별하기 위한 값입니다. 성능 최적화에 중요합니다.

Fragment

불필요한 DOM 요소를 만들지 않고 여러 요소를 그룹화할 수 있는 방법입니다.

<>
  <h1>Title</h1>
  <p>Content</p>
</>

useRef

DOM 요소나 상태 변경 없이 값을 유지하고자 할 때 사용하는 Hook입니다.

Context API

컴포넌트 트리 전체에 전역 상태를 전달하는 방법입니다. props drilling을 피할 수 있습니다.

const ThemeContext = React.createContext();

Custom Hook

사용자 정의 Hook입니다. 여러 컴포넌트에서 반복되는 로직을 재사용할 수 있습니다.

React Router

페이지 이동을 구현하는 라우팅 라이브러리입니다. SPA(Single Page Application)에 적합합니다.

<Route path="/about" element={<About />} />

useNavigate / useParams (React Router v6)

• useNavigate: 프로그래밍 방식으로 페이지 이동
• useParams: URL 파라미터 추출

상태 관리 라이브러리

복잡한 상태를 효율적으로 관리하기 위해 사용됩니다. 예: Redux, Recoil, Zustand 등

Suspense & Lazy

코드 분할(Code Splitting)과 비동기 컴포넌트 로딩을 위한 기능입니다.

const LazyComponent = React.lazy(() => import('./Component'));

Error Boundary

React 컴포넌트에서 발생한 오류를 UI로 처리할 수 있는 방법입니다. 함수형 컴포넌트에는 사용 불가 (클래스형만 가능).

StrictMode

개발 환경에서 잠재적인 문제를 감지하기 위한 도구입니다. 실제 렌더링에는 영향을 주지 않습니다.

<React.StrictMode>
  <App />
</React.StrictMode>

리렌더링

상태나 props가 변경되면 React는 해당 컴포넌트를 다시 렌더링합니다. 성능 최적화가 필요한 경우 React.memo, useMemo, useCallback을 사용합니다.

포털 (Portal)

기존 컴포넌트 트리 바깥에 컴포넌트를 렌더링하는 기능입니다. 모달, 알림 등에 사용됩니다.

ReactDOM.createPortal(<Modal />, document.getElementById('modal-root'))

단계 요약

• React는 UI 구성용 JS 라이브러리
• 컴포넌트 단위로 개발
• JSX 문법으로 UI 작성
• 상태(state)와 props로 데이터 흐름 관리
• useState, useEffect 등 Hook 중심 구조
• Context API와 외부 상태관리 도구로 확장 가능
• React Router로 페이지 전환 구현
• 성능 최적화 도구 및 모듈 지연 로딩 기능 제공

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.