React48

• 

  [React]Element 크기 조절을 감지하는 방법 개요 일반적으로 웹 페이지를 제작할 때, Element의 크기를 사용하는 기기(PC, 태블릿, 모바일)에 따라 설정하고 크기를 조절할 수 없도록 개발하지만 반대로 사용자가 컴포넌트의 크기를 조절할 수 있도록 개발하는 경우도 존재한다. 컴포넌트의 크기를 변경할 수 있는 경우 크기가 변경되었는지 감지해야 하는 상황이 존재한다. 예를 들어, 특정 컴포넌트가 DOM에 마운트(mount) 되었는데 textarea의 크기를 변경하는 경우 특정 컴포넌트를 언마운트(unmount) 해야 한다고 가정하자. 이러한 경우 textarea의 크기가 변경되면 특정 state의 값을 변경해서 특정 컴포넌트를 언마운트하는 코드를 작성해야 한다. 하지만, textarea에는 resize라는 이벤트가 존재하지 않기에 textarea의.. React/React 문법 2023. 1. 9.

• 

  [React]새로운 탭 띄우는 방법 새로운 탭 띄우는 방법 이번 포스팅은 React에서 외부 링크를 띄우는 방법을 소개합니다. a 태그를 활용하여 새로운 탭 띄우기 첫 번째 방법으로 HTML의 기본 요소인 태그를 사용할 수 있습니다. 태그의 href 속성에 외부 링크를 설정하고 target 속성에는 "_brank"를 설정합니다. 마지막으로 rel 속성에는 "noopener noreferrer"를 설정합니다. export default function App() { return ( Naver 이동 ); } target 속성을 "_blank"로 설정하면 외부 링크가 새로운 탭에서 활성화됩니다. rel 속성의 noopener는 현재 활성화된 페이지와 새로운 탭에서 활성화되는 페이지를 별개의 프로세스로 취급합니다. noreferrer는 현재 활성.. React/기타 2022. 12. 5.

• 

  [React]동일한 파일 업로드 구현 React에서 동일한 파일 업로드 구현 React에서 파일 업로드 구현하는 방법은 아래 포스팅에서 소개했으나 회사 프로젝트에서 파일 업로드를 구현하는 과정에서 한 가지 문제가 발생했습니다. 이번 포스팅에서 설명하는 소스 코드가 이해되지 않는다면 아래 포스팅을 꼭 읽어주세요. [React]파일 업로드 구현 파일 업로드 버튼을 외부 라이브러리에서 제공하는 버튼 컴포넌트를 사용하고 싶은데 해당 라이브러리에서 파일 업로드 기능을 지원하지 않을 수 있습니다. 외부 라이브러리 대신 input 태그를 developer-talk.tistory.com 동일한 파일을 업로드하는 경우 input 태그의 onChange 이벤트 핸들러 함수가 정상적으로 동작하지 않는 문제였는데요. 웹 브라우저에서 버튼을 클릭하면 위 사진처럼 .. React/React 문법 2022. 7. 27.

• 

  [React]파일 업로드 구현 파일 업로드 구현 파일 업로드 버튼을 외부 라이브러리에서 제공하는 버튼 컴포넌트를 사용하고 싶은데 해당 라이브러리에서 파일 업로드 기능을 지원하지 않을 수 있습니다. 외부 라이브러리 대신 input 태그를 사용하면 파일 업로드 기능을 사용할 수 있지만 디자인이 마음에 들지 않습니다. 디자인 때문에 컴포넌트를 제작하기에는 얼마만큼의 시간이 소모될지 모릅니다. 하지만, DOM 엘리먼트를 접근할 수 있는 Ref를 활용한다면 외부 라이브러리의 버튼 컴포넌트를 사용하여 파일 업로드 기능을 구현할 수 있습니다. 이번 포스팅은 외부 라이브러리에서 제공하는 버튼 컴포넌트에서 파일 업로드 기능을 사용할 수 있는 방법을 소개합니다. JavaScript 파일 업로드 JavaScript에서 파일 업로드를 구현해야 하는 경우 .. React/React 문법 2022. 7. 11.

• 

  [React]Electron에 React 적용 #2. 파일 업로드 이번 포스팅은 Electron에 React를 적용하여 파일 업로드하는 방법을 소개합니다. 다음은 예제에 사용될 폴더 구조입니다. FileUpload 폴더가 존재하며, FileUpload에는 A, B 폴더 그리고 MainImage.jpeg 파일이 존재합니다. A 폴더에는 AA 폴더 그리고 AImage.jpeg 파일이 존재합니다. AA 폴더는 빈 폴더입니다. B 폴더에는 BImage.jpge 파일이 존재합니다. 목차 기존 JavaScript 파일 업로드의 문제점 Electron 폴더 업로드 선택한 폴더의 하위 파일 또는 폴더 참고자료 기존 JavaScript 파일 업로드의 문제점 기존 JavaScript의 파일 업로드는 input 태그에 type='file'로 설정하여 파일 업로드를 구현할 수 있습니다. 하.. React/Electron 2022. 1. 31.

• 

  [React]Electron에 React 적용 #1. 환경설정 및 배포 Electron이란? Electron은 OS 제약이 없으며 데스크톱에서 사용 가능한 JavaScript 기반의 응용 프로그램입니다. 단순하게 설명하자면, 웹을 응용 프로그램처럼 사용하는 개념입니다. JavaScript 기반이므로 Augular, React, jQuery, Vue 등 개발자가 원하는 웹 프레임워크를 사용할 수 있으며, JavaScript와 Node에 익숙하다면 쉽게 개발할 수 있습니다. Electron의 장점 부트스트랩을 사용할 수 있으므로 Java Swing, C# WFT와 Winform에 비해 큰 공수를 들이지 않아도 됩니다. 특정 OS에 종속되지 않습니다. JavaScript, Node에 익숙하다면 접근하기 쉽습니다. Electron의 단점 응용 프로그램이 무겁습니다.(RAM과 CPU.. React/Electron 2022. 1. 28.

• 

  [React]React Hook에서 Throttle, Debounce 사용 이번 포스팅에서는 React Hook에서 Throttle, Debounce를 사용하는 방법을 소개합니다. 목차 Throttle와 Debounce Lodash의 Throttle 함수 사용 Throttle 함수가 저장된 useCallback Hook 사용 Debounce 함수 Throttle와 Debounce Throttle 스로틀링(Throttling)은 함수가 지정된 시간 동안 최대 한 번 호출되도록 하는 프로그래밍 방법입니다. 스로틀링은 함수를 호출할 수 있는 최대 횟수를 조절합니다. Ex) 10초마다 함수를 최대 한 번 호출 Debounce 디바운싱(Debouncing)은 시간이 많이 걸리는 작업이 자주 실행되지 않도록 사용되는 프로그래밍 방법입니다. 디바운싱은 함수가 실행되기 전에 일정 시간을 대기.. React/React 문법 2021. 11. 30.

• 

  [React]React Hook setState에 함수 전달 이번 포스팅에서는 React Hook을 사용한 함수형 컴포넌트에서 setState에 함수를 전달했을 경우 동작하는 방법을 소개합니다. 목차 setState에 함수가 아닌 값을 전달 언제 setState에 함수를 전달해야하는가? setState에 함수를 전달하는 예제 및 내용 setState에 함수가 아닌 값을 전달 React Hook에서는 useState()를 사용하여 state의 값을 초기화합니다. const [state, setState] = useState(initialValue); 그리고 특정 이벤트 또는 로직에 의해 setState()에 원하는 값을 인수로 전달하여 state의 값을 갱신할 수 있습니다. handleClick = () => { setState(newState); } React H.. React/React 문법 2021. 11. 22.

• 

  [React]useEffect Hook에서 async await를 사용하여 API 호출 이번 포스팅에서는 useEffect Hook에서 async await를 사용하여 API 호출하는 방법을 소개합니다. 아래는 CodeSandBox에서 구현한 데모입니다. 데모 : https://codesandbox.io/s/useeffect-async-await-zpc0z 목차 useEffect Hook에서 async-await 함수 정의 이슈 경고 분석 해결 방법 useEffect Hook에서 asnyc-await 함수 정의 이슈 순서 1. 우선, promise 구문을 사용한 코드입니다. 10개의 post 정보를 가져오기 위해 useEffect Hook에서 API 호출을 수행합니다. useEffect(() => { axios .get("https://jsonplaceholder.typicode.com/p.. React/React 문법 2021. 11. 18.

• 

  [React]Debounce 함수 구현 및 사용 이번 포스팅에서는 React에서 Debounce 기법을 사용한 함수를 구현하는 방법을 소개합니다. 목차 Debounce란? Debounce 함수 사용 함수형 컴포넌트에서 Debounce 함수 사용 Debounce란? Debounce은 함수를 여러 번 호출하고 마지막 호출에서 일정 시간이 지난 후 해당 함수의 기능이 동작하는 기법입니다. Debounce를 사용하는 경우 Debounce 기법은 검색창에서 자동 완성을 구현해야 하는 경우 또는 마우스를 빠르게 여러 번 클릭했을 때, 마지막 클릭에서 기능이 동작해야 하는 경우 사용할 수 있습니다. 네이버처럼 자동 완성 기능이 있는 검색창을 구현해야 한다고 가정합니다. 검색 키워드에 대한 자동완성 리스트를 보여주기 위해서는 키워드를 입력할 때마다 API 요청을 해.. React/React 문법 2021. 11. 15.

• 

  [React]객체 배열에서 값 변경 이번 포스팅에서는 React에서 객체의 배열을 가지는 state 값을 변경하는 방법을 소개합니다. 다음과 같이 객체의 배열(objArray)을 가지는 state가 있다고 가정합니다. state = { objArray: [ { code: "", name: "", key: "key_empty" }, { code: "A", name: "A", key: "key_A" }, { code: "B", name: "B", key: "key_B" }, { code: "C", name: "C", key: "key_C" } ] } 그리고 code가 "B"인 name의 값을 "Update"로 변경해야 합니다. 순서 1. 배열의 요소 찾기 먼저 객체의 배열에서 키, ID, 코드처럼 유일한 값이라고 생각되는 속성을 기준으로 요소.. React/React 문법 2021. 11. 9.

• 

  [React]고차 함수 정의 및 React 고차 컴포넌트(HOC) 이번 포스팅에서는 고차 함수와 React 기술 중 하나인 고차 컴포넌트를 소개합니다. 목차 고차 함수 정의 고차 컴포넌트(HOC) 고차 함수(HOF) 정의 고차 함수는 아래 두 가지 조건에서 한 가지 조건 또는 모든 조건을 만족하는 함수입니다. 함수를 반환하거나 함수를 인수로 하거나 자바스크립트에는 다양한 고차 함수를 지원하는데, 배열에서 사용 가능한 map, filter, sort, reduce 함수가 있습니다. Array.prototype.map() 다음 코드는 배열 numArray을 map 함수를 사용하여 새로운 배열을 생성합니다. var numArray = [100, 200, 300, 400]; var mapArray = numArray.map(num => num / 2); console.log(.. React/React 문법 2021. 11. 3.