hanker

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

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..

웹 렌더링 방식 중 SSR, SSG, CSR 등 여러가지 방식이 있는데 이번 글에서 이게 뭔지 알아보자. 특징CSRSSRSSG렌더링 위치브라우저서버빌드 시초기 로딩느림빠름매우 빠름SEO어려움좋음매우 좋음페이지 이동빠름느림빠름실시간 데이터가능가능제한적서버 부하적음많음거의 없음 CSR (Client-Side Rendering) 동작 방식 빈 HTML + JavaScript 번들을 브라우저에 전송브라우저에서 JavaScript 실행하여 페이지 생성API 호출로 데이터 가져와서 화면에 표시 장점 SPA로 페이지 이동이 빠름 서버 부하가 적음 복잡한 인터랙션 구현 용이단점 초기 로딩이 느림 (JavaScript 번들 크기) SEO 불리함 저성능 기기에서 느림 SSR (Server-Side Rendering..

Next.js와 Vite의 차이점은 무엇일까Next.js와 Vite는 프론트엔드 개발에서 자주 사용되는 대표적인 도구들이다.이번 글에서는 Next.js와 Vite의 차이점을 알아보자Next.js란?Next.js는 React 기반의 웹 프레임워크이다.SSR(서버 사이드 렌더링), SSG(정적 사이트 생성), CSR(클라이언트 렌더링)을 모두 지원한다.자동 라우팅, 이미지 최적화, API 핸들링 기능이 내장되어 있어 풀스택 웹 개발에 사용된다.pages/ 폴더를 기반으로 자동 라우팅이 구성된다.getServerSideProps, getStaticProps 등을 통해 서버에서 데이터를 불러올 수 있다.next/image를 통해 이미지 최적화가 자동으로 수행된다.SEO에 강하며, 검색엔진 노출이 중요한 사이트에..

이번 글에서는 react 프로젝트를 Intellij에서 생성하고 실행시켜 보자.  1. New Project > create intellij Tool에서 New Project를 선택 후에, 좌측에 React 선택을 하면 Node.js를 설치하라고 나온다.Node.js가 설치되어있지 않아도, Download Node.js를 선택하면 자동으로 설치된다.이후 Create 버튼 눌러서 프로젝트 생성설치가 완료되면 npm 실행 명령어들을 소개해주고 Happy hacking! 이라는 문장이 나온다. 2. React 실행 Terminal 창으로 이동해서 npm start를 입력한다.터미널 창에서 잘 실행된다. 실행화면  끝.