뉴비벡엔드개발자

react-router-dom React로 구축된 애플리케이션 내에서 라우팅을 관리하기 위해 React 웹 개발에 사용되는 패키지입니다. 이를 통해 개발자는 웹 앱에서 동적 라우팅을 구현할 수 있습니다. 즉, 전체 페이지를 다시 로드하지 않고도 애플리케이션이 브라우저 주소 표시줄의 URL을 기반으로 다양한 구성 요소나 페이지를 표시할 수 있습니다. 이 패키지는 다양한 구성 요소 간 탐색이 기존 다중 페이지 웹 사이트를 모방하는 단일 페이지 애플리케이션(SPA)을 구축하는 데 도움이 됩니다.사용예시 App.jsimport React from "react";import { BrowserRouter as Router, Routes, Route, Link} from "react-router-dom";im..

State 컴포넌트의 상태를 관리하는 데이터. 사용자의 상호작용이나 시간의 흐름에 따라 변경될 수 있는 데이터를 포함. State의 변경은 보통 이벤트 핸들러나 다른 입력을 통해 발생하며, 변경이 발생하면 컴포넌트가 자동으로 다시 렌더링됩니다. 컴포넌트 내부에서 관리: State는 컴포넌트 내부에서 선언되고 변경됩니다. 컴포넌트의 private 데이터로서 외부에서 직접 접근할 수 없습니다. 동적 UI: State를 사용하여 동적인 사용자 인터페이스를 만들 수 있습니다. setState 함수: 클래스 컴포넌트에서는 setState 메서드를 사용해 state를 업데이트하고, 함수 컴포넌트에서는 useState 훅을 사용합니다. prevState React의 상태 업데이트는 비동기적으로 처리될 수 있으며, 특..

function App() { let [num, setNum] = useState(1); const [input, setInput] = useState(''); const inputChange = (e) => { setInput(e.target.value); } return ( ); }

1. Node.js 설치 Node.js — Download Node.js® (nodejs.org) Node.js — Download Node.js® Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Create React App npx create-react-app my-app 이 명령어는 my-app 이라는 디렉토리를 생성하고, 필요한 모든 의존성을 설치한 후 기본 React 앱을 설정합니다. 3. 프로젝트 디렉토리로 이동 및 서버 시작 cd my-app npm start