react5 왜 React 최신 버전에서는 import React가 필요 없을까? 📌 과거에는 import React가 필수였다React를 공부하다 보면 예전 강의나 코드에서 import React from "react"; 구문을 흔히 볼 수 있다. 이는 기존 React 버전에서는 JSX 문법을 사용할 때 React가 필요했기 때문이다.JSX(JavaScript XML)는 JavaScript 안에서 HTML과 유사한 문법을 사용할 수 있도록 해주지만, 실제로는 React.createElement를 호출하는 코드로 변환된다. 예를 들어,const element = Hello, world!;위 코드는 Babel을 통해 다음과 같이 변환되는 것이다.const element = React.createElement("h1", null, "Hello, world!");이 과정에서 React.c.. 2025. 2. 13. [React] dangerouslySetInnerHTML: DOM에서 innerHTML 사용하기 아래와 같이 태그가 포함된 문자열 배열을 HTML로 렌더링하면 태그가 그대로 출력된다.details: [ "Recoil 사용하여 전역 상태 관리", "AWS S3 Bucket을 이용한 이미지 URL 생성 및 업로드", "Vite 기반 ESLint와 TypeScript를 적용한 개발 환경 구성"] 이처럼 React는 기본적으로 HTML 태그를 포함한 문자열을 일반 텍스트로 처리한다.따라서 같은 태그가 포함된 문자열을 그대로 전달하면 HTML로 해석되지 않고 단순한 텍스트로 렌더링된다.이를 해결하기 위해 React에서 HTML로 렌더링하도록 명시적으로 지시하는 방법이 dangerouslySetInnerHTML이다. __html: HTML 문자열을 지정하는 속성. 따라서 여기에 문자열을 넣어주면 된.. 2024. 12. 10. [React] Lenis로 부드러운 스크롤 효과 추가하기 1. Lenis?일반적인 스크롤 이벤트의 딱딱한 움직임 대신, 부드럽게 감속하거나 가속되는 애니메이션 효과를 추가할 수 있는 라이브러리아래 링크에 사용하는 방법이 기재되어 있다.https://github.com/darkroomengineering/lenis GitHub - darkroomengineering/lenis: How smooth scroll should beHow smooth scroll should be. Contribute to darkroomengineering/lenis development by creating an account on GitHub.github.com 2. 사용하기Git에 기재된 코드에 Lenis 인스턴스를 생성하여 감속 효과를 정의해보았다.Typescript 사용 .. 2024. 11. 28. [React] react-copy-to-clipboard: 클립보드 복사 기능 구현하기 react-copy-to-clipboard는 React 에서 클립보드 복사 기능을 간단히 구현할 수 있는 라이브러리이다. 첨부된 사진처럼 이메일 주소를 복사하는 버튼을 구현해보자! 1. 패키지 설치하기npm install react-copy-to-clipboard 2. 구현하기 컴포넌트:text 속성에 복사할 데이터를 전달할 수 있다. onCopy 속성으로 복사 이벤트가 발생할 때 실행할 함수를 지정할 수 있다.구현할 내용!email 변수를 text 속성에 전달해서 이메일을 복사하게 해보자!onCopy에 복사 상태 변경 및 setTimeout 함수를 사용하여 버튼 텍스트를 2초간 Copied ! 로 변경해보자!import React, { useState } from "react";import { Copy.. 2024. 11. 25. 이전 1 2 다음
