React16 브라우저의 스크롤 위치 계산하기, 스크롤을 따라 늘어나는 곡선 그리기 현재 내 스크롤의 위치가 전체 문서의 몇 퍼센트에 위치해 있는지 알기 위해서는 브라우저의 scrollY, scrollHeight, clientHeight 프로퍼티를 사용한다. scrollHeight 브라우저 안에 표시되는 문서의 총 길이(픽셀, 숨겨진 요소 포함)를 나타냅니다. clientHeight 현재 브라우저에 표시되는(Viewport의) 문서의 길이(픽셀, 숨겨진 요소 제외)를 나타냅니다. scrollY 스크롤의 현재 위치를 픽셀값으로 나타냅니다. 문서가 위나 아래로 전혀 움직이지 않은 상태면 0을 반환합니다. 스크롤을 아래로 내릴수록 출력값도 양의 값으로 증가합니다. 픽셀 단위의 값을 출력하기 때문에 대부분 정수 값을 반환하지만, 최신 브라우저에서 높은 정밀도로 렌더링한 경우 소숫값을 반환할 수.. 2022. 4. 16. React Context API를 사용해 전역 데이터 관리 상위 컴포넌트에서 하위의 여러 컴포넌트에게 동일한 데이터를 보내야 할 때가 있습니다. 흔한 예시로 UI 테마, 로그인 데이터, 시간이나 날씨 등이 있습니다. React는 최상단 컴포넌트에서 최하위 컴포넌트까지 필요한 데이터를 보낼 때 중간의 모든 컴포넌트를 거쳐 전달해야하기 때문에 이런 작업은 번거로울 수 있습니다. 위와 같은 상황을 쉽게 해결하기 위해 Redux를 사용하는 방법도 있지만 React에서는 Context API라는 전역 데이터 관리 방법을 기본적으로 제공하고 있습니다. Context API를 사용한 코드 작성해보기 먼저 context.js라는 파일을 생성합니다. 이제부터 context.js 파일에서 전역으로 사용할 모든 데이터를 관리합니다. React에서 createContext 메소드를 .. 2022. 4. 8. IntersectionObserver API를 사용한 React 이미지 지연 로딩 지연 로딩이란? 브라우저는 로드되는 시점에서 필요한 html, js, css, 이미지 등 기타 자원들을 모두 다운로드 받아옵니다. 그리고 이들을 사용해 전체적인 웹페이지의 레이아웃을 그려내는데요, 하지만 굳이 화면에 보이지 않는 이미지(스크롤 바를 내려야 보이는 이미지)를 처음부터 모두 로드하는 것은 시간과 자원의 낭비가 아닐까요? 지연 로딩(Lazy Loading)이란, 사용자의 실제 화면(View Port)에 보이지 않는 자원들(대표적으로 이미지)를 필요한 시점까지 로드하지 않는 것을 말합니다. 지연 로딩을 사용하는 법은 여러가지가 있고 적용할 수 있는 대상도 다양하지만 여기서는 IntersectionObserver API를 사용해 이미지를 지연 로드해 보겠습니다. IntersectionObserve.. 2022. 2. 24. React Suspense를 사용해 비동기적으로 컴포넌트 로드하기 / React Lazy로 코드 분할하기 React Suspense란 무엇인가? React Suspense는 컴포넌트가 외부 소스에서 추가 데이터를 로드할 때(대표적으로 AJAX를 통해 유저 정보를 받아온다던지) 컴포넌트가 렌더링을 일시 중단할 수 있게 하는 것입니다. 데이터 로드가 끝났을 때 React는 다시 컴포넌트 렌더링을 시도합니다. React Suspense의 장점 1. 코드 분할을 통항 효율적인 렌더링 2. 쉬운 에러 처리, 코드의 단순화 코드 분할을 통한 효율적인 렌더링이란? 번들링은 html, js, css 등의 파일을 묶고 중복된 데이터를 없애 서버 자원의 효율적인 활용을 가능하게 합니다. 하지만 앱의 용량이 커질수록 번들링도 커지게 되고 초기 로딩이 느려지는 단점을 가지고 있습니다. 코드 분할이란 이 번들을 여러개로 쪼개 필요.. 2022. 2. 24. HTML5 Drag and Drop API을 사용한 드래그 앤 드롭 기능 개요 기존의 마크업 언어를 사용해 드래그 앤 드롭과 관련된 기능을 구현하려면 외부 플러그인을 사용하거나 다른 이벤트 핸들러를 사용해 드래그 앤 드롭 기능을 비슷하게 흉내내는 방법을 사용했으나 HTML5에서 Drag and Drop API를 지원하게 되면서 다양한 드래그 앤 드롭 이벤트 핸들러가 추가되었고 이들을 사용해서 드래그해서 업로드, 드래그해서 객체를 이동하는 행위들을 쉽게 구현할 수 있게 되었다. 먼저 드래그 앤 드롭 기능을 사용하기 위해서는 DOM 객체에 draggable 속성을 추가해야 한다. 드래그하세요 이제 이 객체는 마우스로 드래그할 수 있게 되었다. 이제 이를 이용해 다양한 기능을 구현하기 위해서 다음의 이벤트 핸들러들을 사용한다. 1. dragstart(react에서는 onDragSt.. 2021. 12. 23. React 드래그한 DOM 객체를 보이지 않게 하기 아래와 같은 DOM 객체를 만들고 드래그 하세요 아래와 같이 드래그하면 마우스 커서에 원래 이미지가 드래그된 상태로 생성되고 원래의 이미지는 그대로 남아있게 된다. 나는 드래그를 시작하면 원래의 이미지는 보이지 않게 하고 싶었고 이에 구글에서 몇가지 방법을 찾을 수 있었다. 첫번째 방법 setTimeout()으로 원래 이미지의 display 또는 opacity, visibility 속성을 변경하기 두번째 방법 transform으로 원래의 이미지를 보이지 않는 곳으로 옮기기 첫번째 방법과 두번째 방법의 코드 https://codesandbox.io/s/remove-dragging-element-1-su2td 더보기 import "./styles.css"; export default function App(.. 2021. 12. 23. React DOM 엘리먼트 내부의 마우스 상대좌표 구하기 일부 이벤트 객체에는 이벤트가 발생한 객체 안의 마우스의 커서의 좌표를 나타내는 프로퍼티가 있다. 예를 들어 onMouseOver와 같은 이벤트 객체에서 접근해보면 알 수 있다. event.offsetX (또는 event.nativeEvent.offsetX) event.offsetY (또는 event.nativeEvent.offsetY) 단, 리액트의 이벤트 핸들러(Event Handler)는 가상의 이벤트 핸들러(Synthetic Event Handler)로서 원래의 이벤트 핸들러(Native Event Handler)에 존재하는 offsetX, offsetY 등의 프로퍼티가 존재하지 않는다. 따라서 offsetX, offsetY 값을 불러오기 위해서는 event.nativeEvent를 사용해 원래의 .. 2021. 12. 22. 드래그(Drag)관련 이벤트 핸들러 정리 해당 DOM 객체를 드래그 할 수 있게 변경 draggable="true" 드래그를 시작했을 때 실행 onDragStart 드래그가 종료되었을 경우 실행 onDragEnd 드래그 중일 경우 실행 onDrag 드래그를 시작하고 마우스 커서가 특정 DOM 엘리먼트 위에 올라갔을 때 1회 실행 onDragEnter 드래그를 시작하고 마우스 커서가 특정 DOM 엘리먼트 위에서 벗어났을 경우 실행 onDragLeave 드래그를 시작하고 마우스 커서가 특정 DOM 엘리먼트 위에 올라갔을 경우 계속 실행 onDragOver 테스트용 코드 const draggable = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]; export default function A.. 2021. 12. 18. 리액트 useEffect Hook useEffect Hook은 컴포넌트의 라이프 사이클에 맞춰 작동합니다. 따라서 useEffect Hook을 사용하기 위해서는 리액트 컴포넌트의 라이프 사이클에 대한 이해가 필요합니다. 라이프 사이클이란 마운트, 업데이트, 언마운트의 세가지 과정을 말합니다. 이 라이프 사이클의 세가지 과정은 예전 클래스 컴포넌트의 ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount과 같은 의미입니다. 즉 useEffect는 컴포넌트의 마운트, 업데이트, 언마운트의 세가지 과정에 관여해서 작동합니다. useEffect(() => { // 1. 마운트 return () => { // 2. 언마운트 } }, [// 3. 업데이트]) 컴포넌트가 일단 마운트되면 첫번째 주석.. 2021. 11. 30. React Custom Hook을 사용한 함수 컴포넌트 강제 업데이트 여러 컴포넌트에서 재활용하고 싶은 로직이 있어서 컴포넌트의 바깥에 그 로직을 선언했는데 만약 그 로직이 useState, useRef, useMemo 등의 React Hook을 사용한다면 useState, useRef, useMemo 등의 React Hook은 오직 React 컴포넌트 안에서 선언되고 사용되어야 한다는 원칙에 따라 Hooks can only be called inside of the body of a function component라는 에러를 발생시킨다. 이럴 경우 React Custom Hook을 사용하면 된다. 선언 방식은 일반적인 함수와 동일하게 하면 되고 단지 함수 이름의 앞에 use라는 키워드를 붙여주면 된다. 이런 방식으로 함수 컴포넌트에서 강제 업데이트를 시켜주는 Custo.. 2021. 11. 29. 이전 1 2 다음
