REACT9 REACT-라우팅 예제 라우팅을 이용해서 코드를 만들어보겠슴둥. 왜냐면 내가 이해 못해쓰니까~!~!~! import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import {BrowserRouter} from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( /* */ ); ❗ 먼저 index.js에 가서 BrowserRouter를 import해주고, App을 Bro.. 2023. 8. 15. REACT-라우팅 ❓라우팅 라우팅은 경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어로, '경로를 지정하는 과정을 의미한다. 페이지 라우팅은 요청에 따라 적절한 페이지를 반환하는 일련의 과정이다. ❓npm을 사용한 프로젝트 생성 npm init react-app 프로젝트 이름 ❓리액트 라우터 설치(프로젝트로 이동해서 프로젝트에 설치하기) cd 프로젝트 이름 npm i react-router-dom ❓실행방법 npm start ❓프로젝트에 라우터 적용하기 리액트 라우터가 제공하는 BrowserRouter 컴포넌트로 App을 감싸면 된다. BrowserRouter 브라우저의 주소 변경을 감지하는 기능이 있다. 이 라우터는 컴포넌트가 페이지를 구성하고 이동하는데 필요한 기능을 다양하게 제공한다. =>index.j.. 2023. 8. 15. 구조분해할당(비구조화할당) 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. '구조 분해 할당'이란 명칭은 어떤 것들을 복사한 이후에 변수로 '분해'해준다는 의미 때문에 붙여졌습니다. 이 과정에서 분해 대상은 수정 또는 파괴되지 않습니다. 비구조화할당 구문은 객체에서도, 배열에서도 사용할 수 있다. const {username, setUsername} = useState('홍길동'); =>react에서 상태를 관리하는 useState 훅을 사용한 코드이다. 배열 비구조화 할당을 사용하여, 반환된 두 개의 값을 변수 username과 setUsername에 할당하고 있습니다. username은 상태 변수의 이름으로, 현재의 상태 값을 저장하고 나중에 변.. 2023. 8. 10. REACT-이벤트 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하지만 주의해야할 사항이 몇 가지 있다. ✔이벤트 사용 시 주의사항 1. 이벤트의 이름은 카멜 표기법으로 작성한다. ex) onclick=>onClick, onkeyup=>onKeyUp 2. 이벤트에는 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. 리액트에서는 함수 형태의 객체를 전달한다. 3. DOM 요소에만 이벤트를 설정할 수 있다. div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 이벤트 처리 시 함수 전달 방법 1. 랜더링을 하는 동시에 함수를.. 2023. 8. 9. 이전 1 2 3 다음