React useMemo의 리렌더링에 대한 정보들을 들여다보다가, 아직 리액트의 기본적인 특성들을 깊이 이해하지 못 했다는 생각이 들어 작성해보는 글이다. rendering 리액트에서 렌더링이란, 리액트를 설치하면 볼 수 있는 ReactDOM.render() 함수가 그것이다. 또한, 초기에 컴포넌트의 정보를 토대로 화면이 어떻게 ...

React useMemo, useCallback 컴포넌트의 성능을 최적화하기 위해 사용되는 훅이다. 리액트에서 렌더링 => 함수 호출 => 변수 초기화의 과정에서 불필요한 리렌더링을 최소화시켜 원래 있던 값이나 함수를 재사용하여 성능을 높이기 위해 사용한다. useMemo useMemo는 동일한 계산을 반복해야 할 때...

JavaScript 변수와 호이스팅 변수에는 var, let, const 세 가지가 있다. 호이스팅은 선언된 변수가 최상위에 선언된 것처럼 행동하는 것을 말한다. var name; console.log(name); //undefined name = "Mike"; let name; console.log(name); //Reference...

TypeScript Input 이벤트 useState를 이용해 우리가 입력한 값을 기억하고 바꿔주고 싶을 때, 입력이 발생하는 onChange의 event.target.value에 대한 값에 대한 타입 지정이다. input에 이벤트가 발생하는 타입은 HTMLInputElement이다. const [example, setExample] ...

JavaScript Object 객체 key와 value로 구성되어 여러 개의 속성을 가질 수 있는 것을 말한다. key가 갖고 있는 값에 접근하려면 두 가지 방법으로 접근할 수 있다. const data = { sample: "this is a sample", }; data.sample; // this is a sample da...

JavaScript 자료형 typeof null은 Object 객체형으로 표현된다. null은 객체가 아니지만 자바스크립트의 초기 버전의 오류로 하위 호환성을 위해 수정되고 있지 않다. alert, prompt, confirm alert 사용자에게 확인창을 보여준다. alert("링크로 이동합니다") 추가적인...

Next.js msw mock data를 사용하기 위해 msw를 설치한다. Mock Service Worker 라이브러리로, 백엔드 API인척 하는 가짜 데이터를 응답해주는 라이브러리다. 백엔드 API 개발과 프론트엔드 개발이 동시에 진행되는 경우 임시로 사용하기 위한 가짜 데이터로 활용하기 쉽다. 모킹이 네트워크에서 일어나기 때문...

Next.js 렌더링 오류 새로운 사이드 프로젝트를 만들어보려고 next.js를 설치했다. styled-components를 설치하였는데, Cannot read properties of null (reading 'edgesOut') 에러가 발생했다. 해결법을 찾아보던 중 styled-components의 최신 버전을 설치하면 해결된다고...

Next.js useForm 간편한 form을 구현하기 위해 React-Hook-Form 라이브러리를 사용했다. npm i react-hook-form을 사용하여 라이브러리를 설치한다. useForm은 여러가지 속성이 있다. register : 상태를 변경하기 위한 함수이다. <input {...register...

Next.js API 상태관리 서버 관련 상태 관리는 쿼리를 사용했다. pagination 구현하기 위해 useInfiniteQuery를 사용했고(데이터 캐싱),pagination 버튼에게 setPage를 props로 넘겨 page의 숫자가 바뀔 때마다 그에 해당하는 데이터를 받아오도록 했다. const page_limit = 10;...