[React] React Router
개요 React Router는 React 앱에서 클라이언트 사이드 라우팅을 제공하는 라이브러리입니다. 페이지 이동 시 서버에 요청하지 않고 JavaScript로 화면을 전환합니다.
최근 포스트
[React] useEffect
개요 useEffect는 컴포넌트가 렌더링된 후 사이드 이펙트(Side Effect)를 실행하기 위한 Hook입니다. 사이드 이펙트란 API 호출, DOM 직접 조작, 타이머 설정, 이벤트 구독 등 렌더링 외부의 작업을 말합니다.
[React] 리스트 렌더링
개요 React에서 리스트를 렌더링할 때는 JavaScript의 Array.map() 메서드를 사용합니다. 각 항목에는 반드시 고유한 key 속성을 지정해야 합니다.
[React] 이벤트 처리
개요 React의 이벤트 처리는 HTML의 이벤트 처리와 유사하지만, 몇 가지 차이점이 있습니다. 이벤트 핸들러 이름은 카멜케이스를 사용하고, 함수를 직접 전달합니다.
[React] State (useState)
개요 State(상태)는 컴포넌트 내부에서 관리하는 동적 데이터입니다. State가 변경되면 React는 해당 컴포넌트를 자동으로 다시 렌더링합니다. useState Hook을 사용해 함수형 컴포넌트에서 상태를 관리합니다.
[React] Props
개요 Props(Properties)는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법입니다. Props는 읽기 전용(Read-Only)으로, 자식 컴포넌트는 전달받은 props를 변경할 수 없습니다.
[React] 컴포넌트
개요 컴포넌트(Component)는 React UI를 구성하는 독립적이고 재사용 가능한 최소 단위입니다. 마치 레고 블록처럼, 작은 컴포넌트들을 조합해 복잡한 UI를 만듭니다.
[React] JSX
개요 JSX(JavaScript XML)는 JavaScript 코드 안에서 HTML과 유사한 문법을 사용할 수 있게 해주는 React의 문법 확장입니다. JSX는 브라우저가 직접 이해하지 못하므로 Babel/Vite가 일반 JavaScript로 변환합니다.
[React] TypeScript 기초
개요 React 포스트의 모든 예제 코드는 TypeScript로 작성되어 있습니다. TypeScript는 JavaScript에 타입을 추가한 언어로, 코드 작성 시 오류를 미리 잡아줍니다. React 개발에 필요한 TypeScript 기초만 간단히 정리합니다.
[React] Hello World
개요 React에서 첫 화면을 출력하는 방법을 알아봅니다.