공부한것26 [React] props.children 사용하기!! VueJs에서 slot이 있었던 것처럼!!! React에는 props.children이 있다. 간단한 예시를 보면, Layout.js이다. import MainNavigation from './MainNavigation'; import classes from './Layout.module.css' function Layout(props) { return {props.children} } export default Layout; {props.children}가 있는 main태그 속에 사이에 있는 코드들이 표시된다!! Layout을 사용한 App.js코드는 다음과 같다. import { Routes, Route } from 'react-router-dom' import AllMeetupPage from '... 2022. 7. 25. [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. 이전 1 2 3 4 5 6 7 다음
