이레

Router.js 에서 설정한 path로 이동하는 방법 ⭐️ Link 태그 html에서 a 태그와 같은 기능을 하는 태그입니다. 클릭했을 때 바로 이동하는 기능을 구현할 때 사용합니다. ⭐️ useNavigete useNavigete를 사용하기 위해서는 react-router-dom 라이브러리가 설치되어 있어야 합니다. 라이브러리 설치 후 해당 라이브러리를 import 시켜준 후 사용합니다. import { useNavigate } from "react-router-dom"; //예시입니다 const Mypage = () => { const navigate = useNavigate(); return ( . . . . navigate('/home')} /> ) } Link 태그와 다른점은 useNavige..

react router로 페이지 이동 작업을 하다 에러가 났습니다. react-router-dom v6부터는 Switch 대신 Routes를, Route 안에 component 대신 element를 사용합니다. + 자식으로는 만 가능합니다. 그래서 위와 같이 작성하면 자꾸 에러가 발생합니다.. 과 가 있어서 에러 발생.. :( 위처럼 element로 사용해줘야 작동합니다.

리액트 슬라이드 라이브러리에 여러 가지가 있는데 제일 간단하고 쓰기 편하다는 react-sldie를 사용해 봤습니다. ⭐️ 라이브러리 설치 npm install react-slick --save npm install slick-carousel --save npm을 이용해 라이브러리를 설치해 줍니다. 해당 라이브러리가 잘 설치되었다면 package.json 에 이렇게 들어가있습니다. ⭐️ 사용법 slide를 import 해줍니다. import React from "react"; import Slider from "react-slick"; // slide import const MainSlider = () => { const settings = { dots: true, Infinite: true, speed..

1, 리액트 컴포넌트 만들기 새로운 파일을 생성해줍니다. 파일 이름은 임의 test로 하고 js 형식으로 저장합니다. 리액트 컴포넌트를 만들 때는 import로 리액트를 불러와야 하는데 import React from "react"; 를 제일 첫 줄에 작성해줍니다. 제일 하단에는 컴포넌트를 내보내는 코드를 작성해줍니다. 이 코드가 있어야 다른곳에서 컴포넌트를 불러와 사용할 수 있습니다. export defalut Study; 첫줄과 마지막 줄 사이에는 컴포넌트 형태가 들어가게 되는데, 리액트는 함수형과 클래스형 이렇게 두 가지가 있습니다. 일단 함수형으로 정리할게요 Study.js 로 저장해준다음, 아래 코드를 작성해줍니다. import React from "react"; function Study() ..

1, node.js 설치하기 14버전 혹은 16버전으로 설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 터미널에서 node -v 로 설치가 잘 되었는지 확인을 합니다. 설치 후 컴퓨터 재부팅하기 (하단에 이유있음) 2, 프로젝트 생성 저는 vs code 를 사용하기때문에 vs code 기준으로 정리하겠습니다. vs code로 작업할 폴더를 열어줍니다. vs code의 터미널을 열어줍니다. 터미널에 npx create-react-app 프로젝트이름 을 입력해줍니다. 엔터 한번 더 눌러주면 프로젝트 파일이 설치됩니다. 그다음 해당 프로젝트를 미..