본문 바로가기

Frontend145

React : 배열 렌더링을 해보자 ! React에서는 배열을 업데이트 할 때마다 새 배열을 state 설정 함수에 전달해야 한다. React에서 JavaScript 배열 메서드를 사용하여 데이터 배열을 조작할 수 있다.  메서드추가concat, [...arr] * spread연산자제거filter, slice교체map정렬배열을 복사한 이후 reverse() 및 sort()함수 사용 filter(), map(), spread연산자를 이용한 배열 데이터 필터링filter()의 경우 주어진 필터링 값이 참인 경우의 배열 요소들만으로 새로운 배열을 생성한다. map()의 경우 배열 내의 모든 요소 각각에 대하여 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환한다. 그리고 spread연산자의 경우 반복이 가능한(iterable) 객체에서 요소를.. 2024. 8. 22.
React : useState에서 객체와 배열을 다뤄보자 React의 useState 함수의 경우 값이 변경되면 재렌더링을 해준다. 참조형의 경우에는 참조하는 주소(메모리주소)가 변경 되었을 때 값이 변경되었다고 인식하기 때문에 값을 변경한다고 해서 렌더링이 발생하지 않는다.  아래의 로직을 시행했을 때 참조하는 주소가 변경되지 않았기 때문에 버튼을 눌렀을 때 값이 변경되지 않는다.import { useState } from 'react'import './App.css'function App() { const [obj, setObj] = useState({ name: "코딩쥐", addr: "coding-ji.tistory.com" }) function changeName(){ obj.name = "coding-ji" obj.addr.. 2024. 8. 22.
React: useState를 통해 변화하는 값을 관리하자 useStateuseState는 컴포넌트 내부에서 동적으로 변경이 되는 데이터를 관리할 때 사용할 수 있는 함수이다. useState를 사용하면 함수형 컴포넌트 내에서 상태 변수를 선언하고 업데이트를 할 수 있다. useState 사용 시에 주의해야 할 사항이 있는데, 컴포넌트의 최상위 레벨에서만 호출이 가능하며 반복문이나 조건문 안에서는 호출이 불가능하다. import {useState} from 'react';useState를 활용하기 전에 react 모듈에서 useState를 불러온다. const[state, setState] = useState(initialState);- state : 현재 상태 변수를 나타낸다.- setState : state를 다른 값으로 업데이트하고 재렌더링을 해주는 함수이.. 2024. 8. 21.
React : JSX(JavaScript XML)에 대해서 JSX(JavaScript XML)은 문법적 편의를 제공하기 위해 JavaScript에 XML을 추가하여 확장한 문법이다. 공식적인 JavaScript 문법은 아니지만, 바벨 등과 같은 컴파일러를 통하여 JavaScript로 변환한 후에 사용이 가능하다. JSX의 경우 React.createElement() 호출을 반복하는 대신에 간결하게 작성이 가능하다. JSX가 React의 필수는 아니지만, 공식 웹사이트에서 사용을 권장하고 있다.  JavaScriptconst root = ReactDOM.createRoot(document.getElementById('root'));root.render( React.createElement( React.Fragment, null, React.cre.. 2024. 8. 20.
JavaScript : 웹 스토리지 (3) - IndexedDB의 keyRange / index / opencusor IndexedDB에서 데이터를 효율적으로 검색하고 조작하는데 KeyRange, Index, OpenCursor를 사용할 수 있다.  KeyRange인덱스나 객체 저장소에서 키의 범위를 제한하는 역할을 한다. 이를 통해 특정 키 값이나 범위에 해당하는 항목만 선택할 수 있다. IDBKeyRange를 통해서 사용한다.함수설명lowerBound(value, lowerOpen)조회하려는 최소값 지정, lowerOpen이 true일 경우 값을 포함하지않음upperBound(value, upperOpen)조회하려는 최대값 지정, upperOpen이 true일 경우 값을 포함하지않음bound(lower, upper, lowerOpen,upperOpen)조회하려는 최대값과 최소값 지정only(value)특정 값에 해당.. 2024. 8. 18.
JavaScript : 웹 스토리지 (2) - IndexedDB란? 앞서 Cookie와 Local Storage, Session Storage에 대해 공부했었다. 웹 스토리지의 경우에는 소량의 단순한 데이터를 효율적으로 저장하는데 적합하다. 대량의 구조적 데이터를 처리하기 위해서는 IndexedDB라는 API를 사용하여 대규모의 복잡한 데이터를 관리할 수 있다. indexedDB는키-값 쌍으로 데이터를 저장하며, 비동기 방식(함수 호출 시 결과를 반환하지 않는 대신, 함수를 종료할 때 동작할 콜백함수를 전달함. 요청한 동작이 종료되면 success, error와 같은 이벤트를 받아 다음 동작을 진행)으로 동작한다.  IndexedDB은 다음과 같이 사용한다.데이터베이스 생성 및 열기데이터베이스에 objectStore(객체저장소) 생성 : objectStore에 저장된 객.. 2024. 8. 18.

티스토리툴바