Frontend/React (5) 썸네일형 리스트형 [React] 웹의 역사와 Next.js 🔸 웹의 역사 1. Mosaic Web Browser(1993)와 Netscape Navigator(1994) 등장 Mosaic Web Browser와 Netscape Navigator는 HTML과 CSS로만 이루어진 정적인 웹사이트였습니다. 사용자에게 조금 더 좋은 서비스를 제공하고자 동적인 웹사이트를 만들기 위해 고민합니다. 2. Javascript의 등장 Brendan Eich가 Javascript를 개발하였고, Netscape Navigator에는 javascript 엔진을 내장하여 출시하게 됩니다. 3. AJAX 등장 Jesse James Garrett이 비동기적으로 데이터를 받아오고 처리할 수 있는 기술이 등장합니다. 4. jQuery의 등장 Microsoft가 Internet Explorer.. [React] Redux middleware 리덕스 미들웨어 🔸 Redux란? 리덕스는 Flux 패턴을 구현한 대표적인 라이브러리 중의 하나입니다. Flux 패턴 페이스북에서 애플리케이션에서의 데이터 흐름이 복잡해며 발생하는 문제를 해결하기 위해 발표한 패턴입니다. 이 패턴은 데이터가 단방향으로만 흐르고, 새로운 데이터를 넣으면 처음부터 데이터 흐름이 다시 시작됩니다. 이를 통해서 상태의 전이 현상을 없애주고 예측 가능하다는 특징을 가지게 됩니다. 동작 화면에서 액션이 발생하면 이를 디스패처가 리듀서에 전달하고, 리듀서는 상태를 변경합니다. 이 모든 상태는 스토어에서 관리합니다. 한계 리덕스 스토어에서는 동기적으로 액션을 디스패치하고, 리듀서 함수를 호출하여 state를 업데이트하는 것을 담당합니다. 즉, 비동기 처리는 수행하지 못하는 한계가 있습니다. 🔸 Red.. [React] State Management 상태 관리 안녕하세요. React를 사용해보신 분들은 useState나 redux를 이용하여 상태 관리를 해본 경험이 있으실 겁니다. 오늘은 상태 관리의 역사, 라이브러리 등등에 대해 알아보도록 하겠습니다. 🔸 상태란? 컴포넌트 안에서 관리되는 변경 가능한 데이터 저장소로, 상태가 변경되면 컴포넌트가 리렌더링 됩니다. 리액트에서는 useState을 사용하여 상태관리를 할 수 있습니다. import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( {count} setCount(count+1)}> click me ); } 위 코드에서 count 변수는 상태라고 할 수 있습니다. 버튼 클릭 여부에 .. [React] Hook - useEffect 안녕하세요. 오늘은 React Hook 기능 중 하나인 'useEffect'에 대해 알아보도록 하겠습니다. useEffect은 렌더링 이후에 추가적인 작업을 처리하기 위해 자주 사용하는데요. 이 추가적인 작업(side effects)은 크게 두 종류로 나눌 수 있습니다. 1. Cleanup이 필요하지 않은 것 2. 메모리 누수를 방지하기 위해 Cleanup이 필요한 것 *side effect란? 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위 (ex. 데이터 Fetch, DOM 요소 변경 등등, 외부 자원 사용) 먼저 Cleanup이 필요하지 않은 경우에 대해 알아보겠습니다. 아래 코드는 DOM을 업데이트 한 후에 탭 제목(document.title)을 변경해줍니다. impor.. [React] Hook - useMemo와 useCallback 안녕하세요 오늘은 React Hook 기능 중 'useMemo'과 'useCallback' 에 대해 알아보도록 하겠습니다. useMemo는 값을 재사용하고 싶을 때 사용하고, useCallback은 함수를 재사용하고 싶을 때 사용합니다. useMemo는 어떻게 함수를 재사용할 수 있게 해주는걸까요? 메모리에 값를 저장하는 방법(Memoization, 메모이제이션)을 사용하여 재사용할 수 있도록 도와줍니다. 아래의 코드를 봅시다. const memoizedValue = useMemo(()=> computeExpensiveValue(a,b), [a,b]); 두 번째 매개 변수인 배열의 a,b 중 하나의 값에 변화가 있으면, useMemo는 다시 value를 계산합니다. 두 번째 매개 변수에 아무것도 전달하지.. 이전 1 다음
