React (3) 썸네일형 리스트형 리액트로 개발하기 - react-router-dom (setup부터 예제까지) React Router 공식문서 Setup yarn add react-router-dom 공식문서에서는 npm command로 나와있지만, 나는 yarn 을 사용하고 있기 때문에 위와 같은 커맨드 라인을 터미널에 쳐주었다. 그리고 다시, yarn start. Create a Browser Router createBrowserRouter 를 통해서, router 를 만들어주고, 진입점인 index.js 파일에 해당 라우터를 설정해준다. 이렇게 해주어야 웹 애플리케이션에서 라우팅이 동작할 수 있게 된다. import React from "react"; import ReactDOM from 'react-dom/client'; import './index.css'; import { createBrowserRou.. 리액트로 개발하기 - create-react-app으로 프로젝트 시작 React로 개발을 시작하기에 앞서 설치해야 하는 것들은 다음과 같다. nodejs npm yarn 설치가 끝나면, 아래의 코드를 쳐서 react 프로젝트를 생성할 수 있다. 공식홈페이지 yarn create react-app my-app yarn을 사용해서 react-app을 생성하는 것이고 my-app이 위치한 곳에는 프로젝트 이름을 적어주면 된다. 실질적으로 아래의 패키지, 파일들은 수정할 일이 거의 없다고 보면 되고, yarn 에서 외부 라이브러리 설치 및 실행 시에 필요한 것들이어서 크게 신경쓰지 않아도 된다. .yarn node_modules yarn.lock .pnp- 신경써서 봐야하는 부분은 바로 아래 패키지다. public src public은 정적 리소스들이 위치한 패키지다. 그리고 작.. 리액트로 개발하기 - Component 생성 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 위 코드는 이런 내용이다. 1. ReactDOM이 id가 root인 요소를 찾아서 가상의 요소를 만들고 2. 여기서 App이라는 컴포넌트를 만들어라. StrictMode란? 공식문서에서는 이렇게 나와있다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다. Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. import React from 'react'; function Exampl.. 이전 1 다음