React Context API (with Typescript) Context API를 타입스크립트와 함께 사용하려면 어떻게 해야할까. 렌더링 최적화를 위해 여러 개의 Context를 묶어 사용하고, 상태 끌어올리기로 children으로 넘겨받을 하위 요소들에 대한 타입 정의가 필요했다. AppProvider App컴포넌트에서 ...

React Context API 사용하다보니 메모 Context를 사용하다보면 하나의 상태값을 여러 컴포넌트에서 사용하기 때문에, 상태값을 사용하고 있는 여러 컴포넌트에서 불필요한 리렌더가 발생할 수 있다고 한다. 예를 들어, example이라는 값을 const {example} = useContext(ExampleContext)로 두 ...

React 리액트 쿼리 다시 배우기 (1)</br> 참고자료 React-Query 리덕스에서 리액트 쿼리를 리팩토링하며 쿼리로 받아온 데이터를 재사용해야 되는 경우가 생겼다. 쿼리로 받아온 데이터는 캐시된 데이터로 별도의 재요청 없이도 데이터를 사용할 수 있는 건 알지만, 내가 원하는 건 A라는 데이터에서 B라는 데이터로 갔다...

React Context API 공식문서 props drilling을 피하고 상태를 전달하기 위해서 사용한다. 문서에 나와있듯이 꼭 context 를 사용하기보다 컴포넌트 합성을 통해 해결하는 것이 더 좋은 방법일 수 있다. Context API를 사용하면 컴포넌트 재사용성이 떨어지기에 주의해야 한다는 설명도 있다 props로 ...

React 이전에 짧게나마 리액트 쿼리를 정리한 글이 있다. 급하게 사용해야 했기에 겉핥기 식으로 나마 사용했었고, 데이터 캐싱이 필요해져 쿼리를 쓸 상황이 왔고 다시 찾아보게 되었다. 저번에 사용할 때도 급하게 배운만큼 깊이 있게 배우지 못했다는 생각이 들어 커스텀훅과 리액트 쿼리의 여러 옵션들을 찾아보다, 여태 블로그 글만 들여다봤던...

React TypeScript 어질어질 DOM 건들이기 넣고 싶은 기능이 있었다. 마크다운으로 작성된 코드 중 실질적으로 작성된 코드(```)를 쉽게 복사, 붙여넣기 하고 싶었다. 앞서 55장에서 만들었던 Viewer를 건들여보기로 했다. 내가 원하는 것은 렌더링 될 때, 코드가 작성된 부분을 유동적으로 인식하고, 바로 위에 아이...

React TypeScript 리액트와 타입스크립트를 함께 사용하다보면 이벤트 타입을 정의해줘야 하는 순간이 온다. 사실 타입스크립트를 사용하다 보면 생각보다 타입 지정을 요구하는 경우가 드물다는 것을 느낀다. 하지만 요소에서 발생하는 이벤트를 다루려면 높은 확률로 타입을 지정해줘야 한다. 기존에는 필요할 때마다 input, but...

React Toast Ui toast ui 공식 문서를 보면 여러가지 옵션값과 플러그인을 갖고 있는 것을 확인할 수 있다. Github Examples 리액트 18버전과는 호환되지 않는다는 단점이 있지만, 여러가지 플러...

Next Editor 기존에 사용했던 에디터에 대해 몰랐던 부분을 끄적여보기 Next.js에서 에디터를 사용할 때, dynamic(...)이라는 코드를 사용했었다. 돌아다니는 코드를 쉽게 긁어왔고, dynamic에 대해서 동적으로 자바스크립트 모듈을 가져와서 사용하고, 성능 개선 등에 관한 내용만 간단하게 훑어보고 사용해왔는데, 추가적...

React Editor 서버에 데이터를 전송할 에디터를 만들어보려고 한다. 기존에 사용하던 draft.js를 만들어 놓은 게 있지만, 이번 미니 프로젝트에서는 마크다운 형식의 게시글을 보여주고, 주로 마크다운 형식의 코드를 사용하기에는 적절하지 않았다. 주로 사용되는 에디터에는 대표적으로 draft.js , toast ui, quill...