Ming's develop story

리덕스란? - 전역 상태 저장소 일단 내가 만들었던 버킷리스트를 되짚어보자! 지금은 App.js에서 리스트 항목 배열을 넣어두고, props로 넘겨주고 있고, 추가하기 버튼도 App.js에 있다. 만약에, 내가 이 추가하기 버튼과 텍스트 영역을 AddListItem 컴포넌트를 만들어 분리하고 싶다면 어떻게 해야하나? 파일을 만들고 코드를 만들면 될까? 그렇게 하면 추가하기 버튼을 눌렀을 때 정말 App 컴포넌트의 state를 수정할 수 있을까? 그렇다, 자식 컴포넌트는 부모 컴포넌트의 state를 맘대로 조작할 수 없다. 왜냐하면 데이터는 부모에서 자식으로 흐르게 하기로 했기 때문이다.(데이터는 단방향으로!) 그런데 만약에, App 컴포넌트와 AddListItem 컴포넌트가 같은 데이터 저장소를 본다면 ..

잘못된 주소 처리하기 1. 일단 NotFound.js 파일을 만들고 빈 컴포넌트를 만들어주자. import React from "react"; const NotFound = (props) => { return 주소가 올바르지 않아요!; }; export default NotFound; 2. App.js에서 불러옵니다. import NotFound from "./NotFound"; 3. Switch를 추가해주고, ... import { Route, Switch } from "react-router-dom"; ... return ( ... ( )} /> ... ); 4. NotFound컴포넌트를 Route에 주소 없이 연결하면 끝! ... ( )} /> ... Switch는 버킷리스트의 Route들만 감싸주..

react-router-dom 패키지 설치하기 - 꼭 적용할 프로젝트 경로 안에서 설치하기! react-router-dom 공식 문서 페이지 전환 순서 1. index.js에 BrowserRouter 적용하기 안에 들어있는 모든 컴포넌트를 감싸주기 위해서 제일 위에있는 App을 감싸준다. 2. 세부 화면 만들기 3. App.js에서 Route 적용하기 4. exact 적용하기 만약 메인페이지에 exact를 안 붙여주면 /Cat 페이지 처럼 / (Home)을 포함하는 페이지에서 밑의 사진과 같이 된다. 5. URL 파라미터사용하기 웹사이트 주소에는 파라미터와 쿼리라는 게 있는데 우리는 그 중 파라미터 사용법을 알아보자! 파라미터: /cat/nabi 쿼리: /cat?name=nabi 파라미터 주는 방법 //..

SPA란? Single Page Application! 말 그대로 서버에서 주는 html이 1개 뿐인 어플리케이션이다. 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만 정적자원을 받아온다. 왜 굳이 html을 하나만 줄까? 많은 이유가 있지만, 그 중 제일 중요한 건 사용성 때문이다. 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이다. (사용자가 회원가입하다가 적었던 내용이 날아갈 수도 있고, 블로그같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글 뿐인데 헤더와 카테고리까지 전부 다시 불러와야 한다.) 단점은 없나? SPA는 딱 한..