바스키아

npx create-react-app react-app --typescript cra 를 이용하면 자동으로 tsx파일이 적용된 타입스크립트 프로젝트를 생성하게된다.

나의 선임께서는 Router를 쓰실때 이런식으로 쓴 나와는 달랐다.... history 과거, 역사, 기록 뭘까...... 우선 history 객체를 알아보자 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md 설명이 되어있는 md파일 참조하세용~ 자바스크립트의 다양한 환경에서 history 세션을 관리한다는 말에 쪼큼 감이 온다. 우선 예제에 저 두 메서드를 쓸것이고 그외에도 위 속성들을 봐주어야한다. 이놈은 라우터를 사용하는 컴포넌트에 props로 사용되고 객체를 사용해서 컴포넌트를 통해서 라우터에 직접적인 접근을 할수있다. 예를들면 특정 함수를 호출했을때 특정경로로 이동하거..

파라미터랑 쿼리는 통해서 주소를 통해 동적인 값을 읽어와야 할때...사용한다.. 우선 밑에 형식이다. Query는 주로 검색조건이용할때 많이 사용한다. 두형식으로 우선 예제를 만들어볼껀데 URL Parameter먼저 Profile.js를 만들어보자 import * as React from 'react'; const profileData = { beom :{ name : 'beom', description : "Front Engine ...MyInfo ...etc" }, homer : { name : '호머 심슨', description : '심슨가족 아빠 주인공' } } function Profile({ match }) { const { username } = match.params; const prof..

Sub Route 라우트 안에 라우트 만들기!! 라우트를 통해 컴포넌트를 열었는데 그안에 또 라우트를 이용해야해 이럴때....사용(사실 내가 당장 필요한부분이였음) import * as React from 'react'; import Profile from './Profile'; import {Route, Link} from 'react-router-dom'; function Profiles() { return ( 사용자목록 beom homer 사용자를 선택해주세요} /> ); } export default Profiles; exact 이그젝트 쓰는이유는 전글에 설명되어있고.. 유의할점은 이부분이다. 사용자를 선택해주세요} /> path로 라우트를 이동했을때 render ={ 하고 바로 렌더할 dom요소..

전글을 보고 이제 해보자 해보자!! npm i react-router-dom 터미널에서 이눔을 설치해준다. 전글에 이런글이 있었지 기억이 난다면 이놈을 호출해줄꺼야 index.js 에다가 감싸주고 import {BrowserRouter} from 'react-router-dom'; ReactDOM.render( , document.getElementById('root')); 그리고 라우트할 컴포넌트를 작성해보자 import React from 'react' function Home() { return ( 라우터 체인지 이곳은 라우터 체인지된 HOME 입니다. ) } export defaut Home; Home() 을 export 해주는거 잊지 말라구~ import React from 'react' fun..

Single Page Application 이란말을 React 공부하면서 많이 들어봤을 것이다... 혹시 이거 모른다면 내가혼던것처럼 그쪽도...혼나야...크큼 여튼 SPA에서는 라우팅을 클라이언트가 담당한다. 그럼 라우팅은 뭐지? 물론 책에 잘나와있지만 -> 간단하게 말하면 어떤 주소에 어떤 UI를 보여줄지 택하는것 원래는 서버쪽에서 관리하는 로직이 이제는 클라이언트가 관리함!! 이거 주소타면 전체 다시 받아서 새로고침마냥? (그래서 댓글처리할때 비동기 하는거 이런거 빼고) user가 about페이지를 서버에 요청하면 서버가 이에대해 응답을 하는 형식이다. 하지만 새로운 데이터를 요청해야한다면 계속 요청하다보면 서버자원은 계속 많이 사용하게 되고 불필요한 트래픽 사용 등 안좋아... ->간단하게 말하면..