Pichu Pokeball
본문 바로가기

react3

 const[변수,함수]=useSate, event.target,...스프레드 연산자, some연산자 const[state(값을 담을 변수), setState(변수값을 바꿔주는 함수)] = useState(초기값); test1파일 const [movies, setMovies] = useState([ {id:1, title:'Movie 1', genre:'Drama', release_date:'2022-01-01'}, {id: 2, title: 'Movie 2', genre:'Action', release_date:'2022-02-01'}, {id: 3, title:'Movie 3', genre:'Comedy', release_date: '2022-03-01'} ]); movies: 값을 담을 변수 setMovies: 변수값을 바꿔주는 함수 [ {id:1, title:'Movie 1', genre:'Dra.. 2023. 8. 16.
라우팅 장점 1. 보기 쉽고 익숙하다. 2. 더욱 높은 활용도 컴포넌트 프로젝트 생성 npm init react-app book-react 라우팅: 경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어로, '경로를 지정하는 과정' 의미, 페이지 라우팅은 요청에 따라 적절한 페이지를 반환하는 일련의 과정 리액트 라우터 설치(프로젝트 설정 후0 npm i react-router-dom 실행 방법 npm start 프로젝트에 라우터 적용하기 리액트 라우터가 제공하는 BrowserRouter컴포넌트로 App을 감싼다. import { BrowserRouter } from 'react-router-dom'; root.render( /* */ ); book-react1 경로 설정, route, link to 이.. 2023. 8. 10.
리액트 //반드시 하나의 요소들만 반환하여야한다. div로 감싼다. function App(){ return( 리액트 안녕~!! 프로그래밍 시작합니다. ) } Node.js 설치 index.js는 진입 App.js는 기본 import 구문을 특정 파일을 불러오는 것을 의미. Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다. 이러한 기능을 브라우저에서도 사용하기 위해 번들러사용 번들러: 웹팩, Parcel, browserify라는 도구 등 리액트 프로젝트에서는 웹팩 사용 번들러를 사용하면 import 또는 require로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일 생성. 최적화 과정에서 여러 개의 파일로 분리 babel - loader는 자바스크립트 파일.. 2023. 8. 3.

티스토리툴바