본문 바로가기

React

 (7)
[React] useEffect에서 비동기(async/await) 함수 처리 안녕하세요. 이번 글에서는 useEffect에서 async await 함수를 사용하는 법을 알아 보겠습니다. 일반적으로 client 측에서는 fetch나 recoil을 활용해서 서버로부터 데이터를 가져와 app에 출력해주게 됩니다. 그리고 일반적으로 fetch 등을 이용 할 때는 비동기 처리를 위래 async/await를 활용하게 됩니다. 이러한 작업들을 React에서는 mount 될 때 실행되는 useEffect를 사용하여 진행하게 되는데 useEffect에서 일반적인 비동기 함수를 선언하는 방식으로 useEffect의 첫번째 인자인 함수에 async/await를 사용하게되면 애러를 발생하게 됩니다. //잘못된 코드 useEffect(async () => { let res = await fetch('h..
[React] infinite scroll(무한 스크롤) 구현 - Intersection Observer 안녕하세요 이번 포스팅에는 Intersection Observer에 대한 설명과 Intersection Observer를 활용한 무한스크롤 구현 방법에 대해 알아보겠습니다. 지난 글에서 scroll handler를 활용해서 무한스크롤을 구현 했었는데 그 코드를 기반으로 scroll handler 부분을 intersection Observer로 바꿔보도록 하겠습니다. 1. Intersection Observer란? Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. - MDN 위의 설명은 MDN에 나와있는 Intersection Observer에 대한 설명입니다...
[React] infinite scroll(무한 스크롤) 구현 - scroll event 오늘은 다양한 서비스에서 리스트를 보여줄 때 흔히 사용되는 무한 스크롤을 구현해보도록 하겠습니다. 무한스크롤은 불러올 데이터가 많을 때, 서비스에 부담이 되지 않을만큼 먼저 불러오고 스크롤을 하단으로 내릴때마다 추가로 불러와서 출력해주는 기능을 의미합니다. 먼저 예제코드를 보시겠습니다. 1. 예제 코드 예제코드에서는 총 표시할 아이템의 수를 입력하면 스크롤을 하단으로 내릴 때마다 5개씩 끊어서 보여주는 코드 입니다. Home.js import styles from '@/styles/Home.module.css' import React, { useEffect, useState } from 'react' export default function Home() { const [input, setInput] =..
[React] useMemo 사용법 및 예제, 변수 재사용 - react hook 안녕하세요. 오늘은 useMemo를 활용하여 렌더링 시 변수를 재 사용함으로써 app의 성능을 향상 시킬 수 있는 방법을 알아보도록 하겠습니다. 먼저 예제 코드를 통해 문제 발생을 시켜보겠습니다. index.js import styles from '@/styles/Home.module.css' import React, { useEffect, useRef, useState } from 'react' import HorizontalScroll from '../components/HorizontalScroll/HorizontalScroll' export default function Home() { const [input, setInput] = useState(0) const onInputChange= (e)..
[React] 웹에서 가로 터치 스크롤 만들기-컴포넌트 만들기(2/2) 이전글 : https://challeee.tistory.com/14 [React] 웹에서 가로 터치 스크롤 만들기(1/2) React 웹 환경에서 세로 스크롤은 스크롤바 말고도 마우스 휠로 화면을 스크롤 할 수 있어서 불편함이 없지만 가로 스크롤의 경우 스크롤바로 스크롤 하는게 편하지는 않습니다. 그래서 모바일 challeee.tistory.com 이전 글에서 모바일 환경처럼 터치 드래그로 스크롤 할 수 있는 기능을 구현하였습니다. 가로 스크롤은 아주 흔하게 사용되는 기능 중 하나이기때문에 우리는 이 기능을 컴포넌트로 만들어서 여러 페이지에서 사용할 수 있게 만들겁니다. 추가로 드래그 시 클릭이벤트가 발생 되는 문제를 해결하겠습니다. 1. HorizontalScroll 컴포넌트 생성 먼저 프로젝트에 컴포..
[React] 웹에서 가로 터치 스크롤 만들기(1/2) React 웹 환경에서 세로 스크롤은 스크롤바 말고도 마우스 휠로 화면을 스크롤 할 수 있어서 불편함이 없지만 가로 스크롤의 경우 스크롤바로 스크롤 하는게 편하지는 않습니다. 그래서 모바일 환경에서 처럼 마우스 클릭 후 드레그로 좌우 스크롤이 가능 하도록 구현 해 보도록 하겠습니다. 1. 기본 화면 구성 먼저 스크롤 기능을 적용할 페이지를 만들어 보도록 하겠습니다. index.js import styles from '@/styles/Home.module.css' import React, { useEffect} from 'react' export default function Home() { const list = ["1번","2번","3번","4번","5번","6번","7번","8번","9번","10번"..
React를 해야 하는 이유, 특징 및 장단점 React란? React는 전 세계적으로 가장 많이 사용되고 있는 프론트엔드 프레임워크 중의 하나로 Facebook에서 개발한 JavaScript 라이브러리로서, 웹 개발에서 UI(User Interface)를 만들기 위한 도구이다. React는 다른 프레임워크와는 다르게, Virtual DOM 기술을 이용해 UI를 구성하고, 이벤트 처리 및 상태 관리를 위한 강력한 도구들을 제공한다. React의 특징 1. Virtual DOM : DOM은 문서 객체 모델(Document Oject Model)의 약자로 쉽게 설명하자면 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. React는 UI를 가상의 DOM으로 만들어 놓고 변경된 부분만 실제 DOM에 반영한다. 이는 React를 설명하는데 가..

티스토리툴바