algml0703

[ React ] - 훅(Hook) 종류와 사용법 ( useCallback ) HTML 삽입 미리보기할 수 없는 소스 useCallback은 함수를 캐싱하고, 재사용할 수 있게 해주는 훅으로, 성능 최적화를 위해 활용됩니다. useCallback은 함수를 매번 새로 생성하는 것을 막아주어 불필요한 렌더링을 줄이고 메모리 사용을 최적화시키는데 도움을 줍니다. useCallback의 경우 상위 컴포넌트에서 정의한 함수를 하위 컴포넌트에 props로 전달하여 사용시 함수를 메모리제이션함으로써, 상위 컴포넌트의 렌더링과 무관하게, 함수가 사용될 때에만 새로 생성되도록 하여 성능을 최적화하는데 도움을 줍니다. 사용법 useCallback은 기본적으로 두 개의 인자를 갖는데, 첫 번째 인자로는 콜백 함수가 들어가며..

간편한 테스트 코드 작성을 도와주는 도구이다. 우선은 npm이나 yarn을 이용하여 jest를 설치하여 준다. > npm i jest --save-dev // 타입스크립트로 하는 경우에는 타입도 추가해주어야 한다. > npm i --save-dev @types/jest 기본 코드를 작성하여 준다. 위의 코드를 테스트하기 위해 테스트 파일을 생성하는데, 기본 코드 파일명.test 로 생성한다. .test.로 된 파일은 모두 테스트 대상이 된다. 또는 _ _tests_ _ 로 폴더를 생성하고 하위에 파일을 생성하면, 해당 폴더 하위의 파일이 테스트 대상이 된다. 직접 설정한 파일만 테스트 하고 싶은 경우에는 test 실행을 위한 명령어 입력 시에 경로를 입력해주면 된다.

1. 라이브러리 추가 # npm > npm i react-query # yarn > yarn add react-query 2. App.tsx 설정 react-query를 전역에서 사용할 수 있도록 하기 위해 App컴포넌트를 provider로 감싸준다. App.tsx import React from "react"; import "./App.css"; import Home from "./pages/Home"; import { QueryClientProvider, queryClient } from "react-query"; function App() { // const queryClient = new QueryClient({ defaultOptions: {}, }); return ( ); } export de..

[ React ] - 훅(Hook) 종류와 사용법 ( useContext / useMemo ) HTML 삽입 미리보기할 수 없는 소스 react에서 컴포넌트 간 상태 공유를 위해 사용되는 props는 기본적으로 상위컴포넌트에서 하위 컴포넌트로 내려주는 형태이다. 이는 만일 A -> B -> C 로, A 컴포넌트에 B 컴포넌트가 속하고 B 컴포넌트에 C컴포넌트가 속하는 상황에서 A컴포넌트에 있는 props를 C컴포넌트에서 사용하기 위해 해당 props가 B 컴포넌트에서 필요하지 않음에도 불구하고, B 컴포넌트에서도 props로 넘겨받고 내려주는 불필요한 코드를 작성하게 한다. 이러한 불필요한 코드 작성을 줄이기 위해 사용되는 것이 useContext() hook이다. useContext()는 프로젝트 내에..

훅(Hook) 종류와 사용법 ( useState / useEffect ) Hook이란? React 16.8에 새롭게 추가된 것으로, 공식 문서에 따르면 react의 state 관리와 다른 기능을 사용하기 편리하게 만들어준 메서드이다. HTML 삽입 미리보기할 수 없는 소스 useState의 경우 특정 값을 저장하고 해당 값을 변경하는 함수를 반환하여 주는 역할을 하는 react hook이다. (기본적으로 해당 state의 값이 변경되면 리렌더링이 이루어진다.) ex) useState 활용 예시 useState에서 state변경 함수를 통해 state를 변경할 때에 주의점은 기존의 state값과 변경하려는 state의 값이 같으면 메모리 절약을 위해 state가 변경되지 않고, 즉 렌더링이 발생하지 않는다..

React 리엑트는 SPA로서, 독립적이며 재사용이 가능한 UI 컴포넌트를 통해 화면이 구성된다. 기존에 웹사이트 구현 방식이 HTML, CSS, Javascript가 별도로 구분되어 관리되던 형태인 반면, 컴포넌트 기반인 리엑트는 HTML, CSS, Javascript를 컴포넌트 단위로 묶어 함께 관리하는 것이 특징이다. HTML 삽입 미리보기할 수 없는 소스 기존 MPA 형태의 사이트는 서버로부터 완성된 페이지를 받아 구현되는데, 리엑트는 처음의 요청에 해당 사이트에 존재하는 모든 페이지 구헌에 필요한 데이터를 서버로부터 받아 브라우저가 그 데이터들을 조합하여 사용자 UI를 구현한다. 이후에 추가 사용자 요청이 있는 경우에는 서버에 json 형식의 데이터만을 요청하고 응답받아, 기존의 UI에 데이터를..