본문 바로가기

전체 글69

[React] 리액트 라우터 : URL 파라미터 URL 파라미터로 여러개의 상세 페이지 만들기 } /> } /> } />  여러개의 상세 페이지를 만들 때 를 여러개 작성하여 만들 수도 있지만 URL 파라미터 문법을 사용하여 간편하게 만들 수 있다.  }/> path 작명할 때 /:변수 이렇게 사용하면 "아무 문자"를 뜻한다.그래서 위의 는 사용자가 주소창에 /detail/아무 문자 입력했을 때 컴포넌트를 보여 달라는 뜻이다. /detail/0/detail/1/detail/2이렇게 접속해도 컴포넌트를 보여줄 수 있다.  useParams()useParams()은 react-router-dom에서 제공하는 Hooks 중 하나로 파라미터에 입력한 값을 URL을 통해 넘겨받은 페이지에서 사용할 수 있도록 해 준다. 1. useParam.. 2024. 8. 7.
[React] 리액트 라우터 : navigate, nested routes, outlet 🌱 들어가기 전에리액트 프로젝트 폴더 구조는 비슷한 .js 파일끼리 한 폴더에 묶어 놓는 것이 좋은 폴더 구조이다.📁 component : 컴포넌트 역할하는 js 파일📁 routes/pages: 페이지 역할하는 js 파일📁 utils : 자주 사용하는 함수가 들어가는 js 파일필요할 때마다 폴더 만들어 사용   리액트 라우터페이지 이동 기능 : useNavigate() 페이지 이동은 Link를 사용해도 되지만 useNavigate()를 사용해도 된다. (App.js)import { useNavigate } from 'react-router-dom';function App() { let navigate = useNavigate(); return ( { navigate('/deta.. 2024. 8. 7.
[React] 리액트 라우터 : 세팅, 기본 라우팅, 페이지 나누기 페이지를 나누고 싶으면 일반 html,css,js 사이트는 html 파일을 여러개 만드면 html 파일이 각각 하나의 페이지지만 리액트는 html 파일을 하나만 사용한다.리액트에서는 다른 페이지를 요청하면 내부에 있는 를 변경하여 보여 준다.직접 코드를 짜는 것보다 react-router-dom이라는 외부 라이브러리를 설치하여 구현하는 게 일반적이다.  react-router-dom 설치터미널을 열고 설치 명령어를 입력해 준다.npm install react-router-dom@6  react-router-dom 세팅(index.js)import { BrowserRouter } from 'react-router-dom';const root = ReactDOM.createRoot(document.getEl.. 2024. 8. 7.
[React] 코드가 길어지면 import export export default / import 문법 데이터를 다른 파일에 보관해 뒀다가 import를 해 올 수 있다.예를 들어 data.js라는 파일에 있는 변수를 App.js에서 가져와서 사용한다고 해 보자. (data.js)let a = 10;export default a; export default 변수명; 는 원하는 변수를 밖으로 내보낼 수 있다. (App.js)import a from './data.js'console.log(a) export 했던 변수를 다른 파일에서 사용하고 싶으면 import 작명 from './파일경로'위 코드에선 a 출력해 보면 10이 나온다. (유의할 점)변수, 함수, 자료형 전부 export 가능.파일마다 export default라는 키워드는 하나만 사용 가능.파일 .. 2024. 8. 6.
[React] 이미지 넣기 & public 폴더 이미지 넣은 방법1. CSS 안에서css 파일에서 src 폴더 안에 있는 사진을 싶으면 ./이미지경로 사용하면 된다.(App.css).main-bg { height: 300px; background-image: url('./bg.jpg');} 2. HTML 안에서html 파일에 이미지를 넣고 싶으면 이미지를 import 한 후 사용해야한다.(App.js)import bg from './bg.jpg';function App() { return ( );} (1) import 작명 from './이미지경로'(2) 이미지 경로가 필요한 곳에서 작명한 걸 사용( 태그 쓰고 싶으면 이렇게 사용해도 됨)   public 폴더여러가지 소스 코드는 src 폴더에 보관하면 되는데 이미지 .. 2024. 8. 6.
[React] React-Bootstrap 사용하기 React-Bootstrap 라이브러리란?Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다.React-Bootstrap은 Bootstrap을 React에 맞게 변형한 것이다. https://react-bootstrap.netlify.app/자세한 내용은 공식 사이트를 살펴 보자.  React-Bootstrap 설치리액트 부트스트랩 사이트에 접속해서 Get started를 클릭하면 설치하는 방법이 설명되어 있다.  1. 터미널에 설치 명령어 입력npm install react-bootstrap bootstrap▲ 명령어는 변경될 수 있기 때문에 사이트에서 확인하는 것이 좋다  2. Bootstrap CSS 파일을 요구하는 경우(1) App.js에 import css{ .. 2024. 8. 6.

티스토리툴바