CodingCredit

React-router-dom 이 v6로 업그레이드되면서 사용법들이 많이 바뀌었다. 매번 찾기도 그래서 기존에 많이 사용하던 것들이 어떻게 바뀌었는지 정리해보도록 하겠다. 바뀐 모든 기능을 정리하기보다는 기존에 자주 사용하던 기능들만 어떻게 바뀌었는지 정리해보겠다! App에서 중첩 라우팅 설정 Switch, exact가 삭제되었다! 라우터가 중첩될 때 썼던 Switch, exact가 삭제되고 이제는 중복되는 경로의 태그에 /*를 입력하고 자식태그로 넣어준 뒤에 부모태그의 컴포넌트에 Outlet을 넣어준다. // 기존 App function App() { return ( ); } // V6 App import { BrowserRouter, Route, Routes } from "react-router-do..

이 글은 아래의 글을 읽고 이해한 바를 정리하는 목적으로 작성된 글입니다. [번역] useEffect 완벽가이드 모든 랜더링은 고유의 이펙트를 가진다. useEffect 안에서 이펙트는 어떻게 최신화된 상태를 읽어들일까? count라는 상태가 있을 때 count는 특별한 값이 아닌 특정 컴포넌트 랜더링에 포함되는 상수이다. 만약 어떤 이벤트핸들러가 count를 참조한다면 이벤트핸들러는 그 랜더링에 속한 count상태를 본다. count는 특정 랜더링에 속하는 변수이기 때문이다. 이펙트에서도 마찬가지이다. 각각의 이펙트 함수는 랜더링마다 별도로 존재하며, 해당 이펙트는 매번 랜더링에 속한 count 값을 본다. 따라서 이펙트 함수는 겉으론 같지만 사실 매 랜더링 마다 다른 함수이다. 각각의 이펙트함수는 그..

프로젝트를 진행하면서 useEffect에 대한 개념적인 정리가 필요하다고 느꼈다. 그러던 중 Dan Abramov가 작성한 'A Complete Guide to useEffect'를 번역한 글을 찾았고 프로젝트가 끝나면 정독해보자고 다짐했다. [번역] useEffect 완벽 가이드 오늘부터 조금씩이라도 꼼꼼이 읽어보면서 정리하고자 한다. useEffect를 완전히 이해하기 위해서는, useEffect 훅을 클래스 컴포넌트의 라이프 사이클이라는 익숙한 프리즘을 통해 바라보는 것을 그만둬야 한다. 모든 랜더링은 고유의 Props와 state를 가진다. function Counter() { const [count, setCount] = useState(0); return ( You clicked..

프로젝트 중에 커밋을 잘못해서 되돌리느라 git reset을 사용한 적이 있다. 사용하면서 어떤 방식으로 커밋을 되돌리는지 궁금했었는데 오늘에서야 찾아봤다. Git git workFlow Git의 주목적은 프로젝트의 스냅샷을 지속적으로 저장하는 것이다. git init명령어를 실행하면 Git 저장소가 생성된다. 이 시점에는 워킹 디렉토리에만 데이터가 있다. git add 명령어를 실행하면 워킹디렉토리의 내용을 Index로 복사한다. (인덱스에 파일 상태를 기록하는 것을 Staging이라고 부르기 때문에, 인덱스는 Staging Area 라고도 부른다. ) git commit명령어를 실행하면 Index의 내용을 스냅샷(HEAD)으로 영구히 저장하고 그 스냅샷을 가리키는 커밋 객체를 만든다. 그리고는 mas..