Front/React

[React] 서브 라우트

라우트 내부에 또 라우트를 정의하는 것 [Profiles.js] import React from 'react'; import { Link, Route } from "react-router-dom"; import Profile from './Profile'; const Profiles = () => { return ( 사용자 목록 : velopert gildong 사용자를 선택해 주세요} /> ); }; export default Profiles; - 첫번째 Route 컴포넌트에는 component대신 render라는 props를 넣너 주었다. - 컴포넌트 자체를 전달하는 것이 아니라, 보여주고 싶은 JSX를 넣어 줄 수 있따. - 지금처럼 따로 컴포넌트를 만들기 애매한 상황에 사용해도 되고, 컴포넌트에 ..

[React] URL 파라미터와 쿼리

파라미터 예시 : /profile/velopert 특정 아이디 혹은 이름을 사용하여 조회할 때 쿼리 예시 : /about?details=true 어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때 URL 파라미터 - url파라미터를 사용할 때는 라우트로 사용되는 컴포넌트에서 받아오는 match라는 객체 안의 params 값을 참조한다. - match객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지에 대한 정보가 들어았다. [Profile.js] import React from 'react'; const data = { velopert: { name: '최수녕', description: '리액트를 좋아하는 개발자' }, gildong: { name: '홍길동', description: '..

React 배우기

백엔드 개발자가 다음과 같이API를 남겼다고 가정 프론트엔드 부분 세팅 npm | build amazing things Build amazing things We're npm, Inc., the company behind Node package manager, the npm Registry, and npm CLI. We offer those to the community for free, but our day job is building and selling useful tools for developers like you. Take your JavaScript devel www.npmjs.com 코드를 깔끔하게 하고싶고, 여러사람과 함께 코딩을 한다면 아래 두가지를 추천함 .eslintrc - 컴퓨터가..

[React] 기본개념

리액트를 다루는 기술 https://velopert.com/3613 create-react-app 설치 C:\> mkdir react C:\> cd react C:\react> npm install -g create-react-app hello-react 프로젝트 생성 C:\react> create-react-app hello-react hello-react 프로젝트를 실행 C:\react> cd hello-react C:\react\hello-react> npm start > hello-react@0.1.0 start C:\react\hello-react > react-scripts start https://velopert.com/3626 JSX 에서 유의할 사항 태그는 반드시 닫아야 한다. … 하나의..