React (2) 썸네일형 리스트형 React Router(라우터) 사용 오늘은 React로 라우터 형식 적용을 해보겠습니다. 시작하기 전에 먼저 사용할 태그들을 정리해보겠습니다. - 태그 : 브라우저의 주소를 감지하고 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해줍니다. -태그 : 여러 를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시킵니다. 를 사용하지 않으면 매칭되는 모든 요소를 랜더링합니다. -태그 : path와 element 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정합니다. 여러 라우팅을 매칭하고 싶으면 path "/"뒤에 " * " 사용하시면 됩니다. -태그 : 경로를 연결해주는 컴포넌트입니다. a태그와 다르게 페이지를 전환하는 과정에서 새로고침을 하지않고 주소만 변경해줍니다. 이제 적용시키기 앞서 "react-rou.. React 개발 환경 구축하기 시작전에 Vscode와Node.js가 설치가 안되있다면 이글을 참고하세요. https://sinsucoding.tistory.com/2 Node.js Visual Studio Code 개발 환경 구축하기 Node.js 는 JavaScript 기반이기 때문에 Visual Studio Code로 쉽게 개발 환경을 구축할 수 있다. 먼저 Node.js 를 설치해 볼 것이다. Node.js 설치 다운로드 URL : https://nodejs.org/ko/ Node.js Node.js® is.. sinsucoding.tistory.com React프로젝트를 만들기위한 명령어를 입력합니다. # npx create-react-app 프로젝트명 프로젝트가 생기고 디렉토리 이동후 "npm run start" 명령어를 칩.. 이전 1 다음
