본문 바로가기

반응형

분류 전체보기

(399)
[javascript] reversed, toReversed | 배열의 순서를 뒤짚는 메서드 자바스크립트에는 배열의 순서를 뒤짚는 메소드로 두 가지를 지원한다. reversed 와 toReversed 이다. 이들 각각은 모두 배열의 순서를 뒤짚는 것은 동일하지만, reversed 는 원본 배열을 파괴한다. 그러나 toReversed 는 원본 배열은 그대로 두고, 복사본을 반전시켜 새로운 배열로 반환하는 점에서 차이가 있다. 이를 각각 살펴 보자. Array.Prototype.reversed() 배열 a 가 있을 때, reversed( ) 를 사용하면 원본 배열 자체를 변형시킨 결과를 반환한다( 파괴적 메소드). const a = [1, 2, 3]; console.log(a); // [1, 2, 3] a.reverse(); console.log(a); // [3, 2, 1] reversed 는 희..
[react ] Jotai, Recoil, Zustand, Valtio | Jotai (1) Jotai Jotai는 원자(atom) 단위로 전역 React 상태 관리를 수행하는 라이브러리이다. 즉, 상태를 작은 단위인 atom으로 분리하여 관리하고, 렌더링은 자동으로 최적화된다. 쉽게 말해서, 의존 관계에 놓여 있지 않은 atom(원자) 간에는 서로 영향을 미치지 않는다는 것을 의미한다. 예를 들어, A라는 원자 변하더라도, B라는 원자는 아무런 영향을 받지 않는다. 이는 React 컨텍스트의 불필요한 리렌더링 문제를 해결하고, 메모이제이션 필요성을 없애며, 선언적 프로그래밍 모델을 유지하면서 시그널과 유사한 개발자 경험을 제공한다. 여기서, 선언적이란 알고리즘을 통해 얻은 결과는 이거야 라고 선언하는 것과 같다. 즉, 결과를 얻기 위해 알고리즘이 어떻게 구현되어야 하는지를 일일이 명시하는 명령..
[React.v18 ] useTransition 과 논블로킹 useTransition useTransition 은 리액트 18 버전 이상에서 새롭게 등장한 훅으로, 논블로킹을 구현한 훅이다. 논블로킹이란 어떤 스레드의 실패 또는 중단이 다른 스레드의 실패 또는 중단을 유발하지 않도록 작업에 대한 요청은 순서대로 받아들이지만, 처리는 우선순위가 높게 책정된 즉, 우선 완료된 스레드 부터 이루어지도록 하는 것을 의미한다. 쉽게 말해, 논블로킹은 기존 작업의 실행이 후에 들어오는 작업의 실행을 막지 않는다. 반면에 블로킹은 이전 작업의 실행이 이후에 들어오는 작업의 실행을 막는다. 즉, 특정 스레드가 아무리 오래 걸린다고 하더라도, 다음 스레드의 작업이 먼저 끝난다면 다음 스레드의 작업 부터 우선 처리해주므로, 사용자가 오래 걸리는 작업을 하던 도중에도 다른 작업을 즉..
[javascript] async ~ await 에 대한 정리 async ~ await 란? async 함수는 항상 Promise를 반환하고, await 키워드는 비동기 작업이 완료될 때까지 기다린다. 특히 AJAX 호출, 파일 읽기/쓰기, 타이머 함수 등과 같이 비동기적으로 처리해야 하는 작업이 있는 경우 유용하게 활용할 수 있다. 다르게 말하면, async 는 비동기를 의미하며, await 은 비동기 처리에 대한 Promise 를 반환받기 전 까지 다음 코드 실행을 대기토록 하는 키워드 이다. 이는 내부적으로 Promise 를 추상화하였기 때문에 promise.then 으로 일일이 접근할 필요 없이 준비된 데이터를 즉시 반환받을 수 있다. promise 는 비동기적 데이터를 가져올 때, 이 데이터를 정상적으로 사용하려면 .then() 메소드에 접근 후 콜백함수의..
[javascript] reduce 메서드의 다양한 활용 reduce 를 활용하면, 정말 복잡한 계산도 편리하게 처리할 수 있다. 오늘은 이 메서드를 이용해서 간단하게 활용할 수 있는 예시를 정리해볼 것이다. 평균 계산 reduce 의 가장 편리한 점 중 하나는 누적값을 반환하는 변수가 내장되어 있다는 점이다. 이를 활용하면 조건에 일치하는 지점에서 평균을 쉽게 구할 수 있다. const numbers = [10, 20, 30, 40, 50]; const average = numbers.reduce((acc, current, index, array) => { acc += current; if (index === array.length - 1) { return acc / array.length; } else { return acc; } }, 0); console..
[react] 리액트에서 key 의 용도와 중요성 - 리액트 공식문서 기반으로 이해한 내용을 정리한 포스트 입니다. - key 속성은 React에서 동적으로 생성되는 엘리먼트 목록을 렌더링할 때 사용되는 중요한 속성이다. 여기서 몇 가지 주요 용도를 살펴보자. 유일성 보장 React에서는 동적으로 생성되는 엘리먼트에 `key` 속성을 제공해야 한다. 이는 React가 각 엘리먼트의 유일성을 보장하고, 어떤 엘리먼트가 추가, 수정, 또는 삭제되었는지 정확히 파악할 수 있게 해준다. 재사용 가능한 상태 유지 `key`는 리액트가 어떤 컴포넌트를 다시 렌더링해야 하는지 식별하는 데에도 사용된다. 키가 변경되면 리액트는 해당 키에 해당하는 컴포넌트를 다시 만들고 상태를 유지한다. 성능 최적화 효율적인 업데이트와 재렌더링을 위해 key가 필요하다. 예를 들어 배..
[react] 리액트에서 상태에 대한 정리(3) - 배열 - 리액트 공식 문서 기반으로 이해한 내용을 정리한 포스트 입니다. - 리액트에서 배열의 상태 또한 읽기 전용으로 취급한다. 자바스크립트에서 배열은 직접 변경이 가능하지만, 리액트에서 state 로 취급될 때에는 변경이 불가능한 것으로 취급해야 한다. 즉, 객체와 마찬가지로 상태의 복사본을 만든 후 , 새 배열이 기존 상태를 대체하도록 해야한다. 예를 들어, array[1] = 5 와 같이 배열의 요소에 값을 직접 변경하거나, push(), pop(), splice() 와 같이 원본 배열의 상태를 직접적으로 변경하는 일체의 행위는 리액트에서는 불가능한 것으로 취급해야 한다. 이는 반대로, map(), slice(), filter() 와 같이 원본 배열의 상태를 변경시키지 않고, 새로운 배열을 생성하는 메..
[react] 리액트에서 상태에 대한 정리(2) - 객체 - 리액트 공식문서를 읽고 이해한 부분을 정리한 포스트 입니다. - 리액트에서 객체의 상태는 읽기 전용으로 취급해야 한다. 리액트에서는 상태(state) 는 불변해야 한다. 이는 리액트의 최적화 전략과 관련된다. 리액트는 이전 프로퍼티나 상태가 다음 프로퍼티나 상태와 동일한 경우에는 작업을 건너뛰는 방식을 채택한다. 이는 리액트의 가상돔 방식과도 이어지는 것으로 리액트는 변경 이전의 값과 변경 이후의 값이 일치하지 않으면 업데이트를 실행하고, 그게 아니라면 업데이트를 건너 뛴다. 이는 객체를 취급할 때도 마찬가지다. 예를 들어, 다음 코드가 있다고 가정 해보자 import { useState } from 'react'; export default function MovingDot() { const [po..

반응형