react-router-dom은 React 애플리케이션에서 페이지 간의 네비게이션(라우팅)을 관리하는 패키지입니다. 주로 SPA(Single Page Application)에서 사용되며, 브라우저의 URL 변화에 따라 컴포넌트를 동적으로 렌더링할 수 있게 해줍니다. 이를 통해 React 애플리케이션은 페이지 전환 시 새로고침 없이 매끄럽게 페이지가 전환되는 사용자 경험을 제공합니다.1. react-router-dom 설치라우팅 기능을 사용하려면 react-router-dom 패키지를 설치해야 합니다.npm install react-router-dom설치 후, 라우터 컴포넌트와 다양한 라우팅 기능을 사용할 수 있습니다.2. BrowserRouter와 HashRouterReact Router에서는 두 가지 ..

React에서 json-server와 REST API는 프론트엔드 애플리케이션을 API와 연동하고, 더미 데이터를 이용해 개발 환경을 구축하는 데 매우 유용합니다. 이를 통해 실제 백엔드 서버가 준비되지 않은 상태에서도 API 요청을 테스트할 수 있습니다.1. REST API란?REST API(Representational State Transfer API)는 HTTP를 통해 데이터와 리소스를 교환하는 방식입니다. REST는 자원을 URL로 표현하고, HTTP 메서드(GET, POST, PUT, DELETE)를 사용하여 자원에 대한 CRUD(Create, Read, Update, Delete) 작업을 수행합니다. REST API는 일관된 규칙을 따르기 때문에, 다양한 클라이언트가 서버와 데이터를 주고받을..

React에서 Router는 페이지 간의 이동과 URL에 따른 컴포넌트 렌더링을 관리하는 기능을 제공합니다. 일반적으로 React 애플리케이션은 단일 페이지 애플리케이션(SPA)이므로, 페이지를 이동할 때 새로고침 없이 다른 컴포넌트를 로드해 사용자 경험을 개선할 수 있습니다. 이를 위해 React Router 라이브러리를 사용하여 URL 경로에 따라 다른 컴포넌트를 렌더링하도록 설정합니다.React Router의 주요 개념React Router는 페이지 라우팅을 위해 필요한 다양한 컴포넌트와 기능을 제공합니다. 가장 기본적인 기능은 경로(path)와 이에 맞는 컴포넌트 매핑을 통해 URL에 따라 페이지가 변경되는 것입니다.React Router 설치React Router를 사용하려면 react-rout..

React에서 더미 데이터(Dummy Data)와 map() 반복문을 사용하는 것은 컴포넌트가 실제 API 데이터 없이도 데이터 목록을 처리하는 방식을 테스트하거나, 여러 개의 컴포넌트를 동적으로 렌더링할 때 유용합니다. 특히  리스트 렌더링에서 자주 활용되는 패턴입니다.1. Dummy Data란?더미 데이터(Dummy Data)는 주로 애플리케이션 개발 초기나 테스트 단계에서 임시로 사용하는 데이터를 의미합니다. 더미 데이터는 실제 API로부터 데이터를 받아올 때까지 UI가 어떻게 렌더링될지 확인하거나, 컴포넌트가 예상한 대로 동작하는지 확인하는 데 유용합니다.예제: Dummy Data 생성하기더미 데이터는 일반적으로 JSON 형식이나 JavaScript 객체 배열로 작성합니다. React 컴포넌트에서..

State와 useState는 React에서 컴포넌트 내부의 상태를 관리하기 위한 중요한 개념입니다. State는 컴포넌트의 데이터나 UI 상태를 저장하고, 상태 변경에 따라 컴포넌트가 다시 렌더링되도록 만듭니다.1. State란?State는 React 컴포넌트가 내부적으로 유지해야 하는 동적인 데이터를 의미합니다. State가 변경되면 React는 해당 컴포넌트를 다시 렌더링하여 UI를 업데이트합니다. 예를 들어, 사용자 입력값, API 응답, UI의 활성화 상태 등 다양한 값들을 state로 관리할 수 있습니다.State는 주로 함수형 컴포넌트에서 useState 훅을 통해 선언되고 관리됩니다.2. useState란?useState는 React의 훅 중 하나로, 함수형 컴포넌트에서 state를 관리할..

React에서 props는 컴포넌트 간에 데이터를 전달하기 위해 사용하는 객체입니다. 부모 컴포넌트가 자식 컴포넌트에게 데이터나 함수, 설정값 등을 전달할 때 주로 사용됩니다. "props"는 properties의 약자로, 컴포넌트의 속성처럼 생각할 수 있습니다.※ props는 데이터 타입이 아닙니다. props는 React 컴포넌트에 전달되는 데이터를 가리키는 속성으로, 부모 컴포넌트가 자식 컴포넌트에 전달하는 값을 담는 JavaScript 객체입니다. 1. Props의 개념데이터 전달: React의 컴포넌트는 기본적으로 고립되어 있으나, props를 통해 부모-자식 간 데이터 전달이 가능합니다.불변성: props는 전달받은 컴포넌트에서 수정할 수 없고 읽기 전용입니다. 이는 컴포넌트가 예측 가능하게 ..