본문 바로가기

전체보기209

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.
JavaScript : 웹 스토리지 (1) - Cookie와 Web Storage HTTP 프로토콜(웹 브라우저가 서버와 통신하는 규칙)의 경우 요청과 응답을 주고 받아 한 사이클이 종료되면 연결이 끊어진다. 즉 로그인정보다 브라우저에서 입력한 값 등이 페이지를 이동할 때마다 초기화 된다. 이러한 문제점을 해결하기 위해 데이터를 저장할 수 있도록 쿠키, 웹스토리지가 나오게 되었다. Cookie 쿠키는 클라이언트의 정보를 여러 세션동안 유지하기 위해 사용하는 기술로, 브라우저에 저장되는 만료기간이 존재하는 작은 텍스트 파일의 데이터이다. 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request 시에 자동으로 서버에 전송한다. document.cookie쿠키는 클라이언트 측에서 정보를 유지할 수 있게 해 주며, 서버와 클라이언트 간에 상태를 공유하는 데 유용하다. 하지만 쿠키는 몇 .. 2024. 8. 17.

티스토리툴바