본문 바로가기

내마음대로만들어보자/React58

잘못된 주소 처리 - NotFound (라우팅) 현재 배우고있는 버킷리스트에 잘못된 주소 처리하는 법에 대해 배워보자! 1. NotFound.js 를 만들어서 빈 컴포넌트를 우선 만들어주자! import React from "react"; const NotFound = (props) => { return 주소가 올바르지 않아요!; }; export default NotFound; 2. App.js 에 NotFound.js를 임포트 해주자. import NotFound from "./NotFound"; 3. Switch 를 추가해준다. (Route로 생성된 자식컴포넌트중 매칭되는 첫번째 Route를 렌더링해준다,) - Switch 를 임포트 해준다. → import { Route, Switch } from "react-router-dom"; - Swit.. 2021. 7. 26.
라우팅이란 1. SPA 란? Single Page Aplication 보통의, 웹사이트는 페이지를 이동할때마다 html, css , js 등을 서버로부터 받아오지만, 이방식은 딱한번만 정적자원을 받아온다. * 장점 : 사용성 → 페이지를 이동할때마다 서버에서주는 html로 바꾸다보면은 호율이 떨어진다! ( 회원가입 할때 작성중이던 내용이 사라지거나 변경되는 내용 뿐만아니라 모든 부분의 html 을 불러오게 된다.) * 단점 : 처음 모든 컴포넌트를 불러오다보니 로딩 속도가 느려질 수 있다. 2. 라우팅이란? SPA에서 주소를 옮기는 방법은 html은 하나만 가지고 있지만 브라우저 주소창대로 다른 페이지를 보여줄 수 있다. 주소창주소대로 다른 페이지를 보여주는걸 라우팅이라고 한다. 3. 리액트 라우팅 적용하기(패키지.. 2021. 7. 26.
Event Listener 이벤트 리스너란? 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려준다. 예를들어, 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등에 자주 쓰인다. https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 공식문서는 당장 사용하지 않더라도 시간을 만들어서 꼭 한번씩 훑어보자! 이번, 이벤트 리스너는 "addEventListener" 를 통해 추가를 해보자 ※ 이벤트 리스너는 처럼 엘리먼트.. 2021. 7. 19.
ref 적용예시 ref 를 통해 인풋박스에 입력된 값을 가져와서 추가해보는 연습을 해보자! 우선은 기초를 잘 다지기위해서는 작업 순서를 항상 생각하고 코딩을 해보는 습관을 들이자. 1. 뷰를 만들어주자! 텍스트를 입력할 수 있는 인풋박스를 먼저 생성 추가하기 2. ref를 통해 text를 가져올 수 있도록 활용해보자. // ref 사용을 위해 컴포넌트 내 아래와같이 선언을 해주자. this.text = React.createRef(); 3. 인풋박스에 입력한 값은 "[인풋박스 ref].current.value " 형태로 가져올 수 있다. * 인풋박스에서 입력한 텍스트를 가져와서 리스트를 추가해주기 위한 함수를 만들어줘야한다. (ref 를 통해 가져온 text값을 리스트에 추가만 하면 끝) addBucketList = (.. 2021. 7. 19.

티스토리툴바