[React]useState 비동기(+동기처리 방법)

useState를 사용하면서 내가 의도한대로 값이 변경되지 않는 경우가 종종 있었다.state의 값이 변경되기 전에 값을 가져와서 사용했기 때문에 일어난 일이다. useState는 비동기로 동작한다.정확히 말하자면 useState의 setState가 비동기로 동작하는 것이다.import React, { useState } from "react";const App = () => { const [num, setNum] = useState(0); const increaseNum = () => { setNum(num + 1); setNum(num + 1); setNum(num + 1); console.log(num); }; return ( {num} +3 ..

• format_list_bulleted React
• · 2024. 5. 21.
• textsms

[React]react-rnd로 이미지 크기 조절 및 드래그

이미지의 크기를 조절하고 드래그하는 기능을 구현하기 위해서 react-rnd 라이브러리를 사용했다.https://www.npmjs.com/package/react-rnd react-rndA draggable and resizable React Component. Latest version: 10.4.10, last published: 23 days ago. Start using react-rnd in your project by running `npm i react-rnd`. There are 416 other projects in the npm registry using react-rnd.www.npmjs.com 구현해야 했던 기능으로는1. 이미지 드래그 (+ 드래그 바운더리 지정)2. 이미지 크기 조..

• format_list_bulleted React
• · 2024. 5. 15.
• textsms

[React]axios multiple request(request 여러 개 요청하기)

프로젝트를 진행하면서 하나의 api를 여러 번 호출해서 결과를 한 번에 받고 싶었다.getKeywordPhotos는 키워드 별로 저장된 사진을 가져오는 api이다.키워드가 한 개가 아니라 여러 개이기 때문에 요청을 여러 번 보내야한다.키워드마다 한 번씩 요청 하는 것보다 한 번에 요청하는게 더 효율적인 방법이라 생각해서 구글링을 해보았고axios multiple request라는 것이 따로 있다는 걸 알아냈다! //키워드 별 사진 가져오기 const getPhoto = async (keywords, page, pageSize) => { try { const requests = keywords.map((keyword) => { return DiaryController.getKeywordP..

• format_list_bulleted React
• · 2024. 4. 30.
• textsms

[React]onFocus, onBlur

Todo 프로젝트에서 Todo 항목마다 네모 박스를 누르면 드롭다운 메뉴가 나타나는 기능을 구현하고 있었다. 메인화면에 Todo 리스트가 있고, 리스트마다 네모 박스를 누르면 드롭다운 메뉴가 뜨도록 해뒀다. 드롭다운 메뉴가 화면에 하나만 뜨도록 하고 싶었는데 여러 개가 뜨는 문제가 생겼다. 이걸 어떻게 해야하나 고민하고 있던 와중에 onBlur 이벤트를 발견했다! onBlur와 onFoucs가 세트(?)로 알아야하는 개념인 것 같아서 둘 다 정리해보자~! onFocus 해당 함수를 달아놓은 엘리먼트에 포커스가 됐을 때 호출된다. onBlur 해당 함수를 달아놓은 엘리먼트에 포커스가 사라졌을 때 호출된다. 적용 onBlur 이벤트에 드롭다운을 닫는 함수를 등록해서 드롭다운에 포커스가 사라지면 드롭다운이 닫..

• format_list_bulleted React
• · 2024. 4. 17.
• textsms

[React]React 프로젝트 폰트 변경하기(눈누)

프로젝트를 진행하는데 폰트를 바꾸면 더 예쁘겠다!라는 생각이 들어서 팀원들과 상의 후에 폰트를 바꾸기로 결정했다. 적용할 폰트는 이사만루 !! https://noonnu.cc/font_page/463 눈누 이사만루 - 공게임즈 X 폰트릭스 noonnu.cc 깔끔하고 글씨 변형이 없는 폰트를 원해서 이걸로 채택했다. 적용 방법 위의 링크를 타고 들어가서 폰트를 다운 받아준다. src/font 폴더를 하나 만들어서 그 안에 저장해준다. 폰트 두께에 따라 light, medium, bold가 존재하는데 나는 하나만 저장해서 사용했다. 코드 수정 그리고 전체 적용을 해주기 위해서 index.css에서 적용해주었다. @tailwind base; @tailwind components; @tailwind utilit..

• format_list_bulleted React
• · 2024. 3. 30.
• textsms

[React] 상태관리 라이브러리 Recoil

⭐️ Redux? Recoil? Recoil에 대해 설명하기 전, 나는 Redux를 사용했던 경험이 있다. Redux가 React 상태관리 라이브러리 중 가장 유명하다 생각했고 다른 사람들이 많이 사용하는데 이유가 있겠지! 싶어서 사용했었다. 처음 사용해보니 초기세팅하기 위해 공부가 어려웠다.. 그 후, 사이드 프로젝트를 진행하게 되었는데 Recoil에 대해 알게되었다. 더 간단하고 소규모 프로젝트에는 Recoil이 적합하다는 이야기를 듣고 Recoil을 사용하기로 결심했다! 그리고 페이스북에서 만들어서 리액트와 호환성도 좋다고 한다. ⭐️ Recoil 설치 npm install recoil or yarn add recoil 위의 명령어로 설치하고 루트 컴포넌트를 RecoilRoot로 감싸주면 사용할 준..

• format_list_bulleted React
• · 2024. 3. 29.
• textsms