파송송의 개발자 공부

useLayoutEffect 훅이란?

useLayoutEffect는 React에서 제공하는 Hook 중 하나로, 주로 DOM의 레이아웃을 읽거나 변경할 때 사용됩니다. useLayoutEffect는 브라우저가 화면을 그리기 전에 실행되므로, DOM을 직접 조작하거나 레이아웃의 측정을 수행하는 경우에 적합합니다. useLayoutEffect의 실행 시점 컴포넌트 렌더링 이후 컴포넌트의 렌더링 결과가 DOM에 적용된 직후에 실행됩니다. 이 때문에 useLayoutEffect 내부에서 DOM을 읽거나 변경하는 작업을 수행하면, 이러한 작업들이 화면에 반영되기 전에 완료됩니다. 브라우저의 화면 갱신 전 React는 useLayoutEffect가 완료될 때까지 화면의 갱신을 지연시킵니다. 이는 useLayoutEffect 내부에서 수행하는 작업이 화..

[리액트] 별점 컴포넌트

사이드 프로젝트에서 필요한 별점 컴포넌트를 구현했다. 따로 아이콘 등을 import 하고싶지 않아서 svg를 직접 넣는 방식으로 만들었다. 0.5점 단위로 별점을 줄수있고, 클릭과 드래그를 이용해서 점수를 선택할 수 있다. 별점 컴포넌트의 너비에 따라서 인덱스를 구하고, 그 컴포넌트에서도 반절을 나눠서 계산하는 방법을 이용했다. //App.tsx import React from "react"; import "./App.css"; import StarRating from "./components/star/StarRating"; function App() { return ( ); } export default App; //StarRating.tsx import { useRef, useState } from ..

리액트 useImperativeHandle, forwardRef로 부모 컴포넌트가 자식 컴포넌트의 메서드나 변수에 직접 접근

useImperativeHandle 이란? useImperativeHandle is a React Hook that lets you customize the handle exposed as a ref. useImperativeHandle은 ref로 노출되는 핸들을 사용자가 직접 정의할 수 있게 해주는 React 훅이다. useImperativeHandle(ref, createHandle, dependencies?)https://react-ko.dev/reference/react/useImperativeHandle#exposing-a-custom-ref-handle-to-the-parent-component React에서 외부에서 주입된 prop을 사용하여 모달(또는 레이어)의 열림 상태를 제어 부모 컴포..

리액트에서 dangerouslySetInnerHTML 렌더링하기

dangerouslySetInnerHTML는 React에서 제공하는 속성입니다. 이것을 사용하면 JavaScript를 통해 직접 HTML을 DOM에 삽입할 수 있습니다. 이것은 문자 그대로 "위험하게" DOM에 직접 HTML을 삽입하기 때문에, 이 이름이 붙여진 것입니다. XSS(크로스 사이트 스크립팅) 같은 보안 문제에 쉽게 노출될 수 있기 때문에 사용할 때 주의가 필요합니다. 사용 방법 function MyComponent(props) { return ( ); } function App() { const htmlString = "This is a dangerous example!"; return ( ); } expor 활용 방법 1 : svg 코드 렌더링 외부에서 가져온 SVG 코드나 복잡한 SVG ..

리액트에서 string 데이터와 ReactElement가 혼합된 데이터 렌더링 하기

리액트에서 배열의 데이터가 문자열과 ReactElement 두 가지 유형이 들어올 때, 해당 배열을 map을 사용하여 렌더링하려면 각 항목의 유형을 확인하고 적절히 처리해야 합니다. 렌더링 해야하는 데이터 const items = [ "20180326-2", { $$typeof: Symbol(react.element) key: null props: {} ref: null type: "br" _owner: FiberNode {tag: 11, key: null, elementType: {…}, type: {…}, stateNode: null, …} _store: {validated: false} _self: null _source: null }, "dddd" ] 예시 코드 배열 items의 각 항목을 검사하..

FileReader로 파일 읽고 업로드한 파일 미리보기 구현

FlieReader 객체를 이용하여 업로드된 파일을 읽을 수 있다. FileReader란? type이 file인 input태그 또는 API 요청과 같은 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 한다. FileReader 문법 new 연산자를 사용하여 FileReader 객체 생성 const reader = new FileReader(); 파일의 내용은 result 속성에는 문자열 값으로 들어감 우리는 이 result 속성을 이용하여 아래의 4가지 방식으로 파일을 읽을 수 있음 result 속성의 4가지 방식으로 파일 읽기 readAsText() : 파일 객체의 내용을 텍스트로 읽음..

리액트에서 조건부 클래스 이름줄 때 classNames 라이브러리 사용

classnames 라는 라이브러리는 리액트에서 클래스 이름을 동적으로 설정할 때 유용하게 사용되는 라이브러리이다. https://www.npmjs.com/package/classnames 설치방법 리액트 npm install classnames --save 타입스크립트 npm install classnames --save npm install --save @types/classnames 사용 방법 여러 가지 종류의 파라미터를 조합해 CSS 클래스를 설정할 수 있기 때문에 컴포넌트에서 조건부로 클래스를 설정할 때 매우 유용하다. import classNames from 'classnames'; // ... return Hello; 프로젝트에서 사용 프로젝트에서 사용 1 import classNames f..

리액트 컴포넌트에서 axios API 요청하기

axios axios 설치 yarn add axios npm i axios get axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }) .finally(function () { // always executed }); post axios.post("url", { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { // response }).catch(function (error) { // 오류발생시 실행 }) dele..