꾸준하게 거북이처럼

React Router는 라우팅 라이브러리로, React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces. 최근에 React Router를 써봤는데, 버전에 맞는 문법을 써야하는 것은 당연한데, 버전에 다른 문법을 쓰고 있어서 계속 오류가 났던 것을 늦게 알아버렸다.. 모두 package.json에서 버전을 잘 확인합시다! *설치했던 npm 라이브러리 삭제하기 npm uninstall react-router-dom(예시) React Router Vesion 4/5 설치 npm i react-router-dom 코드 import ..

React에서 클래스형 컴포넌트에서 생명주기에서 생성 될 때(mounting) 1. constructor 2. getDerivedStateFromProps : props와 state 비교 3. render 4. React Dom 업데이트 5. componentDidMount : 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출 Component가 update 될 때 1. getDerivedStateFromProps : props와 state 비교 2. shouldComponentUpdate : new props, state를 확인하고 rerender 할 것인지 결정 3. rerender 4. getSnapshotBeforeUpdate: 가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호..

React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 336ac8ceb on 7/13/2022. chrome.google.com React를 쓴다면 이 도구는 꼭 설치하는 것이 도움이 된다. state가 변하는 것도 눈에 보이고, 컴포넌트 렌더링이 되는 것에도 반응한다. 아래 사진처럼 개발자 도구에서 Components에 들어가면 확인할 수 있다. Components를 클릭하면 component들이 쭉 나열되어 있고 props, state 값이 보여질 것이다. 직접 만든 프젝이 아니고 넷플릭스라서 그런지 state은 안뜬다.

리액트 프로젝트를 할 때 그리고 JS를 공부할 때 기본적으로 알면 좋은 기초 개념을 정리하고자 한다. 이전에는 동기 프로그래밍에 익숙해졌다가 비동기에 익숙해지려 하니 헷갈려서 머리 속 정리가 필요하다. 1. aync await (비동기/동기) JS에서 비동기 프로그래밍 방식은 대표적으로 Promise, Callback, aync await가 있다. 여기서 aync await 방식을 자주 썼어서 개념을 정리하고자 한다. 비동기의 의미는 어떤 특정한 코드의 실행처리가 완료될 때 까지 기다리는 것이 아닌 그 다음 코드를 먼저 실행하는 것을 의미한다. 즉, 병행처리를 한다는 것이다. 처리하는데 시간이 걸리는 코드를 쓸 때 비동기를 사용한다. 대표적인 예로 API를 불러올 때가 있다. *await은 async 함..