React

가상 DOM은 말 그대로 가상의 DOM이다.브라우저가 화면을 그리는데 필요한 모든 정보가 포함된 실제 DOM에 비해 가볍다.리액트는 SPA이고 DOM이 동적으로 자주 변경되게 되는데,무거운 실제 DOM 대신 가벼운 가상 DOM을 이용하여 계산을 한 후, 변경이 필요한

styled-components 라이브러리를 사용하면 JS 안에 CSS를 작성할 수 있다.

리액트의 아이콘과 타이틀은 public 폴더 안의 index.html에 정의되어 있다.

컴포넌트 내에서 변경 가능한 값이 필요하며 그 값의 변화에 따라 리렌더링될 때 사용하는 훅컴포넌트의 생애 주기 또는 데이터의 생애 주기에 따라 특정 코드를 실행시키고 싶을 때 사용하는 훅useEffect: 화면이 실제로 업데이트 된 이후에 비동기적으로 실행이 되는 특징

다음과 같이 state를 바꾸는 경우, count는 총 3번 증가했지만 마지막 하나만 실행된다. 왜일까ㅏㅏ?? 성능을 위해서이다. 불필요한 렌더링을 방지하고 렌더링을 최적화하기 위해서 React는 state 변경사항을 모아서 한꺼번해 처리하는 방법을 채택하고 있다.

useRef 사용하는 이유 저장 공간 DOM 선택 저장 공간 > 🙋‍♂️ 화면에 보여줄 필요가 없는 변수는 그냥 일반 변수로 써도 되지 않나요?? 일반 변수를 쓰는 경우, state 변화로 인한 리렌더링 시 변수 값이 초기화 된다. 변수가 13에서 렌더링된 후 1

전역 상태 관리 방법 Props Drilling 라이브러리 Context API : React 내장 함수 단점 복잡해서 러닝커브 간단한 상태관리라도 처음에 작성해야 할 코드의 양이 많다. (뭘 잔뜩 만들어야 함) 단점 극복 -> Recoil, Zustand: 복잡함

Redux Tool Kit이다.Redux는 복잡하고, 귀찮은 준비 코드를 많이 작성해야 한다는 단점이 있다.RTK는 그 단점들을 그것을 해소할 수 있는 라이브러리이다.toolkit은 reducer 대신 slice를 만든다.slice에서는 action, action cr

redux의 boilerplate 코드를 줄이기 위해서 사용한다redux에 비해 쵸오오오-----------간단!해진 것을 확인할 수 있다.zustand와 immer.js이때, isLoggedIn: true까지만 써주고, 객체의 isLoggedIn, logOut에 관련

https://velog.io/@2hanbyeol1/Recoil

Redux 등을 사용한 기존의 전역적 비동기 상태 관리(서버 상태 관리)의 어려움, 복잡함을 극복하고자 등장Redux는 비동기 통신 상태에 따른 작업을 위해서 pending 액션, success 액션 등을 전부 만들어줘야 한다.서버 상태 관리란서버에 저장된 데이터들과의

가상 DOM은 실제 DOM의 내용과 완전히 동일한데, 객체 형태로 메모리에 저장되고 최적의 알고리즘을 사용하기 때문에 실제 DOM 조작보다 훨씬 더 빠르다.