REACT13 [React] 데이터 목록 출력하기. 1. 더미 데이터 추가 const DUMMY_DATA = [ { id: 'm1', title: 'This is a first meetup', image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Stadtbild_M%C3%BCnchen.jpg/2560px-Stadtbild_M%C3%BCnchen.jpg', address: 'Meetupstreet 5, 12345 Meetup City', description: 'This is a first, amazing meetup which you definitely should not miss. It will be a lot of fun!', }, { id: 'm2', title: 'This is a .. 2022. 7. 25. [React] CSS module로 스타일링하기 리액트에서 css module을 이용해서 컴포넌트 별로 스타일을 지정해 줄 수 있다. 1. MainNavigation.module.css 파일 만들기 먼저 css를 적용하고 싶은 컴포넌트 주변에 컴포넌트와 이름이 같고. module.css를 확장자로 가지는 파일을 만든다. //MainNavigation.module.css .header { width: 100%; height: 5rem; display: flex; align-items: center; justify-content: space-between; background-color: #77002e; padding: 0 10%; } .logo { font-size: 2rem; color: white; font-weight: bold; } .header.. 2022. 7. 25. [React] Route에서 <Link /> 사용하기 1. 태그는 링크를 클릭하면 새로운 요청을 서버(리액트 앱을 호스팅 하는 서버)로 전달한다. 그리고 서버가 응답을 보내면 라우터가 어떤 페이지를 로딩할지 다시 판단해야 한다. 링크가 동작하지만, 다른 링크로 옮기려고 서버에 요청을 보내면서 이미 실행되고 있는 리액트 애플리케이션을 완전히 나가게 되는 것이다. 그래서 서버에 새로운 요청을 보내지 않고 react-router-dom에서 제공하는 Link컴포넌트를 사용할 수 있다. Link는 react-router-dom에서 내부적으로 의 클릭 리스너를 추가하고 클릭시 브라우저가 서버로 요청하는 것을 방지하고 옮겨 가려는 경로의 URL을 해석해서 브라우저의 URL창을 변경한다. 그러면 서버로 요청을 보내지 않고 적절한 컴포넌트를 화면에 로드할 수 있다. 2. .. 2022. 7. 25. [React] 라우트 설정하기. 1. 라우트 설치하기 npm i react-router-dom 2. index.js에서 BrowserRouter 설정 index.js 파일에서 라우터가 이 앱을 인식하고 url변화를 감시하도록 만든다!! import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter} from 'react-router-dom' import './index.css'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); 3. App.js에서 라우터 경로 설정하기 App.js에서 import { Route } from 'react-router-dom' R.. 2022. 7. 25. 이전 1 2 3 4 다음
