😯@tanstack/react-query를 사용하는 이유 리액트쿼리는 강력한 데이터페칭도구입니다. 비동기 상태 관리를 도와주고 로딩, 에러처리, 리페칭, 캐싱 등 개발자가 생각하기 귀찮은 문제들을 대신 해결해주며 개발자는 무엇을 할것인지에 더 초점을 맞출 수 있도록 도와주는 라이브러리입니다. 비슷한 역할을 하는 라이브러리로 ReduxToolkit이 제공하는 RTK Query가 있습니다. RTK Query에 대한 사용법이 궁금하신 분들은 아래 링크를 참고하세요 https://xionwcfm.tistory.com/279 예제와 함께 TS ReduxToolkit Query Slow start ReduxToolkit Query에 대해서 잘 정리된 문서 / 영상을 찾아보기가 굉장히 힘들었고 특히 한국어로 되어있는..
😉forwardRef는 무엇? https://react.dev/reference/react/forwardRef 공식문서에서 forwardRef를 찾아볼 수는 있지만 아마 리액트를 가볍게 사용법만 익히신 분들은 낯선 함수일것이라고 생각합니다. forwardRef는 참조를 사용하여 부모 컴포넌트에 DOM 노드를 노출시키는 함수입니다. 조금 다르게 이야기하면 forwardRef는 부모컴포넌트가 자식컴포넌트에게 Ref를 전달해야할 때 사용하는 함수입니다. const SomeComponent = forwardRef(render) 따라서 이 forwardRef를 이해하기 위해서는 Ref에 대한 선수지식이 필요합니다. 😙Ref는 뭔가요? Ref는 createRef, useref 두가지의 방법으로 생성할 수 있습니다...
😍createPortal은..? https://react.dev/reference/react-dom/createPortal createPortal – React The library for web and native user interfaces react.dev 공식문서를 참고할 수 있습니다. createPortal은 일부 자식들을 DOM의 다른 부분으로 렌더링할 수 있는 기능을 제공합니다. 편의상 vite, cra 등 보일러플레이트를 사용해 리액트 프로젝트를 구성했다고 가정하고 진행하겠습니다. 리액트로 구성한 프로젝트는 기본적으로 보통 index.jsx 혹은 main.jsx 와 같은 엔트리포인트에서 위와 같이 렌더를 시켜줍니다. import ReactDOM from 'react-dom/client'; ..
🐕 코드 스플리팅 리액트 프로젝트를 완성하여 사용자에게 제공할 때에는 빌드 작업을 거쳐 배포해야 합니다. 빌드 작업을 통해 자바스크립트 파일 안에서 불필요한 주석, 공백 등을 제거하여 파일크기를 최소화하기도 하고 브라우저에서 JSX 문법이나 최신 자바스크립트 문법이 원활하게 실행될 수 있도록 코드의 트랜스파일 작업도 같이 수행하곤 합니다. 만약 프로젝트내에 이미지와 같은 정적 파일이 있다면 해당 파일을 위한 경로도 설정하고요! 이러한 작업은 Create React-app에서는 웹팩이 담당합니다. 웹팩에서 별도의 설정을 해주지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 팡리은 하나의 파일로 합쳐지고 모든 CSS 파일도 하나의 파일로 합쳐지게 됩니다. CRA로 프로젝트를 빌드하는 경우 최소 두개 이상의..
🐕 깊은 복사 구현하기 개 귀찮다. 리액트는 불변성을 유지해줘야 함과 동시에 객체의 중첩구조가 쉽게 만들어지는 모순을 갖고있습니다. 간편하게 쓸 수 있는 애들은 죄다 shallow copy이기 때문에 깊은 중첩 구조를 가진 애들에게는 얕은 복사를 여러번 해야하는 수고로움이 있어요 따라서 깊은 복사로 한번에 불변성을 유지해주면 참 편할 것입니다. const object = { somewhere: { deep: { inside: 3, array: [1, 2, 3, 4], }, }, }; 이따구로 된 중첩구조에서 하나하나 스프레드 연산자 다 넣어주면 어지럽겠다 그죠 https://xionwcfm.tistory.com/189 getter,setter까지 복사하는 deep copy를 구현하자 😎Shallow co..
🐕 React Router는... SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지는 않아요 전 라우터라고 해서 네트워크 공부할 때 나오는 라우터만 생각했는데 그냥 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다"라는 의미로 라우팅이라고 한다 하네요.. 리액트에서는 라우팅을 위해(주소에 따라 다른 화면을 보여주기 위해) React Router라는 라이브러리를 많이 사용합니다. 👻React Router의 주요 컴포넌트 React Rounter의 주요컴포넌트는 크게 세가지로 나눌 수 있어용 종류는 저 네가지인데 용도로 나눠서 보면 이렇습니다. router route matchers route changers 라우터 역할을 해줄 BrowserRouter 얘는 웹 애플리..
🐕 react-virtualized yarn add react-virtualized 전 yarn을 쓰고 있으니까 yarn add 명령어를 이용해 추가해주겠읍니다. 이 react-virtualized는 뭐하는 애냐면... 아직 보이지 않는 요소들은 스크롤 되기 전에 렌더링 하지 않고 크기만 차지하게 끔 만들어 줄 수 있다. 그리고 스크롤되면 자연스럽게 렌더링을 시킨다. 정말 좋네요... 이게 뭐 지연평간가 뭔가 하는 녀석이냐?(아닐수도) 👻최적화를 준비하자 얘를 제대로 써주려면 실제 요소들의 크기를 px단위로 알아내야한다고합니다. 개발자툴로 측정하면 뚝딱 어라...근데 선생님 선생님은 왜 480x24 에 패딩 16인데 전 463인거죠? 하하 아무튼 시키는대로 짜겠습니다. 🥶 TodoList.js 수정하기 ..
🐕 Context API contextAPI는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을때 유용한 기능이라고합니다. 그리고 이 기능은 리덕스 ,리액트 라우터, styled-components 등의 라이브러리에서도 사용한다고하네요 https://ko.reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces ko.reactjs.org 공식 문서의 설명은 다음 링크에서 확인할 수 있습니다. 전 간략히 요약만 해드리겠습니다. 1. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터 제공가능 마치 확성기 같다. 위치에 상관없이 props로 넘겨주..
