React11 리액트의 useMemo: 성능 최적화(연산 결과 재사용) 소개 리액트에서 성능 최적화는 항상 중요한 고려 사항 중 하나입니다. 이에 따라 useMemo 훅이 등장했는데, 이 글에서는 useMemo의 기본적인 개념부터 사용법과 성능 최적화에 대해 간단히 알아보겠습니다. 1. useMemo란? useMemo는 리액트 훅 중 하나로, 계산 비용이 많이 드는 함수의 결과 값을 기억(메모이제이션)하고 해당 값이 필요할 때만 다시 계산하여 성능을 최적화하는 데 사용됩니다. 기본 구문은 다음과 같습니다 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 위 코드에서 computeExpensiveValue 함수는 a와 b의 값이 변경될 때만 다시 실행되며, 그 외의 경우에는 이전에 계산된 값을 .. 2024. 1. 2. React에서 API호출(fetch 사용) 소개 이 글에서는 리액트에서 API를 호출하는 하나의 방법에 대해 간단히 다룰 것입니다. 자바스크립트의 내장함수인 fetch를 사용하여 API를 호출 하는 방법입니다. jsonplaceholder라는 사이트에서 데이터를 가져오도록 하겠습니다. 1. jsonplaceholder 구글에서 jsonplaceholder 사이트에 들어갑니다. 사이트에 접속 후 스크롤을 내리다보면 아래처럼 Resources라는 부분이 있는데 여기서 comments를 사용할 것입니다. comments를 클릭 후 URL을 복사해둡시다. (API를 호출할 주소입니다.) (https://jsonplaceholder.typicode.com/comments) comments를 클릭하면 우리가 가져올 json 데이터 형식입니다. 2. fetc.. 2024. 1. 1. 리액트의 useEffect로 컴포넌트 생명주기 관리하기 소개 리액트의 함수형 컴포넌트에서 useEffect 훅은 컴포넌트의 생명주기 관리에 핵심적인 역할을 합니다. 이 글에서는 useEffect를 활용하여 컴포넌트의 마운트, 업데이트, 언마운트 단계에서 어떻게 작업을 수행하는지에 대해 간단하게 알아보겠습니다. 1. 마운트(Mount) 컴포넌트가 처음으로 화면에 나타날 때(마운트 시점)의 작업을 useEffect 내에서 처리할 수 있습니다. 이를 통해 클래스형 컴포넌트의 componentDidMount와 유사한 동작을 수행할 수 있습니다. import React, { useEffect } from 'react'; const MyComponent = () => { useEffect(() => { // 컴포넌트가 처음 마운트될 때 실행되는 콜백함수 console... 2024. 1. 1. useRef : React에서 DOM 조작하기 소개 리액트에서 useRef는 DOM을 조작하고 컴포넌트의 상태를 유지하는 데 사용되는 강력한 훅 중 하나입니다. 이 글에서는 useRef의 기본 개념을 다뤄보겠습니다. useRef란? useRef는 리액트 함수 컴포넌트에서 DOM 요소에 직접적으로 접근하거나, 컴포넌트의 상태를 유지하는 데 사용됩니다. 이는 클래스 컴포넌트에서의 this와 유사한 역할을 합니다. 기본 사용법 useRef를 사용하려면, 먼저 리액트에서 해당 훅을 가져와야 합니다. 그리고 함수 컴포넌트 내에서 useRef를 선언합니다.(요즘은 자동 import가 되더라구요) 아래와 같이 선언을 하게 되면 myRef을 사용해 DOM 요소에 접근할 수 있습니다. import React, { useRef } from 'react'; const .. 2023. 12. 14. 이전 1 2 3 다음 반응형
