📍목표 - 검색 API를 호출할 때, API 응답 데이터를 저장하기 - 같은 키워드를 두 번 검색한 경우, API를 호출하지 않고, 저장된 데이터를 활용하기 - data fetching 라이브러리 사용하지 않고 이를 구현하기 📍로컬 캐싱 글로벌 캐싱과 다르게, 로컬내에 캐시를 저장해야 함 (in-memory or web storage) - local 에서 작동하기 때문에 속도가 빠름 (네트워크 필요 X) 캐시를 로컬 스토리지 혹은 세션 스토리지에 저장하면 새로고침 시 데이터 휘발을 막을 수 있지만, 검색 API의 응답 데이터는 중요한 데이터도 아니므로 in-memory에 저장해도 된다 (권장되는 방법) 그리고 웹 스토리지의 경우 메모리 크기에 제한이 있기도 하고, 읽기 쓰기 속도도 당연히 느리다 📍캐시를..

📍참고 https://www.aurigait.com/blog/drag-and-drop-in-react-without-using-any-external-library/ Drag and Drop in React without using any External Library - Auriga IT Drag and Drop feature in React with little effort using useRef hook. Here we'll see it in action by implementing an easy drag and drop list. www.aurigait.com https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API HTML 드래그..

📍1. 유지보수가 쉽다- React는 컴포넌트 기반의 UI 라이브러리이기 때문에 컴포넌트를 적극 활용해 코드를 재사용할 수 있다- Shotgun Surgery를 막을 수 있다(Shotgun Surgery : 변경 사항이 있을 경우 중복 코드를 하나하나 수정해야 하는 것) 📍2. 선언형 프로그래밍 패러다임을 반영- 명령형 프로그래밍 패러다임(제이쿼리)를 지나, 선언형 프로그래밍 패러다임(React)을 반영 📍3. 빠르다- Virtual DOM 을 사용하기 때문에 DOM 을 직접 조작하는 것보다 연산을 덜 수행

1. 쓰임새- useState의 대체 함수- reducer 로직과 initial state를 받아 현재 state와 dispatch를 반환- dispatch 함수가 action을 전달하면, reducer 로직에 따라 state가 변경됨 // reducer 함수(state, action) => newState;// useReducerconst [state, dispatch] = useReducer(reducer, initialArg, init);// 구체적으로 아래처럼 쓴다const [state, dispatch] = useReducer( reducer, {count: initialCount}); 2. useState 대신 useReducer를 쓰기 좋은 경우- 많은 분기를 사용하는 등 복잡한 로직을 ..

러닝 리액트(Learning React) 2판 1.1 리액트 사용에 앞서 ▶ 리액트 탄생의 바탕 ▷ 함수형 프로그래밍 패러다임의 대두 (자바스크립트) ▶ 리액트 사용의 효과 ▷ 가독성 ▷ 재사용성 ▷ 테스트 가능성 ▷ 이상의 3가지를 갖춘 패턴을 활용해서 더 좋은 자바스크립트 개발이 가능

출처 - 리액트를 다루는 기술(김민준 지음) 이벤트란? 사용자가 웹 브라우저에서 DOM 요소들과 상호작용 하는 것 예) 버튼에 마우스 커서 올렸을 때 -> onmouseover 이벤트 클릭했을 때 -> onclic 이벤트 Form 요소의 값이 바뀔 때 -> onchange 이벤트 리액트에서의 이벤트 시스템 1. 이벤트 이름은 카멜 표기법을 사용한다 HTML은 onclick 이지만 리액트는 onClick HTML은 onkeyup 이지만 리액트는 onKeyUp 2. 이벤트에 함수 형태의 값을 전달 HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만 리액트에서는 함수 형태의 객체를 전달 즉, 중괄호 안에 함수명만 넣음 -> () 안붙임 예시 import React, { useState } ..

출처 - 리액트를 다루는 기술(김민준 지음) state를 컴포넌트 내부에서 사용하는 것 뿐만 아니라 자식 컴포넌트로 전달하여 실시간으로 다시 렌더링되도록 하는 것도 가능하다. // Greeting.js import React from 'react'; // state를 전달받기 때문에 괄호로 감싸줘야 한다 const Greeting = ({ username }) => { return {username}님 안녕하세요.; } export default Greeting; import React, { useState } from 'react'; import Greeting from './Greeting'; function App() { const [username, setUsername] = useState(''..

출처 - 리액트를 다루는 기술(김민준 지음) 리액트 16.8 이후 부터는 useState 함수를 통해 함수형 컴포넌트에서도 state를 사용할 수 있게 됐다 이 과정에서 Hooks를 사용하게 된다 state의 값을 업데이트 할 때는, state 값에 직접 접근하면 안됨. setState 또는 세터 함수로 값을 변경해야 한다 (그렇지 않으면 바뀐 값이 렌더링 X) (1) useState 사용하기 Say.js 파일을 생성한다 useState로 state 값을 바꿀 때는 useState를 통해 전달받은 세터 함수를 사용한다 // Say.js import React, { useState } from 'react'; const Say = () => { const [message, setMessage] = useS..