개발 메모장 개발 메모장

React

• useState와 useEffect를 넘어선 고급 React Hooks

  React 2024. 1. 29. 14:11

  React의 Hooks 도입은 함수형 컴포넌트 개발에 혁신을 가져왔으며, 상태 관리와 부수 효과(side effects)를 다루는 더 강력하고 유연한 방법을 제공합니다. useState와 useEffect는 널리 사용되고 있지만, React 애플리케이션을 크게 향상할 수 있는 다양한 고급 hooks가 더 있습니다. 1. useCallback useCallback은 메모이제이션된(memoized) 콜백 함수를 반환하는 훅입니다. 특히 복잡한 로직이 있는 컴포넌트나 함수를 props로 받는 컴포넌트에서 불필요한 렌더링을 방지하는 데 매우 유용합니다. 큰 리스트나 테이블의 성능 최적화. 자식 컴포넌트의 불필요한 렌더링 방지. const memoizedCallback = useCallback( () => { /..

  Read More
• React useEffect vs useLayoutEffect 차이점 알아보기

  React 2022. 12. 15. 16:29

  React를 사용하며 아마 가장 많이 사용하는 Hook을 말하라면 무조건 순위권 안에 들 Hook은 useEffect일 것입니다. 하지만 아래의 Flow 그림에서 보면 useEffect 이외에 useLayoutEffect라는 hook이 있다는 것을 알 수 있습니다. 둘의 차이는 간단하게 설명 가능합니다. Dom이 화면을 그린 뒤 호출되는 것이 useEffect 화면을 그리기 전에 호출되는 것이 useLayoutEffect입니다. 이렇게 말하면 와닿지 않을 수 있을 수 있겠지만 React내에서의 깜빡임 문제를 해소하려고 검색할 경우 가장 많이 나오는 것이 useLayoutEffect입니다. 아래의 코드를 살펴봅시다. import React, { useEffect, useState } from 'react'..

  Read More
• Stylelint를 이용해 css 정리하기 (feat. Styled-Components)

  React 2022. 11. 14. 15:15

  (이 글은 MacOS, VSCode, postcss@8.4.19, postcss-jsx@0.36.4, stylelint@14.14.1, react@18.2.0을 기반으로 작성되었습니다.) Eslint는 이제 React로 개발을 진행할 때 혼자 하는 프로젝트에서는 물론이고 같이 협업하는 프로젝트에서는 거의 필수적으로 사용하는 라이브러리입니다. 주로 Eslint + Prettier을 이용해 자동으로 Eslint에서 설정한 룰과 Prettier에서 추가한 내용에 대하여 수정하는 식으로 진행하기에 더욱 사랑받고 있는 것 같습니다. 여기에서 style에 대해서는 이런 툴이 없을까 하는 생각에 발견한 것이 바로 Stylelint입니다. 이거다 하는 생각에 신나게 설정을 진행했을 때 당황할 수밖에 없었습니다. 제가 ..

  Read More
• React 디자인패턴

  React 2022. 10. 7. 15:30

  1. Data 관점1. MVC제작시기 : 1979.12.10제작회사 : XEROX PARC제작 목적 : MVC의 기본 목적은 사용자의 멘털 모델과 컴퓨터에 존재하는 디지털 모델 간의 차이를 연결하는 것입니다.특징ModelViewController로 구성됩니다.Model : 순수 데이터 모음입니다.View : 시각적 요소로 Model에 데이터를 요청합니다.Controller : 사용자와의 상호작용을 담당합니다.2. MVVM제작시기 : 2005.10.08제작회사 : Microsoft제작 목적 : MVC를 현대 UI 개발 플랫폼에 맞게 제작됐습니다.특징ModelViewViewModel로 구성됩니다.Model, View : MVC에서와 동일합니다.ViewModel : Controller에서 좀 더 UI 측면으로..

  Read More
• React 최신 상태관리 라이브러리 비교하기 (feat. zustand, redux-toolkit, jotai, recoil)

  React 2022. 8. 16. 17:28

  1. redux-toolkit(rtk)을 그만 사용하려는 이유 나의 경우 react를 시작하고 redux-saga -> mobx -> redux-saga -> redux-toolkit 순으로 사용했을 정도로 redux의 사용을 좋아하고 즐겨 사용했다. 하지만 이제 api 통신을 react-query로 변경하고 프로젝트를 진행하는 요즘에는 rtk를 통한 글로벌 상태 관리를 하는 경우가 무척 줄어들거나 아예 사용하지 않는 프로젝트들이 생겨났다. 상황이 이렇게 되니 rtk의 단점들이 보이기 시작했고 두 가지 글로벌 상태 관리 라이브러리를 선택했다. 2. zustand와 jotai 두 라이브러리는 각각 독일어와 일본어로 상태를 뜻하는 단어로 이름에서 알 수 있듯이 모두 Poimandres의 카토 다이시가 주가 ..

  Read More
• Styled-Components 테마 적용하기

  React 2021. 7. 30. 19:37

  npm install styled-components 만약 TS를 사용한다면 추가적으로 Types를 설치해 준다. // react npm install @types/styled-components // react-native npm install @types/styled-components @types/styled-components-react-native 아래부터는 TS로 설명하겠습니다. TS를 사용하지 않는다면 declare파일만 만들어 주지 않으면 큰 차이가 존재하지 않습니다. // styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { main: string;..

  Read More