분류 전체보기85 리액트 라우터(React Router) 사용법(4) 1. 라우터에서 쿼리스트링을 사용하는 방법 우선 쿼리스트링을 화면에 표출해 봅니다. import { useLocation } from 'react-router-dom'; const About = () => { const location = useLocation(); return ( 소개 리액트 라우터를 사용해 보는 프로젝트입니다. 쿼리스트링: {location.search} ); }; export default About; useLocation 이라는 Hook을 사용합니다. 이 훅은 location이라는 객체를 반환하는데 사용자가 보고 있는 페이지 정보를 가지고 있습니다. pathname : 현재 주소의 경로 (쿼리스트링 제외) search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값 hash : 주소의.. 2023. 5. 29. 리액트 라우터(React Router) 사용법(3) 페이지 주소를 설정할 때 유동적인 값을 사용할 때가 많습니다.일반적으로 다음과 같이 두가지 형태로 사용합니다.URL 파라미터 : 주소의 경로에 유동적인 값을 넣는 형태주로 ID 또는 이름을 사용하여 특정 데이터를 조회할 때 사용쿼리스트링 : 주소의 뒷부분에 "?" 문자열 이후에 key=value 로 값을 정의하며 "&" 로 구분하는 형태키워드 검색, 페이지네이션, 정렬방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용1. URL 파리미터 이를 사용하기 위해 새로운 페이지 컴포넌트로 Profile 컴포넌트를 만듭니다. URL 파라미터는 useParams 라는 Hook을 사용하여 객체 형태로 조회할 수 있습니다. URL 파미미터의 이름은 라우트 설정을 할 때 Route 컴포넌트의 path .. 2023. 5. 28. 리액트 라우터(React Router) 사용법(2) 리액트 라우터 사용법(1) 에 이어서 작성합니다. 1. 프로젝트에 라우터 적용하기 src/App.js 파일에서 react-router-dom 에 내장되어 있는 BrowserRouter 라는 컴포넌트를 사용하면 됩니다. 2. 페이지컴포넌트 만들기 라우터를 통해 여러 페이지로 구성된 웹 페이지를 만들기 위해 각 페이지에서 사용할 컴포넌트를 만듭니다. 사용자가 웹페이지 처음 들어올 때 보이는 Home 페이지와 웹사이트 소개하는 About 페이지를 pages 폴더에 만들어 봅니다. 파일은 src/pages/Home.js , src/pages/About.js. 두 개 생성합니다. const Home = () => { return ( 홈 힘이나는 코딩 홈 페이지 입니다. ); }; export default Hom.. 2023. 5. 28. 리액트 라우터(React Router) 사용법 (1) 리액트는 리액트 라우터를 사용하여 여러 페이지로 구성된 프로젝트를 만들 수 있는 싱글페이지 애플리케이션(SPA) 입니다. 싱글페이지 애플리케이셔은 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고 우선 웹 애플리케이션을 브라우저로 불러와서 실행 시킨 후에 사용자와 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 하는 방식입니다. 따라서 기술적으로는 한 페이지만 존재하지만 사용자가 느끼기에는 여러 페이지가 존재하는 것처럼 느낄 수 있습니다. 리액트 라우터는 사용자의 브라우저 주소창의 경로에 따라 알맞은 페이지만 보여주지만 별도 경로의 html 을 새로 요청하는 것이 아니라 브라우저의 History API를 사용하여 브라우저 주소창 값만 변경하고 기존 페이지의 웹 애플리케이션을 유지하면서 라.. 2023. 5. 28. React 작업환경 설정 리액트 프로젝트 생성을 위한 사전작업 입니다. 맥OS를 기준으로 설명합니다. 1. 설치 순서 Node.js / npm, yam 설치하기 코드 에디터 설치하기 Git 설치하기 create-react-app 으로 프로젝트 만들기 2. Node.js Node.js는 백엔드 서버를 구축하는데 필요한 자바스크립트 런타임입니다. 리액트 애플리케이션은 웹브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만 개발하는 데 필요한 도구들이 Node.js를 사용하기 때문에 설치합니다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js를 설치.. 2023. 5. 27. VSCode 유용한 셋팅 제일 많이 사용하는 개발프로그램인 VSCode 를 잘 활용하기 위한 나만의 셋팅을 공유하고자 합니다. 기본 셋팅은 Mac 설치 기준으로 작성하였습니다. 1. D2Coding 글꼴 설치 개발에 적합한 D2Coding 글꼴을 추천합니다. 네이버에서 만든 글꼴로 아래와 같은 장점이 있습니다. 나눔바른고딕을 바탕으로 개발자의 코딩을 위해 가독성 및 유사 문자간 변별력 뿐만 아니라 디자인적으로 한글과의 조화를 고려해 최적화시킨 글꼴입니다. D2 Coding 글꼴은 코딩시 유사한 형태의 영문/숫자 뿐만 아니라 한글/특수문자 등에 대한 변별력과 가독성을 강화하였습니다. 또한 고정폭 글꼴로 제작이 되어 어떤 개발환경에서도 자간과 행간을 유지하도록 디자인되어 있습니다. 설치 사이트 : https://github.com/.. 2023. 5. 26. 이전 1 ··· 11 12 13 14 15 다음 반응형
