본문 바로가기

JS

 (9)
[Wijmo] Grid Format(f,g,n) 차이점 Wijmo는 그리드를 사용하는 경우, 숫자 데이터를 표시할 때 다양한 포맷팅 옵션을 사용할 수 있습니다. 특히 "f", "g", "n"와 같은 포맷 문자는 숫자의 형식을 지정하는 데 사용됩니다.  "f" (Fixed-point):고정 소수점 형식을 나타냅니다.기본적으로 소수점 이하의 자릿수를 지정할 수 있으며, 지정된 자릿수만큼 소수점 이하 숫자가 표시됩니다.예를 들어, format: 'f2'는 소수점 이하 두 자리까지 표시함을 의미합니다. 숫자 123.456은 123.46으로 표시됩니다."g" (General):일반 숫자 형식입니다.가능하면 소수점 이하의 숫자를 최소화하여 표시합니다.숫자가 작으면 고정 소수점 형식으로, 크면 지수 표기법(exponential notation)을 사용할 수 있습니다.예를..
[JS] 배열 안의 객체 중복 제거 [{id: 'xxx', name:'xxx'}, {id:'aaa', name:'aaa'}, {id:'xxx', name:'xxx'}]  형태의 객체가 있을 때 중복 제거하는 법 Set 객체 사용: Set 객체를 사용하여 중복을 제거할 수 있습니다. 이 방법은 객체의 특정 키를 기준으로 중복을 제거할 때 유용합니다. 아래 예제에서는 id를 기준으로 중복을 제거합니다.const arr = [ {id: 'xxx', name: 'xxx'}, {id: 'aaa', name: 'aaa'}, {id: 'xxx', name: 'xxx'}];const uniqueArr = Array.from(new Set(arr.map(item => item.id))) .map(id => { return arr.find(it..
[React] 최상위 컴포넌트에서 사용하는 함수에 return 사용이 안되는 이유 구조나 흐름을 생각 못하고 return을 사용하면 뭔가를 반환해준다라고만 생각하고 안일하게 썼던걸 반성하면서 백업React에서는 상위 컴포넌트가 하위 컴포넌트로 함수를 전달할 때, 하위 컴포넌트에서 해당 함수를 호출함으로써 상위 컴포넌트의 상태를 업데이트할 수 있습니다. 하지만 함수의 return 값을 통해 상위 컴포넌트에 값을 전달할 수는 없습니다. 그 이유는 React 컴포넌트 트리의 구조가 단방향 데이터 흐름을 따르기 때문입니다.단방향 데이터 흐름 원리React에서는 상위 컴포넌트가 하위 컴포넌트에 데이터를 props로 전달할 수 있지만, 반대로 하위 컴포넌트가 return을 통해 상위 컴포넌트에 데이터를 전달할 수는 없습니다. 하위 컴포넌트가 상위 컴포넌트에 데이터를 전달하려면 상위 컴포넌트에서 ..
[React] <React.Fragment> 용도 는 React에서 여러 요소를 그룹화하여 하나의 부모 요소처럼 사용하지만, DOM에는 추가적인 태그로 렌더링되지 않도록 해주는 래퍼 컴포넌트입니다. 다음은 의 용도와 장점입니다.1. 여러 요소를 감쌀 때 부모 요소 필요성 해결React에서는 컴포넌트가 여러 요소를 반환할 때 하나의 부모 요소로 감싸야 합니다. 를 사용하면 불필요한 같은 태그를 추가하지 않고 요소를 그룹화할 수 있습니다.// 를 사용한 경우function Component() { return ( Title Paragraph );}// 를 사용한 경우function Component() { return ( Title ..
[React] 기존 값은 유지하면서 특정 값만 바꾸려고 하는 경우(useState, produce) React에서 useState를 produce를 사용하여 특정 값만 변경하고 나머지 값은 유지하려면 produce를 사용하여 기존 상태를 복사하고 변경하려는 특정 필드만 업데이트할 수 있습니다. produce는 상태를 불변으로 유지하면서도 변경할 수 있게 해주는 Immer 라이브러리의 함수입니다.import { useState } from 'react';import produce from 'immer';function MyComponent() { const [state, setState] = useState({ name: 'Alice', age: 25, city: 'New York', }); const updateCity = (newCity) => { setState(produ..
[JS] 객체에 있는 값을 배열로 만드는 방법 JavaScript에서 객체의 값을 배열로 만드는 방법은 여러 가지가 있습니다. Object.values()나 Object.keys(), Object.entries() 등의 메서드를 활용할 수 있으며, 객체의 구조나 필요한 형식에 따라 다르게 사용할 수 있습니다. 1. Object.values() 사용객체의 모든 값을 배열로 만들고 싶을 때 유용합니다.const obj = { a: 1, b: 2, c: 3 };const valuesArray = Object.values(obj);console.log(valuesArray); // [1, 2, 3]2. Object.keys()와 map() 사용특정 키의 값만 배열로 추출하고 싶을 때 Object.keys()와 map()을 조합해 사용할 수 있습니다.cons..
[JS] 객체 안의 값과 배열의 값이 같을 때 값을 리턴하는 방법 (FINDINDEX 사용) findIndex를 사용하여 배열 안의 객체의 특정 값이 다른 배열에 포함되어 있을 때 해당 값을 찾으려면, 다음과 같이 코드를 작성할 수 있습니다:const arrayWithObjects = [{ test1: '111', test2: '222' }, { test1: '333', test2: '444' }];const valuesArray = ['111', '333'];// `findIndex`를 사용하여 조건에 맞는 객체의 인덱스를 찾습니다.const index = arrayWithObjects.findIndex(obj => valuesArray.includes(obj.test1));console.log(index); // 결과: 0 (첫 번째 객체의 test1 값이 '111'이므로 조건에 맞음) 위 ..
[React] useCallback((sender) => {},[deps],); const tempFunc = useCallback((sender) => {},[deps],); useCallback의 deps 배열은 콜백 함수의 재생성을 제어하는 역할을 합니다. useCallback은 첫 번째 인자로 받은 함수를 메모이제이션하고, deps 배열에 있는 값이 변경될 때에만 새 함수를 생성합니다. 즉, deps에 포함된 값 중 하나라도 변경되면 새로운 콜백 함수가 반환되고, 그렇지 않으면 이전에 저장된 콜백 함수가 그대로 사용됩니다.deps에 대한 설명deps 배열에는 함수에서 참조하는 외부 변수들이 들어갑니다. 이 배열에 추가된 값들이 변경되면 useCallback은 새로운 함수를 반환하여 최신 상태와 값을 사용할 수 있도록 합니다.예를 들어, 콜백에서 어떤 상태나 변수를 참조하고 있..

티스토리툴바