반응형 리액트 (React)24 리액트에서 라우팅 처리 - 잘못된 주소 처리 잘못된 주소 처리 - 웹페이지 개발자가 미리 정하지 않은 주소로 들어온 경우를 다루는법 1. NotFound.js 파일을 만들고 빈 컴포넌트를 생성 import React from "react"; const NotFound = (props) => { return 주소가 올바르지 않아요!; }; export default NotFound; 2. App.js에서 불러옵니다. import NotFound from "./NotFound"; 3. Switch로 Route를 감싸준다. 4. NotFound컴포넌트를 Route에 주소 없이 연결 5. 편의성을 위한 NotFound에 뒤로가기 버튼 생성 - NotFound 에서는 이미 history가 자동으로 넘어와진다. - 하지만 일부러 넘기려면 아래처럼 코딩한다. .. 2021. 9. 3. 리액트에서 라우팅 처리 리액트 라우터 설치 & 적용 - 리액트에서 라우팅을 처리하기 위해 라우터를 설치해주자 리액트 라우터 설치 & 적용 0. 필요한 패키지 찾는법 npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript develop.. 5sangs.tistory.com 리액트 페이지 전환 기능 만들기 1. index.js에 Browser Router 적용하기 import {BrowserRouter} from "react-router-dom" ReactDOM.render( , documen.. 2021. 9. 2. 리액트 라우터 설치 & 적용 0. 필요한 패키지 찾는법 npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java www.npmjs.com - 위 사이트에서 필요한 패키지를 검색해보자 - 보통 상위에 노출되는 것을 사용하면 된다. - npm을 이용하여 설치하는 방법이 나와있다. - 자신이 yarn을 이용한다면 패키지 이름만 가져오면.. 2021. 9. 2. SPA & 라우팅 기본개념 Single Page Application 이란? - 서버에서 주는 html이 1개 뿐인 어플리케이션. - 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만 정적자원을 받아온다. - 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이다. - 사용자가 회원가입하다가 적었던 내용이 날아갈 수도 있다. - 블로그같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글 뿐인데 헤더와 카테고리까지 전부 다시 불러와야 한다. → 많은 이유가 있지만, 그 중 제일 중요한 건 사용성 때문. 단점 - 사용자가 안들어가 볼 페이지까지 전부 가지고 온다. - 한 .. 2021. 9. 2. React Event Listener React Event Listener - 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것. - 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰인다. - 리액트는 컴포넌트가 실행되고 제거되기 때문에 리스너 또한 제거되기 전 반드시 해제해 주어야 한다. - 아래의 페이지에서 이벤트 리스너의 종류를 참고하자. 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 예시 - 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있다. - 이곳에서는.. 2021. 9. 2. State 관리 - 함수형 컴포턴트 (useState, React Hooks) React Hooks - 함수형 컴포넌트는 state가 없지만 react hooks를 사용하면 state를 가질 수 있다. 1. Nemo.js 생성 import React from "react"; const Nemo = (props) => { // 반환할 리액트 요소가 없을 때는 null을 넘겨준다. // 처음 껍데기 잡으실때도 null을 사용 return null; } export default Nemo; 2. App에서 Nemo.js 불러오기 import React from "react"; import Nemo from "./Nemo.js" class App extends React.Component { constructor(props) { super(props); }; componentDidMoun.. 2021. 9. 1. 이전 1 2 3 4 다음 반응형
