전체 글30 React) input type file에서 같은 파일 선택에도 onChange 작동시키기 React에서 input 태그에서 같은 파일을 선택했을 때 onChange 이벤트 핸들러가 호출되지 않는 문제는 기본적으로 브라우저에서 발생하는 이슈입니다. 그러나 React에서도 이 문제를 해결할 수 있는 방법이 있습니다. 이를 위해서는 input 태그의 key 속성을 변경해주는 것입니다. key 속성은 컴포넌트의 렌더링을 제어하는 속성으로, 이를 변경하면 컴포넌트를 다시 렌더링할 수 있습니다. 따라서, 같은 파일을 선택하더라도 key 속성을 변경하여 컴포넌트를 다시 렌더링하도록 만들어주면 onChange 이벤트 핸들러가 호출될 수 있습니다. import React, { useState } from 'react'; function FileUploader() { const [selectedFile, se.. 2023. 3. 31. React) kakao map 객체 Redux로 관리 & 거리 재기 기능 추가 소스코드 : https://github.com/junsungc/mybus/releases/tag/v0.2 변경점 1. map 객체와 위도/경도 정보를 redux로 관리하면 앞으로 편할것같아서 react-redux를 도입하였다. 2. 거리 재기 기능 api가 탐이나서 가져와 적용해보았다. import React, { useEffect, useState, useRef } from "react" import { useSelector, useDispatch } from 'react-redux'; const { kakao } = window const Map = () => { const locationValue = useSelector(state => state.location); const currentMap .. 2023. 3. 25. React) Kakao map 연동 및 현재 위치 가져오기 https://github.com/junsungc/mybus/releases/tag/v0.1 Release v0.1 · junsungc/mybus 카카오맵 api 연동 & 현재 위치 연동 github.com 소스코드는 위 링크에서 받을 수 있다. 결과물) 접속하면 위치 정보 승인 여부를 브라우저에서 묻고, 승낙시 현재위치정보를, 거부시 기본 설정한 위치정보를 가져온다. import React, { useEffect, useState } from "react" const { kakao } = window const Map = () => { useEffect(() => { (async () => { const location = await getUserLocation(); const container = d.. 2023. 3. 25. React-Redux) useSelector 사용 방법과 connect 차이점 React Redux에서 useSelector 훅을 사용하면 connect 함수를 사용하지 않고도 스토어의 상태를 컴포넌트에 연결할 수 있습니다. useSelector 훅은 React 컴포넌트에서 Redux 스토어의 상태를 선택하는 데 사용됩니다. 사용법은 다음과 같습니다. import { useSelector } from 'react-redux'; function MyComponent() { const myValue = useSelector(state => state.myValue); // ... } useSelector 함수는 스토어의 상태에서 필요한 값을 선택하기 위해 사용됩니다. 이전의 mapStateToProps 함수와 비슷한 역할을 합니다. useSelector 함수의 인자로 전달되는 함수는 .. 2023. 3. 25. React Redux 설치 및 사용 방법 React Redux 패키지 설치하기 React Redux를 사용하려면 먼저 npm을 사용하여 React Redux 패키지를 설치해야 합니다. $ npm install react-redux Redux 패키지 설치하기 React Redux는 Redux 라이브러리를 사용합니다. 따라서 Redux 패키지도 설치해야 합니다. $ npm install redux React Redux를 사용하는 방법은 다음과 같습니다. Provider 컴포넌트로 앱 감싸기 React Redux에서 제공하는 Provider 컴포넌트로 앱 전체를 감싸야 합니다. 이 컴포넌트는 Redux 스토어를 앱에 제공합니다. import { Provider } from 'react-redux'; import { createStore } from .. 2023. 3. 25. [IntelliJ, VSCode] 자동정렬 단축키 정 [IntelliJ] 자동정렬 단축키는 Ctrl + Alt + L이다. 선택적으로 정렬하려면 코드 드래그 후 Ctrl + Alt + L [VSCode] 자동정렬 단축키는 Alt + Shift + F 선택적으로 정렬하려면 코드 드래그 후 Ctrl + K, Ctrl + F 연속으로 입력 2023. 3. 23. 이전 1 2 3 4 5 다음
