react17 [react] useCallback 리액트에서 리렌더링이 빈번한 것은 좋지 않다. 리렌더링을 줄이는 것이 중요한데 이 작업을 최적화한다고 할 수 있다. 불필요한 리렌더링이 발생하지 않도록 하는 최적화 방법에 자주 사용되는 것 중 하나는 바로 useCallback을 사용하는 것이다.이 외에도 컴포넌트를 캐싱하는 memo(React.memo)와 값을 캐싱하는 useMemo가 있다. useCallback오늘 알아볼 훅은 useCallback이다.useCallback은 함수를 캐싱한다고 할 수 있다. 함수를 메모리에 저장하여 매번 새로 생성되지 않도록 할 수 있고, 의존성 배열을 추가하여 원하는 때에 다시 메모리에 저장하도록 지정할 수 있다. 아래의 코드는 App 컴포넌트 하위에 Test 컴포넌트와 FileDrop 컴포넌트가 있는 구조이다. .. 2024. 7. 17. [react] PropsWithChildren 요즘 리액트 기초를 다시 공부 중인데, PropsWithChildren 타입을 알게 됐다. 이 타입은 상위 컴포넌트에서 하위 컴포넌트로 children을 내려줄 때 타입을 지정하는 children : ReactNode를 대체할 수 있다. 마우스 오른쪽 버튼을 눌러서 index.d.ts에 이동하여 type PropsWithChildren 타입을 보면 children을 반드시 설정하지 않아도 되는 선택적인 속성임을 알 수 있다. 만약 꼭! children이 들어가야 한다면 이 속성을 사용하는 것은 바람직하지 않을 것 같다. 꼭 필요한 곳에 children이 들어가지 않았는데도 에러가 나지 않을 것 이기 때문이다.그래서 선택적으로 children이 필요한 곳에는 PropsWithChildren 타입을 사용하고.. 2024. 7. 11. [react] 클래스형 컴포넌트 함수형 컴포넌트는 많이 사용해 봤는데 클래스형 컴포넌트는 사용해 본 적이 없어서 기록하게 되었다. 먼저, 클래스형 컴포넌트는 react의 Component 클래스를 상속받아야 하기 때문에 import 해준다.또한, render 메서드를 포함해야 한다. 아래의 코드는 color와 text 속성을 props로 내려준다.App.tsximport {Component} from 'react'import ClassComponent from './ClassComponent'export default class App extends Component { render() { return ( ) }} color 속성은 style에 적용하여 글.. 2024. 7. 11. react-query useQuery / useMutation react-qeury란 React에서 데이터를 관리하기 위한 라이브러리이다. 주로 백엔드와 데이터 통신을 담당한다. 서버에서 가져온 데이터의 상태를 자동으로 관리하여 로딩 중, 성공, 실패 등의 상태를 쉽게 파악할 수 있다. 설치 yarn add react-query 적용 최상위 컴포넌트에서 new QueryClient 만든 후 감싸준다. import React from "react"; import Router from "./shared/Router"; import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); const App = () => { return ( ); }; expo.. 2024. 2. 19. axios axios 요청이 들어가는 부분은 따로 모아서 관리하는 것이 좋다. src/api 폴더를 만들어서 관심사.js 식으로 관리한다. 조회 get await axios.get(주소); await axios.get("http://localhost:4000/todos"); 추가 post axios.post(주소, 추가할 값); axios.post("http://localhost:4000/todos", inputValue); 삭제 delete axios.delete(주소); axios.delete(`http://localhost:4000/todos/${id}`); 수정 patch axios.patch(주소, 수정할 값); axios.patch(`http://localhost:4000/todos/${targetId}.. 2024. 2. 16. react-router outlet Outlet Outlet은 해당 자식 라우트 컴포넌트를 렌더링 한다. 중첩 라우트 컴포넌트를 통해 상위 컴포넌트를 레이아웃화 할 수 있고, {children}을 사용하는 것처럼 레이아웃화 할 수 있다. 기존에는 children으로 받아서 레이아웃을 구성했다. 아래 코드는 outlet을 활용한 방법이다. 코드 예제 App.jsx import "./App.css"; import Router from "./shared/Router"; function App() { return ( ); } export default App; app 컴포넌트에 router를 연결했다. Router.js import React from "react"; import { BrowserRouter, Route, Routes } from.. 2024. 2. 7. 전역 스타일 적용하기 styled-components createGlobalStyle 이전까지는 reset.css를 index.html head 에 연결하는 방식으로 적용하였다. 하지만 이번에 createGlobalStyle을 사용하여 전역 스타일을 적용하는 방법을 알게되어 정리해보고자 한다. createGlobalStyle은 styled-components 라이브러리를 통해 전역 스타일을 적용할 수 있다. 설치 npm install styled-components 또는 yarn add styled-components 적용 src/GlobalStyle.jsx 파일을 만든 후 import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` //스타일을 작성해주세요. body{ } `; e.. 2024. 2. 5. useState VS useRef useState와 useRef의 차이점을 알아보고 어떤 경우에 어떤 hook 을 사용하는 것이 좋을지 확인하자. 차이점 값의 변경에 따른 렌더링 useState 상태를 변경할 때마다 컴포넌트가 리렌더링 된다. 컴포넌트의 상태를 변경하고 UI를 업데이트할 수 있다. useRef 값이 변경되어도 컴포넌트를 리렌더링 하지 않는다. 일반적으로 렌더링과 상관없는 값이나 DOM 접근에 사용된다. 사용 목적 useState 컴포넌트의 상태를 관리하고 상태의 변경에 따라 리렌더링이 필요한 경우 사용한다. 화면에 표시되는 정보 등이 해당된다. useRef 렌더링과 무관하게 특정 값에 접근할 때 사용한다. DOM 요소에 대한 참조를 생성하거나 이전 값과 현재 값을 비교 또는 setInterval의 intervalId를 저.. 2024. 1. 31. 이전 1 2 3 다음
