24/05/22 React router dom 기본 사용법
목적 이제 라우팅을 도입해 리액트로 간단한 프로젝트를 도전해보려고 한다. 그래서, 까먹으면 찾아오려고 작성해본다. 물론, 캠프 과제부터..! 설치 방법 yarn add react-router-dom 이후, 프로젝트 내의 package.json 에 잘 추가 되었는지 확인해야한다. 사용법 아무런 hook 도 사용하지 않는 기본 사용 방...
목적 이제 라우팅을 도입해 리액트로 간단한 프로젝트를 도전해보려고 한다. 그래서, 까먹으면 찾아오려고 작성해본다. 물론, 캠프 과제부터..! 설치 방법 yarn add react-router-dom 이후, 프로젝트 내의 package.json 에 잘 추가 되었는지 확인해야한다. 사용법 아무런 hook 도 사용하지 않는 기본 사용 방...
오늘 한 것 리액트 강의 수강 및 포스팅 리액트의 useState 사용시 batch update Memoization 기법(React.memo, useContext, useMemo) 딥 다이브 JS 스터디 17장 간단히 정리 해보았다! 내일...
목적 리액트에서, setState() 를 여러번 사용해서 작업을 처리하려고 했더니 한 번만 적용이 되길래 찾아보았다. batch update const App = () => { const [count, setCount] = useState(0); // const handleCountPlus = () => { // setC...
목적 리액트에 대해 여러 가지 hook(useState, useEffect, useRef, useContext)을 이용하면서, 리액트는 State 의 변경에 따른 리렌더링이 핵심이라는 것을 알게되었다. 이 리렌더링이 너무 빈번하게 일어난다면, 사용자 측면에서 좋은 평가를 받지 못하게 된다. 웹 사이트에서 별 작업을 수행하지 않아도 메모리를 많이 잡...
오늘 한 것 모던 JS 딥 다이브 밀린 내용을 한 번에 다 다뤘다. 생각보다 분량이 많지 않아 금방 끝냈다. 리액트 입문 강의 수강 밀린 강의 모두 수강했다. 리액트 숙련 강의 먼저 소화한 뒤, 과제도 마무리하자. 그래야 유데미 강의 ...
목적 리액트를 접하면서, 자주 나오는 단어인 가상 DOM 이 무엇인지 간단히 정리해보았다. 가상 DOM 이란? 자바스크립트 내에서 웹 문서를 구성하는 HTML 요소들에 접근할 수 있는 API인 DOM을 복사해 메모리에 저장한 형태다. 웹 문서에 직접적인 변화를 주는 것 보다, 메모리에 저장한 객체를 바꾸고 다시 불러오는 작업이 훨씬 효율...
목적 아무리 해봐도, Promise 가 뭔지 잘 모르겠었어서 일단 차근차근 정리해보기 위해 간단한 내용부터 시작해 살을 붙여보려고 한다. Promise 란? ✨ JS 에서 비동기 작업의 최종 완료 또는 실패를 나타내는 객체. 비동기 작업이 수행이 될 때, 그 결과를 보장해주는 역할(성공, 실패 무관) 그래서, Promise 는 비동기 작업의 ...