React/React 문법34

• 

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

• 

  [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]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.

• 

  [React]div 외부 클릭을 감지 Hook으로 구현 이번 포스팅에서는 Hook에서 div 외부 클릭을 감지하는 방법을 소개합니다. 이전에 컴포넌트 외부 클릭을 감지하는 방법에 대해 해당 포스팅에서 소개하였지만, 클래스 컴포넌트 위주의 설명이었고 커스텀 훅을 사용하지 않았기 때문에 이번에는 커스텀 훅 기반으로 구현합니다. 목차 드롭다운 생성 div 외부 클릭 감지 커스텀 훅으로 구현 드롭다운 생성 드롭다운에 매핑되는 객체의 배열을 작성합니다. const objList = [ { 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" }.. React/React 문법 2021. 11. 2.

• 

  [React]TypeScript기반 Type Alias vs interface 이번 포스팅에서는 TypeScript 기반의 React 애플리케이션을 개발할 때, Type을 정의하는 방법을 설명합니다. JavaScript는 다른 프로그래밍 언어와는 다르게 변수 또는 객체를 생성할 때, 타입을 정의하지 않습니다. var arr = {}; // 타입 변환 전 console.log(typeof arr); // object arr = 5; // 객체를 number타입으로 변환 // 타입 변환 후 console.log(typeof arr); // number var, let, const 키워드를 사용하여 변수 또는 객체를 생성하므로 타입 변환이 자유롭다는 장점이 있지만, 다음과 같은 단점도 존재합니다. [JavaScript의 단점] - 타입을 유추하기 어렵습니다. - 애플리케이션이 동작할 때.. React/React 문법 2021. 10. 22.

• 

  [React]props.children에 props 전달 이번 포스팅에서는 props.children에 데이터를 전달하는 방법을 소개합니다. React에서 props는 읽기 전용이므로 수정이 불가능하며, 마찬가지로 props.children도 수정할 수 없습니다. 만약, props.children을 수정하고 싶다면, Reac.cloneElement 함수를 사용하여 자식 컴포넌트를 복제 후 수정하거나 React.Children.toArray 또는 React.Children.map 함수를 사용하여 새로운 배열을 생성 후 수정할 수 있습니다. 그럼 하나씩 살펴보도록 하겠습니다. 목차 React 엘리먼트를 복제하는 React.cloneElement 함수 props.children복제 props.children 조작 React 엘리먼트를 복제하는 React.clone.. React/React 문법 2021. 10. 20.