본문 바로가기
728x90

> 메모/React27

[리액트] - 라우터 설치와 사용 라우터 url 마다 페이지 구분.페이지 구분하는 것 = 라우팅 react-router-dom 설치  터미널 열어서 npm install react-router-dom@6 입력해서 설치설치가 잘 됐으면 npm start 해주기.import { BrowserRouter } from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );index.js 파일로 가서App 에다가 BrowserRouter 을 감싸주면 끝 import도 상단에 해주기라우터 사용하기 App.js 파일에서 import 해주기. 'react-router-dom' 여기서 몇가.. 2024. 5. 19.
[리액트] - 데이터 바인딩 / 컴포넌트화 / props 활용 / map() 활용 다른 js 파일에 있는 html을state에 보관해 놓고 html에 데이터 바인딩하기- export / importdata.js 에 있는 html 이 담긴 변수 data 를 App.js 로 옮기기export default 변수명;  - 변수 1개 할 경우,export {변수1, 변수2}; - 변수 2개 이상 할 경우 (default 사용 안함)//data.js에 있는 것let data = [ { id: 0, title: "White and Black", content: "Born in France", price: 120000, }, { id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000, .. 2024. 5. 19.
[리액트] 암기할 것 = state / props / 컴포넌트 / UI State 만드는 방법 useState('보관할 자료') State 만드는 방법 예시 >> let [a,b] = useState('남자 코트 추천'); a = state 에 보관했던 자료, 변수처럼 사용. {a}b = state 변경 함수. 함수이기 때문에 소괄호랑 같이 사용 . 어레이(배열 = Array)로 [ 남자코트추천, 함수 ] 이렇게 남음  let [글제목, set글제목] = useState([ "남자코트 추천", "강남 우동맛집", "파이썬 독학", ]);여러 개 사용한 예시State 변경 하는 방법= State 변경함수 사용= state 변경함수(새로운state)let [ 따봉, 따봉변경 ] = useState(0);지금 state 에 0이 담긴 상태state를 변경하려면.. 2024. 5. 15.
728x90

티스토리툴바