JavaScript / React - IntersectionObserver

IntersectionObserver는 웹 개발에서 아주 유용한 API 이다.이 API는 특정 요소(target)가 뷰포트나 지정한 컨테이너와 교차하는 정도를비동기적으로 감지할 수 있게  해준다.즉 스크롤할 때 요소가 화면에 나타나거나 사라지는 시점을 효율적으로 파악할 수 있도록 해준다.IntersectionObserver를 사용하는 이유성능 최적화- 스크롤 이벤트를 직접 감시하는 방식은 매번 스크롤 이벤트가 발생할때마다많은 연산을 해야하기 때문에 성능 이슈가 발생할 수 있다.IntersectionObsever는 브라우저가 최적화한 방식으로 감지하므로 성능 부담이 적다는 장점이 있다.간편한 API- 요소가 화면에 들어왔는지 여부를 쉽게 감지할 수 있어, lazy loading (이미지나 리소스의 지연 로..

• format_list_bulleted React
• · 2025. 3. 28.
• textsms

React - useRef

useRef는 리액트의 훅(Hook)중 하나로변수를 유지하지만 컴포넌트가 리렌더링될 때 값이 초기화되지 않도록 하는 역할을 한다.const fileInputRef = useRef(null);// handleImageChange 생략 fileInputRef.current && fileInputRef.current.click()}> 파일 선택 위 코드에서 useRef는 fileInputRef를 생성하고 요소의 참조 (reference) 역할을 한다.즉, fileInputRef.current에는 해당 요소가 직접 저장된다. const fileInputRef = useRef(null);▲ fileInputRef라는 변수를 useRef(null)로 초기화하고이 변수는 렌더링이 다시 일어나도 값이 유지된다. ▲..

• format_list_bulleted React
• · 2025. 3. 12.
• textsms

React- React에서 인라인 스타일 사용하기

리액트에서 컴포넌트 스타일을 적용하는 여러 가지 방법중인라인 스타일(Inline Style)을 사용하는 방법을 알아보자.인라인 스타일 (Inline Style)인라인 스타일은 컴포넌트의 style 속성에 직접 스타일 객체를 전달하는 방식ㅇ이다.리액트에서는 style 속성에 객체(Object) 형태로 스타일을 적용해야 한다.원래는 다음과 같이 HTML 방식을 사용했었다.function InlineStyleExample() { return ( {/* HTML 방식 (잘못된 코드*/} 안녕하세요 )}export default InlineStyleExample하지만 리액트에서는 문자열 (" " 안에 스타일을 작성)로 인라인 스타일을 적용할 수 없다.결국 다음과 같이 오류가 발..

• format_list_bulleted React
• · 2025. 2. 28.
• textsms

React - React의 렌더링 방식 : State

State가 변경될 때 React는 어떻게 렌더링할까?React는 가상 DOM (Virtual DOM)을 기반으로 효율적인 렌더링을 수행하는 프레임워크이다.※가상 (Virtual) DOM ?리액트가 효율적으로 UI를 업데이트하기 위해 사용하는 가상의 DOM 구조이다.기존 웹 브라우저는 일반적인 HTML DOM에서 직접 수정하면 속도가 느려지고DOM 조작이 많아질 수록 성능이 크게 저하되는데여기서 가상 DOM의 역할이 중요시하게 된다.리액트는 가상 DOM을 메모리에 저장하고 실제로 DOM을 직접 조작하지 않으며여기서 놀라운점은 상태(state)변경이 발생하면 가상 DOM에서 먼저 변경된 부분을 적용한 후,실제 DOM과 비교하여 최소한의 변경만 적용한다.이로써, 브라우저의 성능을 최적화하면서도 빠른 UI 업..

• format_list_bulleted React
• · 2025. 2. 27.
• textsms

React - State

State(상태)는 리액트에서 컴포넌트 내부에서 관리되는 동적인 데이터를 의미한다.사용자 입력, API 응답, 버튼 클릭 등과 같은 이벤트에 따라 변할 수 있는 값을 저장하는 공간으로,state가 변경될 때 마다 리액트는 자동으로 컴포넌트를 재렌더링하여 UI를 최신 상태로 유지한다.State 사용방법▼ 함수형 컴포넌트에서 useState 사용하기import { useState } from "react"function Counter() { // count 상태(state)와 이를 변경할 수 있는 setCount 함수 선언 const [count, setCount] = useState(0) return ( 현재 카운트 : {count} setCount(count + 1)}>증..

• format_list_bulleted React
• · 2025. 2. 26.
• textsms

React - children props

리액트에서는 모든 컴포넌트가 props를 받을 수 있지만children prop은 특별한 역할을 하는데컴포넌트 태그 내부에 있는 내용을 동적으로 전달할 때 사용하고레이아웃 컴포넌트, 재사용 가능한 UI 요소 등을 만들 때 매우 유용하다. 기본적으로는 props는 부모 -> 자식으로 데이터를 전달하는 역할을 한다고 했을 때,children prop은 컴포넌트 태그 사이의 내용을 가져오는 역할을 한다.즉 children을 사용하면 부모 컴포넌트에서 원하는 내용을 동적으로 넣을 수 있다. children prop 기본 사용법// Card.jsxfunction Card({ children }) { return ( {/* children을 통해 태그 내부의 내용을 랜더링 */} {chi..

• format_list_bulleted React
• · 2025. 2. 21.
• textsms