SWR 네트워크 상태 관리 툴 React hooks for Data Fetching made by vercel stale-while-revalidate SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data. 빠르게 화면에 보이는 캐시된 데이터를 제공하고, 동시에 백그라운드에서 데이터를 다시 가져와서 UI를 새로 고치는 방식 SWR에서 "캐시"는 메모리 내에 저장된 데이터의 일시적인 복사본을 의미한다 사용자 경험을 향상시키고, 데이터의 최신 상태를 유지 가능 const { data, isLoading..

이벤트 핸들링 리액트에서 이벤트 핸들링은 React 컴포넌트에서 UI 요소에서 발생하는 이벤트(예: 클릭, 마우스 오버, 키 입력 등)를 처리하는 것을 의미한다. 이벤트에 함수를 바인딩한다는 것은 UI 요소에 onEvent 속성으로 함수(이벤트 핸들러)를 전달하는 것을 말한다. const a = () => { console.log("a 함수가 호출됨"); }; const App = () => { return ( 1번 2번 a()}>3번 ); }; 각각의 버튼은 어떻게 작동할까? 비슷해보이지만 다른 결과를 가져올 수 있는데 그 차이점을 알아보자. 이벤트에 함수 바인딩하기 1. 1번 이 경우 함수의 호출 결과가 적용이 되고 버튼을 클릭할 때가 아닌, 컴포넌트가 렌더링 될 때에 console.log가 실행이 ..

Context 리액트 컴포넌트에서 Props가 아닌 다른 방식으로 컴포넌트 간에 값을 전달하는 방법. 사용이유 Props drilling 부모에서 자식으로만 전달하는 단방향 리액트의 문제. 컴포넌트 트리에서 하위 컴포넌트로 내려주기 위해 그냥 거쳐가기만 하는 Prop들이 생긴다. 따라서 불필요한 props drilling을 지양하기 위해 Context를 사용한다. Provider Context 객체에 포함된 React 컴포넌트. context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할. value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달한다. 값의 갯수는 제한이 없고, 이를 전달 받을 수 있는 컴포넌트 수의 제한도 없다. Provider 하위에서 context를 구독하는..

이벤트 전달 in React.js 이벤트를 전달할 때 주의점 = return문 안에서 태그에 onClick={} 에서 함수에 () 붙고 안 붙고 차이 1. DOM 요소에만 이벤트 설정이 가능. 직접만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 이 예제는 doSth 함수를 실행하는 것이 아닌 이름이 onClick인 props를 MyComponent에게 전달해줄 뿐이다. 2. 함수 형태의 값을 전달 html에서는 "" 안에 실행할 자바스크립트 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다 따라서 onClick={doSth} 혹은 onClick={()=>alert('실행')}

Routing 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 router : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 sth route + ing : 경로를 정해주는 행위 자체와 그 과정을 다 포함하여 일컫는 말 Page Routing 브라우저의 요청에 따라 웹 서버가 어떤 페이지를 보여줄 지 결정하는 과정 MPA multipage Application 여러 html 파일로 이루어진 웹 사이트로, 요청할 때마다 새로운 페이지를 전송 요청할 때마다 새로고침 (페이지 깜빡임) SPA single page application 싱글페이지이므로 페이지 이동이 없음 CSR client side rendering 서버와의 통신 없이 브라우저 자체적으로 페이지 업데이트 (로딩이 짦음)..

useReducer 필요성 초반에 배우는 리액트는 대부분 app 컴포넌트 내에서 useState를 이용해 상태 변화 처리 함수를 사용한다. ✨ 상태 변화 처리 함수의 대표적인 예 : onCreate, onEdit, onRemove 하지만 규모가 점점 커지고 처리 내용이 많아질 수록 컴포넌트가 무거워지고 비효율적이다. 따라서 상태 업데이트 로직을 컴포넌트에서 분리, 즉 컴포넌트 외부 혹은 다른 파일에 작성할 수 있도록 하는 것이 useReducer. 사용법 useReducer는 리덕스의 로직과 흡사하다. 👇 2022.08.01 - [코딩공부] - [Redux] 리덕스의 필요성과 구성 요소, 작동 원리 reducer 그렇기에 reducer 함수가 꼭 필요하다. recuder : 현재 상태와 액션 객체를 인자..