더 알아보기166 [React] useState를 선언할 때 let이 아닌 const를 사용하는 이유 강의를 듣다가 useState를 선언할 때 왜 let이 아닌 const를 사용하는지에 대한 의문이 생겼고, 강의 내용을 쓸 수 없기 때문에 구글링을 통해서 클로저에 대한 부가적인 이해 및 관련 글을 읽게 되었다. hooks에서 useState가 const로 선언되는 이유 카카오톡 오픈 채팅방에 따르면 요즘의 기업들은 클래스형이 아닌 훅스를 사용한다고 한다. 남들하는건 다 할줄 알아야지.. 그래서 공식 문서를 하나씩 읽어보기 시작했다. ko.reactjs.org/docs/hooks-s dudghsx.tistory.com 위 두 글을 정독하게 되었는 데 useState를 함수 뜯어보았을 대략적으로나마 어떤 방식으로 hook이 작동되는지 알 수 있었고 그 과정 속에서 클로저의 역할을 이해하게 되었는 데 (이해.. 2024. 4. 3. [Next.js] Drag&Drop 기능 구현하기 이번에는 관리자 페이지에서 이미지를 업로드할 때 파일 선택 버튼 외에도 드래그 앤 드롭으로 이미지를 삽입할 수 있는 기능을 구현해보았다. 코드 아래 링크에 블로그와 기존에 구현했던 이미지 파일 변환 기능을 활용하여 구현하였다. Test 페이지 (/pages/test.js) import Head from "next/head" import FileBox from "@/elements/library/fileBox/Test" import { useEffect, useState } from "react" import styled from "styled-components" const Test = () => { const [imageFile, setImageFile] = useState(null) // AWS에 이.. 2024. 1. 9. [Next.js] Grouping Pagination 만들기 (라이브러리 X) 이전에 구현했던 페이지네이션에서...(그룹화) 기능을 추가한 버전으로 업그레이드하게 되면서 해당 내용을 정리해 보았습니다. Pagination 만들기 (라이브러리 X) 오늘은 Pagination(페이지 네이션) 기능을 만들어 보았다. 라이브러리 대신 부트스트랩으로 CSS 입혔고, 기능은 JS 사용해서 만들었다. (라이브러리를 사용하지 않은 이유 : 블로그를 찾아보던 중 reac eundol1113.tistory.com [React-query] Pagination에 Prefetching 사용하기 현재 진행 중인 프로젝트에 페이지네이션 기능을 구현했는 데 페이지를 넘길 때마다 데이터를 불러오는 속도보다 화면 전환 속도가 더 빨라서(데이터 불러오는 속도 < 화면 전환 속도) 페이지가 eundol1113.tis.. 2023. 12. 11. [Next.js] 드롭다운 영역 외 클릭 시 메뉴 닫기 드롭다운은 프로젝트에서 자주 구현하게 되는 기능인만큼 만들다 보면 이것저것 기능이나 디자인을 넣고 싶어지는 데 이번에는 드롭다운 영역 외 클릭 시 드롭다운 메뉴가 닫히는 기능을 만들어 보았다 기능 구현 과정에서 useRef를 사용하였고 이 과정에서 ref.current.contains(e.target)이라는 개념도 새롭게 알게 되었다. 🤔 ref.current.contains(e.target)란? ref : React의 'useRef' 훅을 통해 생성된 ref 객체 (ex. const ref = useRef(null) ref.current : Ref 객체의 'current' 속성을 나타내며, 해당 Ref가 현재 참조하는 DOM 요소 ref.current.contains(e.target) : 현재 Ref가.. 2023. 11. 27. [Next.js] 드래그 상태에서 css 조작하기 관련 글 목차 1️⃣ react-beautiful-dnd를 사용하여 드래그로 순서 변경하기 [React, Next.js] react-beautiful-dnd를 사용하여 드래그로 순서 변경하기 라이브러리는 react-beautiful-dnd npm 사이트에서 가져와서 사용했다. react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. Latest version: 13.1.0, last published: a year ago. Start using react-beautiful-dnd in yo eundol1113.tistory.com 2️⃣ 다중 이미지 업로드 및 미리 보기 + 드래그로 순서 변경 [Next.js] 다중 .. 2023. 11. 23. [React + Typescript] Canvas 태그와 useRef를 사용하여 그림판 만들기 아직 블로그에 올리진 않았지만 지금 개인적으로 만들고 있는 프로젝트에 그림판 기능을 넣어보고 싶어서 canvas 태그와 useRef를 사용하여서 그림판 기능을 만들었습니다. 기능에 관한 코드와 설명은 추후 프로젝트가 완성되면 추가적으로 기재하도록 하겠습니다. 2023. 10. 20. [React + Typescript] 부모 자식 간에 useRef 사용하는 방법 React와 Typescript를 사용한 프로젝트에서 input에 useRef를 사용하던 중 새롭게 알게된 내용을 정리했습니다. 동일한 컴포넌트에서 useRef를 사용하는 경우 이 내용이 큰 도움이 되지 않을 수 있지만, 부모 컴포넌트에서 자식 컴포넌트에 prosp로 ref를 넘기고, 해당 ref에 접근하여 DOM을 조작하거나 값을 얻어야 하는 경우에 도움이 될 듯 합니다. 실행 화면 코드 useRef() : DOM 취득 용도로 HTMLInputElement 타입을 설정하고, 초깃값으로 null을 설정한다. // Parent.tsx import { useState, useEffect, useRef } from "react"; import Input from "./Input"; import Button f.. 2023. 10. 19. [React-Toastify] 토스트 기능 구현해보기 사이드 프로젝트 Linkey를 진행하면서 토스트 기능을 React + Typescript에서 구현해보았고, 그 과정을 정리해보았습니다! 라이브러리 선택 과정 React Bootstrap과 react-toastify라는 두 가지 선택지 중에서 최종적으로는 React-Toasitify 라이브러리를 선택하였는 데, 현재 개발 중인 사이드 프로젝트가 디자이너나 기획자가 없는 상태에서 프론트 1명과 백엔드 1명이 진행하는 프로젝트이다 보니 UI적으로 임펙트가 부족하다는 느낌이 들어 React Bootstrap에 애니메이션을 추가해서 구현하는 것보다는 빠른 개발을 위해 Node.js 패키지 (React-Toasitify)를 선택하게 되었다. React Bootstrap > Toasts Toasts | React B.. 2023. 9. 26. react-dom의 createPortal 사용 후기 react-dom의 createPortal이란? React 프로젝트에서는 구현된 화면을 /public/index.html의 에서 렌더링 하는 데 react-dom의 createPortal을 사용하면 #root가 아닌 다른 태그에 id를 부여함으로써 영역을 분리하여 화면을 렌더링 할 수 있다. [React] ReactDOM.createPortal() 모달 공부를 하다가 마주친 ReactDOM.createPortal()에 대해 알아보자! velog.io 어떤 상황에 사용할 수 있을까? Modal 컴포넌트를 생성할 때 화면을 감싸고 있는 root를 개별적으로 사용할 수 있기 때문에 화면 우선순위 처리면에서 유용할 것 같다. 이외의 새롭게 알게된 부분 예제에서는 document.getElementId("#mod.. 2023. 7. 28. 이전 1 2 3 4 5 ··· 19 다음 728x90
