[React_Library] 간편하게 적용하는 drag & drop (hello-pangea/dnd)

이미 다양한 웹에서 너무나도 익숙하게 사용하고 있는 기능이 있다.순서가 있는 여러 리스트에서 마우스로 특정 요소를 끌어서 순서를 원하는대로 변경하는 기능이다. 사실 굳이 마우스를 이용해서 끌고 놓고 하지 않고 버튼을 이용해서 순서를 바꾸는 방식으로 간단히 구현할 수 있다.리스트 순서 변경하기 (기본편)구현 환경 : React, Typescript, MUI, emotion (css) 우선 내가 해당 기능을 구현할 때 고려했던 환경에 대해서 그림과 함께 알아보자 화면에 보여지는 리스트가 있고, 해당 리스트의 순서를 변경할 때는 모달을 띄워서 순서를 변경하도록 했다.그래서 보여지는 리스트는 그대로 있고, 모달 안에서만 순서 변경이 이루어져야 했다.그 이후 '저장' 버튼을 누르면 변경된 순서가 리스트에 반영이 ..

• format_list_bulleted Stack/REACT
• · 2025. 4. 4.
• textsms

[React_Library] 휠 스크롤 날짜 선택 라이브러리, 하지만 직접 구현하는 방법을 곁들인 (react-simple-wheel-picker)

아이폰에서 볼 수 있는 기본 UI 중에 스크롤로 날짜를 선택하는 UI가 있다.앱 환경에서는 기본 UI로 불러올 수 있어서 이런거에 대해 UI 생각을 크게 하지 않겠지만이걸 웹에서 구현하려고 하라는 미션을 받아 옙!을 외치고 바로 라이브러리를 찾아봤다.  사막에서 오아시스를 발견했지만 신기루였다 npm에는 달력과 연관된 라이브러리는 상당히 많이 있다.react-date-picker / react-day-picker 등 여러 라이브러리가 있는데 내가 세운 조건에는 부합하지 않았다. - 스크롤을 통한 연 / 월 선택- 스크롤이 멈춘 위치의 값을 자동으로 선택- 해당 컴포넌트를 열었을 경우 선택했던 값이 컴포넌트 중앙으로 위치하기 위와 같은 조건들이 충족되는 라이브러리를 찾기 쉽지 않았었는데그러던 중 발견한 라..

• format_list_bulleted Stack/REACT
• · 2025. 3. 31.
• textsms

[React_Library] Framer-Motion 적용기

전에 개발을 할 때는 간단한 애니메이션 (팝업 효과라던지, 뭐 디졸브 라던지...) 들은대부분 직접 만들어서 구현하곤 했었는데, 최근에 개발하면서 기획자분께서 뿅? 뿅? 하고 튀어나오는애니메이션을 원하셔서 라이브러리의 힘이 절실했다. 일단 해보겠읍니다! 하고 지른 뒤 ChatGPT나 stackoverflow 형들에게 도움을 요청하면 되겠지 했는데공식문서만 봐도 간단하게 적용할 수 있는 라이브러리라서 어떻게 적용했는지만 기록해 보려고 한다. Installnpm install framer-motion 해당 라이브러리는 사용하고자 하는 프로젝트에서 위와 같이 설치를 진행하면 된다. * 참고 Stack *프레임워크 : Next.js (ver 14.1.0)스타일 라이브러리 : sass (1.70.0)애니메이션 라..

• format_list_bulleted Stack/REACT
• · 2024. 3. 14.
• textsms

React에서 map 메서드 쓸 때, key prop을 사용해야 하는 이유?

프론트엔드 개발을 할 때, UI에 반복되는 구조를 하드코딩 하지 않고 Map 메서드를 사용해서 구현하는 경우가 매우 많다. 배열이나 객체로 된 데이터를 서버 혹은 상수데이터로 받아와서 동일한 UI 구조에서 데이터만 다르게 표시되도록 구현하는데 이 과정에서 map 메서드를 사용하게 된다. 이 때, 가장 부모요소에 key prop을 기입하게 되는데, 왜 이 key prop이 필요한 걸까? Problem {SampleData.map((el)=>{ return ( {el.title} ) })} 위와 같은 형태로 UI를 구성했다고 가정해 보자. 현재 SampleData라는 데이터를 map 메서드를 이용해 주고, 데이터 안에 있는 요소 중 title이라는 데이터를 화면에 그려주고 있다. 이러한 상태에서 개발 서버를..

• format_list_bulleted Stack/REACT
• · 2023. 9. 14.
• textsms