본문 바로가기

👨‍💻 web.dev/fe25

React 이벤트 처리방식과 SyntheticEvent React 는 W3C 명세에 따라 합성 이벤트를 정의하기 때문에 브라우저 호환성에 대해 걱정할 필요가 없습니다. 합성 이벤트는 Synthetic Event 객체로 정의되며 브라우저 고유 이벤트와 완전히 동일하게 동작하지는 않습니다. 이번 포스트에서는 React 의 내부 이벤트 시스템의 동작 방식에 대해서 살펴보겠습니다. 😀 📌 SyntheticEvent 래퍼 객체 React 의 이벤트 핸들러는 크로스 브라우징의 일환으로 모든 플랫폼에서 동일한 이벤트 처리를 위해 구현된 인터페이스인SyntheticEvent 객체를 사용합니다. 이는 stopPropagation 과 preventDefault 등을 포함하여 브라우저 고유 이벤트와 동일한 인터페이스를 가지지만 모든 브라우저에서 동일하게 동작함을 보장합니다. S.. 2022. 10. 17.

File API 를 이용한 Input 컴포넌트 만들기 📌 들어가며 프로젝트 도중 HTML Input 을 래핑한 컴포넌트를 통해서 JavaScript 의 File 객체를 다뤄볼 기회가 생겼습니다. File API 에 대한 모든 것을 이번 포스트에서 다루지는 않지만, 필요한 기능을 구현하기 위해서 알아본 내용들을 정리해보겠습니다. 📌 File API 란? File API 는 파일에 대한 정보를 제공하고 JavaScript 를 이용해서 파일객체에 접근할 수 있는 다양한 인터페이스를 제공합니다. 업로드 한 파일의 이름을 변경하고 삭제하는 컴포넌트를 만들어보면서 File API 의 활용 방법에 대해서 알아보겠습니다. 먼저 파일을 다루는 FileInput 컴포넌트를 다음과 같이 정의하겠습니다. 여러개의 파일을 업로드 할 수 있도록 하기 위해 multiple 속성을 추.. 2022. 8. 13.

Next.js API Routes 알아보기 📌 API Routes 란? API Routes 의 등장 배경 React 애플리케이션을 개발하다보면 backend API 가 필요한 시점이 오게됩니다. 예를 들어 DB 의 데이터를 조회하거나 사용자가 요청한 데이터를 처리하는 등의 작업이 있습니다. 이를 위해 이전에는 Node.js 등을 활용한 custom server 파이프라인을 구축해서 해당 작업을 위임하는 방식을 사용했지만, 이 경우 Next.js 의 성능 최적화 이점을 잃게 되는 문제와 TypeScript 및 ES6 방식의 모듈 시스템을 사용하지 못하는 문제가 있었습니다. 이러한 문제를 해결하며 개발자 경험을 향상시키기 위해서 Next.js 는 Next 9 버전 부터 API Routes 라는 기능을 지원하기 시작했습니다. 이를 통해 Next.js .. 2022. 7. 26.

React 컴포넌트(children) 타이핑하기 📌 무슨 타입을 써야하지..? 🤔 TypeScript 와 함께 React 프로젝트를 개발하다보면 컴포넌트에서 children 을 prop 으로 받아서 사용하고 이에 대한 인터페이스를 정해줘야 하는 경우가 있습니다. export default function Component({ children }) { return ( 자식 컴포넌트를 렌더링합니다. { children } ) } 이럴때마다 항상 고민인 부분이 children 에 어떤 타입을 명시해야 하는 것인가? 에 대한 것입니다. 이번 포스트에서는 이 부분에 대한 고민을 해결하고자! React 컴포넌트의 children 에 할당 가능한 타입들에 대해서 간단하게 정리해보겠습니다. 📌 React 에서 제공하는 여러가지 children 타입들 1️⃣ JSX... 2022. 7. 23.

React 오래된 클로저(Stale Closure) 이슈 해결하기 📌 requestAnimationFrame + React Hook 트리플 사전과제에서 애니메이션을 구현할 때 rAF(requestAnimationFrame)을 사용했습니다. CSS 만으로는 구현이 힘들다고 생각되어 사용한 API인데 React와 함께 사용하며 마주했던 이슈를 정리하려고 포스팅을 남기게 되었습니다. 📌 rAF를 사용한 slotMachine 구현부 위 섹션에서 사용자 지표를 나타내는 숫자 부분의 증감 속도가 천천히 감소하는 애니메이션을 구현하기 위해 rAF를 사용했습니다. 구현 코드는 대략 다음과 같습니다. 해당 컴포넌트가 최초에 렌더링 될 때 애니메이션을 시작하기 위해 useEffect를 사용하였고 목표 숫자에 도달할 때까지 재귀적으로 애니메이션 함수를 실행합니다. const SlotMac.. 2022. 5. 11.

React 제어 컴포넌트 vs 비제어 컴포넌트 📌 비제어 컴포넌트 (uncontrolled component) 비제어 컴포넌트 에서 폼 데이터는 DOM 자체에 저장됩니다. 만약 해당 폼 데이터를 읽어오고 싶다면 ref 를 이용해서 값을 PULL 해와서 사용합니다. import React, { useRef } from 'react' const UnControlledComponent = () => { const inputRef = useRef(null) const handleClick = () => { /** input 값으로 특정 로직을 수행합니다. */ console.log(inputRef.current.value) } return ( 확인 ) } export default UnControlledComponent 📌 제어 컴포넌트 (controlle.. 2022. 4. 10.

이전 1 2 3 4 5 다음

티스토리툴바