hanker

React를 사용하다 보면 DOM 요소에 직접 접근하거나, 컴포넌트가 리렌더링되어도 값을 유지해야 하는 상황이 있는데,이럴 때 사용하는 것이 바로 useRef 훅이다. useRef란 무엇인가? useRef는 React 함수형 컴포넌트에서 사용할 수 있는 훅으로, 두 가지 주요 용도가 있다.DOM 요소에 직접 접근하기 위한 참조(reference) 생성리렌더링 간에 값을 유지하되 변경 시 리렌더링을 트리거하지 않는 변수 저장기본 문법은 아래와 같다.const ref = useRef(initialValue); useRef의 특징 리렌더링되지 않음- useRef로 생성된 객체의 current 값이 변경되어도 컴포넌트가 리렌더링되지 않는다. - 이는 useState와의 가장 큰 차이점이다.값이 유지됨- 컴포넌..

JavaScript를 사용하다 보면 조건문(if, while, 삼항 연산자 등)에서 다양한 값들이자동으로 참(true) 또는 거짓(false)으로 평가되는 것을 볼 수 있다.이때 어떤 값은 항상 거짓(falsy)으로 평가되고, 그 외 대부분의 값은 참(truthy)으로 평가된다. 이번 글에서는 JavaScript에서 자주 사용되는 falsy 값과 truthy 값을 알아보자. Falsy 값이란? Falsy 값이란, 조건문에서 자동으로 false로 평가되는 값을 말한다.즉, 아래와 같은 값들은 if 문 등에서 항상 거짓으로 간주된다.값설명false불리언 false 값 자체0숫자 0-0음수 0 (자바스크립트에서 구분됨)0nBigInt에서의 0""빈 문자열null값이 없음undefined정의되지 않음NaN숫..

npm install 을 하다보면 react 버전을 다운그레드 하라고 나온다.근데 명시한 버전으로 다운그레이드 해도 오류가 동일하게 나오는데, 해결 방법을 알아보자. React 18.3으로 다운그레이드 React 팀은 React 19로 바로 넘어가기 전, React 18.3으로 먼저 업그레이드하여 잠재적인 호환성 문제를 사전에 확인하도록 권장한다.18.3 버전은 React 19에서 제거될 API들에 대한 deprecated(사용 중단 예정) 경고를 포함하고 있다. npm install --save-exact react@18.3 react-dom@18.3 이후 19.0 버전으로 업그레이드 프로덕션 환경에서 사용하려면, --save-exact 옵션을 사용해 정확한 버전으로 고정해서 사용하면 된다.npm..

react 프로젝트를 제일 많이 보이는 코드가 아래와 같다.const [documents, setDocuments] = useState([]);이 코드가 어떤 기능을 하는지 알아보자. useState란 React에서 컴포넌트의 상태(state)를 관리하기 위한 Hook이다.즉 화면에 표시되는 데이터가 시간에 따라 변할 수 있는 값을 말한다. 기본 사용법 const [documents, setDocuments] = useState([]); documents상태 값 (state value) 이다.여기서는 [] (빈 배열)로 초기화되었고, 처음에는 비어있는 상태이다.setDocuments상태를 변경할 때 사용하는 함수다.documents 값을 직접 수정하지 않고, 반드시 이 함수를 통해 변경해야 한다.이유..

React에서 함수형 컴포넌트를 쓸 때, 상태 관리와 생명주기 처리는 Hook을 통해 구현한다.그중에서도 가장 많이 쓰이는 것이 바로 useState와 useEffect이다. 1. useState - 상태(state) 관리 useState는 컴포넌트 안에서 상태 값을 선언하고 관리할 수 있게 해주는 Hook이다.상태가 변경되면 해당 컴포넌트는 자동으로 리렌더링 된다.const [state, setState] = useState(initialValue); state : 현재 상태 값setState : 상태 변경 함수initialValue : 상태의 초기값// 예시import React, { useState } from "react";function Counter() { const [count, set..

웹 개발을 하면서 자주 사용하는 요소를 보이게 하거나 숨기게하는 방법에 대해서 알아보자. 1. style.display 속성// modBtn ID 값을 가진 요소 숨기기document.getElementById('modBtn').style.display = 'none';// modBtn ID 값을 가진 요소 보이기document.getElementById('modBtn').style.display = 'block';// modBtn ID 값을 가진 요소를 원래 display 값으로 복원document.getElementById('modBtn').style.display = '';장점간단하고 직관적완전히 레이아웃에서 제거됨단점원래 display 값을 기억해야 함갑작스러운 변화로 자연스럽지 않음 2. st..

JavaScript를 사용하면서 혼란스러운 개념인 ==과 ===의 차이를 한번 알아보자. ==, ===의 차이 == : 느슨한 비교타입 변환을 수행한 후 값을 비교서로 다른 타입이어도 변환 후 같은 값이면 true를 반환abstract equality 라고도 불린다.null과 undefined를 동시에 체크할 때 유용 === : 엄격한 비교타입과 값을 모두 비교타입이 다르면 무조건 false 반환타입 변환을 수행하지 않음성능이 ==보다 빠르지만(타입 변환 과정 생략) 미미 예시 // 같은 타입, 같은 값console.log(5 === 5); // trueconsole.log("hello" === "hello"); // true// 다른 타입, 같은 값console.log(5 == "5");..

Axios는 JavaScript에서 가장 많이 사용되는 HTTP 클라이언트 라이브러리 중 하나이다.Promise 기반으로 동작하며, 브라우저와 Node.js 환경 모두에서 사용할 수 있어 많은 개발자들이 선호하는 도구이다. 1. Axios Axios는 XMLHttpRequest와 Fetch API를 기반으로 한 Promise 기반 HTTP 클라이언트이다.RESTful API와의 통신을 위해 설계되었으며, 요청과 응답을 간편하게 처리할 수 있도록 도와준다. 자동 JSON 변환: 요청과 응답 데이터를 자동으로 JSON으로 변환해준다.요청 및 응답 인터셉터: 요청을 보내기 전이나 응답을 받은 후에 데이터를 가공할 수 있다.타임아웃 설정: 요청에 대한 타임아웃을 쉽게 설정할 수 있다.광범위한 브라우저 지원: ..

JavaScript의 Fetch API는 네트워크 요청을 위한 인터페이스이다.XMLHttpRequest를 대체하여 더 간단하고 유연한 방법으로 HTTP 통신을 할 수 있게 해준다. 1. fetch API 지원 브라우저 fetch API는 웹 브라우저에서 제공하는 네이티브 JavaScript API로, 서버와의 HTTP 통신을 Promise 기반으로 처리할 수 있게 해준다.IE를 제외한 모든 브라우저에서 지원 2. fetch API 사용 방법 2-1. GET 방식 구현// 기본 GET 요청 - Promise 체인 방식// jsonplaceholder는 샘플 데이터를 제공하는 무료 온라인 REST API fetch('https://jsonplaceholder.typicode.com/posts/1') ...

JavaScript에서 서버와 데이터를 주고받는 비동기 통신 방법들을 알아보자. 1. XMLHttpRequest XMLHttpRequest는 JavaScript에서 비동기 HTTP 요청을 보내는 가장 기본적인 방법이다.모든 브라우저에서 지원된다. 라이브러리 추가 필요: 없음const xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data');xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { const data = JSON.parse(xhr.responseText); console.log(da..