리액트 (47) 썸네일형 리스트형 [react] 리액트에서 상태에 대한 정리(2) - 객체 - 리액트 공식문서를 읽고 이해한 부분을 정리한 포스트 입니다. - 리액트에서 객체의 상태는 읽기 전용으로 취급해야 한다. 리액트에서는 상태(state) 는 불변해야 한다. 이는 리액트의 최적화 전략과 관련된다. 리액트는 이전 프로퍼티나 상태가 다음 프로퍼티나 상태와 동일한 경우에는 작업을 건너뛰는 방식을 채택한다. 이는 리액트의 가상돔 방식과도 이어지는 것으로 리액트는 변경 이전의 값과 변경 이후의 값이 일치하지 않으면 업데이트를 실행하고, 그게 아니라면 업데이트를 건너 뛴다. 이는 객체를 취급할 때도 마찬가지다. 예를 들어, 다음 코드가 있다고 가정 해보자 import { useState } from 'react'; export default function MovingDot() { const [po.. [react] 리액트에서 상태에 대한 정리(1) - 상태 - 본인이 이해한 react의 state에 대하여 정리한 글 입니다. - 리액트에서 상태(state)와 상태관리(state management) 리액트에서 상태란 컴포넌트 별로 기억해야하는 데이터이다. 이 데이터는 이미지도 될 수 있고, 고객이 장바구니에 담아둔 물품정보 일수도 있다. 즉, 리액트에서 상태관리란 이러한 데이터를 효율적으로 관리하는 것이라 이해할 수 있다. 컴포넌트 간에 데이터를 전달하는 방법과 업데이트하는 방식을 간소화하고, 어플리케이션의 상태를 일관성있게 유지하는 모든 것이 상태관리라고 볼 수 있다. 리액트에서 상태는 스냅샷으로 관리된다. 앞서 정리한 상태를 다시 정리해보면 상태는 스냅샷으로 관리된다. 풀어서 설명하자면, 상태는 카메라로 찍은 사진처럼 보관(-> 리액트의 특정한 메모리 .. [react] window.scroll 를 이용한 무한 스크롤 구현 시 문제되는 코드를 개선한 내용을 저장한 포스트 리팩토링 전 간략하게 정리해보면, 리팩토링 전의 코드는 스크롤 이후 추가적으로 불러오는 데이터를 카운트할 때 부모 컴포넌트로 부터 props 를 전달받아와서 사용했고, 이를 JSX 내에서 slice 를 활용해 중복으로 데이터를 불러오도록 하고 있다. 누가 봐도 전체적으로 성능 문제를 일으킬 수 있고, props 로 전달받은 데이터가 변동될 때 마다 컴포넌트가 전체적으로 리렌더링되는 등 문제가 많은 코드로 작성되어 있다. 그리고 아래 코드에서는 나오지 않았지만, 부모 컴포넌트에서 window.scroll 를 이용해 모든 자식 컴포넌트에서 불필요한 이벤트 호출이 발생하고 있다. 그리고 데이터가 추가적으로 로딩이 되는 경우 사용자는 데이터가 로딩되고 있는지 확인이 불가능했다. 아래 코드를 처음 작성했을 때는 .. [React Error] Error: [Immer] An immer producer returned a new value ... 을 해결하려면 발생 상황 개인 프로젝트 작업을 하던 중 Redux-toolkit 을 사용하여 axios.then 내부에서 dispatch 함수에 상태를 업데이트하는 레듀서 함수를 호출할 때 발생하였다. 발생 원인 리덕스의 레듀서는 내부적으로 불변성을 유지하기위해 immer 라이브러리를 사용한다. 다시 말해, 기존값을 수정하여 새로운 값을 반환(return)하는 변이성을 방지하는 역할을 수행한다. 즉, return 을 허용하지 않는다. 그러나 , 사용자의 실수로 추상화된 immer 라이브러리의 이러한 return 배제에 관한 규칙을 깨버리게 된다면(즉, 기존값을 건드려서 새로운 값을 반환하는 경우), 이에 대한 경고로서 에러를 띄우는데 그것이 아래의 메시지 이다. [React Error] Error: [Immer] An.. [리액트 npm error] CRA 환경에서 nth-check 취약점 문제 어느 순간 갑자기 nth-check 와 관련한 취약성 문제가 발생하여 이에 대한 정보들을 찾아보았고, 간략하게 정리하고 넘어간다. 참고로 이 문제를 해결하기 위해 npm adult fix --force 를 입력하게 되면 80개 이상의 새로운 취약점을 만나게 되는 마술을 보게 될지도 모른다. 근데, 굳이 이렇게 고칠 필요가 없다. 애초에 고칠 필요가 없으며, 고치는 것이 잘못된 행동이다. 왜 그런 것인지는 아래에 관련 자료를 링크해 두었다. 에러 코드 nth-check [리액트] 개인 코드 정리(리덕스 툴킷 타입스크립트 설정) useSelector 와 useDispatch 를 대신하여 사용할 hook을 지정 // app/store.ts import { configureStore } from '@reduxjs/toolkit' import searchSlice from './slice/searchSlice' /* 스토어 생성 */ const store = configureStore({ reducer: { search: searchSlice.reducer } }) // store의 getState는 각 레듀서가 반환하는 state 값을 담고 있다. // 해당 반환값을 typeof 로 검사하여 반환된 타입으로 // 반환되는 state의 타입을 동적으로 결정한다. export type RootState = ReturnType // 추론.. [React] 리액트에서 카카오 맵 불러오기 (with kakao map) 내용은 나중에 다시 정리하더라도, 일단은 스니펫 으로 크게 남겨 둡니다. 제가 공부하면서 적어두는 것이라 좀 지저분 합니다. 혹시나 참고하는 분 있다면 이 점 고려해서 보시길 바랍니다. 관련 문제나 사용법 등에 설명하는 글들은 정말 많지만, 이 내용을 기록해두는 목적은 kakao 가 정의되지 않았다 에러, LatLng 이 생성자 함수가 아니다 라는 둥의 에러가 떴을 때 나에게 맞는 명확한 방법이 없었기 때문이다. 혹여나 이 글을 보는 유사한 고민을 가진 분이 있다면 바로 해결 하길 바라며 남겨본다. // /*global kakao*/: 이 주석은 전역적으로 사용되는 변수 kakao를 선언한 것 // 이렇게 선언하면 ESLint와 같은 코드 검사 도구에서 해당 변수를 선언하지 않은 것으로 // 인식하는 오.. [react] 리액트에서 카카오 맵 사용하기( with ReactKakaoMapSDK) 이 방식의 단점은 document.write 를 사용하고 있고, 크로스 사이트 문제로 인해 sdk 스크립트 사용이 불안정하다는 점이 있다. Hello from react-kakao-maps-sdk docs | react-kakao-maps-sdk docs Description will go into a meta tag in react-kakao-maps-sdk.jaeseokim.dev ReactKakaoMapSDK 란? kakao map 을 리액트 환경에 맞게 컴포넌트화 시킨 것이라 보면 된다. 국내 개발자가 만든 것으로 보이고, 카카오 맵의 경우 타입 정의를 지원하지 않는데, 이에 대한 타입 정의를 만들어서 제공하고 있는 점이 눈에 띈다. 단, 아직 미완성이라서 모든 타입을 다 지원해주는 것은 아니다... 이전 1 2 3 4 5 6 다음
