반응형 분류 전체보기16 [React]상태관리는 불변성이 아니라 메모리 참조랑 관련있는 거임 React에서 상태 업데이트를 감지하는 문제는 실제로 메모리 참조와 관련이 있습니다. "불변성"이라는 용어는 이러한 참조 기반 감지 메커니즘을 효과적으로 활용하기 위해 상태를 관리하는 방법론에 더 가깝습니다. 메모리 참조의 중요성 React는 상태의 메모리 참조가 변경되었는지를 기반으로 상태가 변경되었는지를 판단합니다. 즉, 상태 값, 객체나 배열의 메모리 주소가 변경되면, React는 새로운 상태로 간주하고 컴포넌트를 재렌더링합니다. .push 같은 메서드를 사용하여 배열을 수정할 경우, 배열의 메모리 주소(참조)는 변경되지 않습니다. 따라서 React는 상태가 변경되었다고 인식하지 못합니다. 반면, spread 연산자 (...)를 사용하여 새로운 배열을 생성하면, 새로운 메모리 주소를 가진 객체가 생.. 2024. 1. 9. [React]React Query와 SWR 맛보기로 강력하고 심플한 코드 바로 적용하고 중복줄이기 React Query와 SWR의 특징을 코드를 통해 구체적으로 비교해보겠습니다. eact Query: 복잡한 캐싱 및 데이터 동기화 React Query는 세밀한 캐싱 제어와 데이터 동기화를 위한 다양한 설정을 제공합니다. import { useQuery, useMutation, useQueryClient } from 'react-query'; // 캐시 시간과 재요청 설정 const { data: todos } = useQuery('todos', fetchTodos, { staleTime: 2000, // 2초 동안 데이터를 신선(fresh)으로 간주 cacheTime: 5000, // 캐시에서 데이터가 유지되는 시간 refetchOnWindowFocus: true // 윈도우 포커스 시 재요청 });.. 2024. 1. 7. [WSL]WSL로 도커 사용해서 성능 높이기 현재 윈도우 사용자시라면 WSL version 2 설치 후 docker desktop 설치하시면 wsl이랑 통합되서 자동으로 wsl에서 도커 사용가능 합니다. 따라서 직접 wsl에 도커 설치하지 않고 window에 docker desktop 설치하시면 됩니다. (docker desktop을 사용해서 wsl에서 도커를 실행할 때 메모리 누수가 발생하면 직접 wsl에 도커 설치해서 사용학세요. docker compose 명령어가 안될 수도 있지만 docker-compose로 대신 사용하면 됩니다.) 1. WSL 업데이트: WSL을 최신 상태로 업데이트하고, WSL 2를 사용하고 있는지 확인하세요. 더보기 WSL(Windows Subsystem for Linux)이 버전 2인지 확인하는 방법은 간단합니다. 다.. 2023. 12. 24. [WSL/Github] WSL에 git clone하기 위 github랑 WSL연결하는 법 WSL (Windows Subsystem for Linux)을 GitHub에 연결하는 과정은 몇 가지 기본 단계를 포함합니다. 이 과정은 기본적으로 GitHub 계정을 가지고 있고 WSL 환경에 접근할 수 있다고 가정합니다. 1. Git 설치되어있는 지 확인: WSL 터미널에서 다음 명령어를 이용해서 버전이 표시된다면 4단계를 생략하세요. git --version 2. Git 설치: WSL에서 Git이 설치되어 있지 않다면 설치하세요. 대부분의 Linux 배포판에서는 다음 명령어로 설치할 수 있습니다. sudo apt update sudo apt install git 더보기 apt를 사용하여 Linux 시스템에 Git 또는 기타 소프트웨어를 설치할 때는 먼저 sudo apt 업데이트를 실행하는 것이 중요.. 2023. 12. 24. [Chocolatey] 윈도우에서도 리눅스처럼 섹시하고 강력하 소프트웨어 설치하는 법 Chocolatey는 Windows 운영 체제용 패키지 관리자로, 소프트웨어의 설치, 업데이트, 관리를 자동화하는 도구입니다. 이러한 패키지 관리자는 리눅스 배포판에서 오랫동안 사용되어 왔으며, Chocolatey는 이러한 개념을 Windows에 가져옵니다. Chocolatey의 특징 자동화된 설치 및 관리: 소프트웨어 설치, 업데이트, 제거가 명령 줄을 통해 간단하고 자동화된 방식으로 이루어집니다. ( 치 마법사, 설정 옵션, 라이센스 동의 등과 같은 전통적인 소프트웨어 설치 단계를 거치지 않습니다. Chocolatey는 이 모든 과정을 자동으로 처리합니다.) 광범위한 패키지 저장소: 다양한 소프트웨어 패키지가 Chocolatey의 공식 저장소에서 제공되며, 커뮤니티에 의해 유지 관리됩니다. 스크립트를.. 2023. 12. 23. [React]상태 변경 헷갈리는 비동기 처리 종결 리엑트에서 setState는 호출될 때(코드에서 읽힐 때) 바로 state를 변경하지 않음. 모든 setState를 특정 시점에서 한번에 처리하도록 큐에 저장시켜 놈. 특정 시점에서 큐에 저장된 모든 setState를 실행시킴. setState는 호출 시점에서 state를 가지고 업데이트하기 때문에 같은 state를 업데이트 시키는 setState는 마지막만 의미가 있음. 이걸 일괄 처리, batch라고 함. ex) const [state, setState] = useState(0); setState(state + 1); setState(state + 1); setState(state + 1); //result: state = 1 그런데 setState( prev => prev + 1) 이런 식으로 함수.. 2023. 12. 23. 이전 1 2 3 다음 반응형
