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] useEffect 완전 사용법 1탄, 예제 코드 - React hook 1. useEffect란? useEfftect는 컴포넌트가 렌더링 된 후에 특정 작업을 수행 할 수 있도록 하는 hook 입니다. 여기서 말하는 특정 작업을 side effect라고 하는데 이러한 side effect에는 단순한 변수 설정 뿐만 아니라 api 호출과 같은 비동기적인 처리를 포함합니다. 이러한 기능은 컴포넌트의 생명주기에 관한 메서드를 함수형 컴포넌트에서 사용 할 수 있게 해줍니다. 컴포넌트 생명주기에는 기본적으로 3단계가 존재합니다. ComponentDidMount : 컴포넌트가 생성 될 때, 렌더링 완료 시 실행 ComponentDidUpdate : 컴포넌트의 생성이 완료 된 후 update 되었을 때 실행 ComponentWillUnmount : 컴포넌트가 제거되기 직전에 실행 2. .. [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를 해야 하는 이유, 특징 및 장단점 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를 설명하는데 가.. 프론트엔드 프레임워크를 사용해야 하는 이유 프레임워크란 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조 며, 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다 나무위키 프론트 프레임워크의 장점 프론트 엔드의 개발은 사실 프레임워크가 아니더라도 HTML이나 CSS, javascript 만으로도 충분히 원하는 결과물을 만들어 낼 수 있다. 처음 시작하는 개발자의 경우 안그래도 익혀야 할 언어나 개념들이나 스킬들이 많은데 굳이 다양한 프론트엔드 프레임워크를 사용해야 하는가에 대해 의구심이 들 수 있다. 하지만 프레임워크를 한번 익혀본다면 왜 프레임워크를 사용해야 하는지 바로 알 수 있을 것이다 사실 프론트엔드 프레임워크의 사용 이유는 대표적인 프레임워크중 하나인 React 공식 사이트에서 정확히 명시해 주고 있다. React는 .. 이전 1 다음
