🍒 Chae-ri Dev 🍒

교내 개발 동아리 디자인 시스템의 Snackbar 컴포넌트 개발을 진행하면서 고민하고 개선해나간 과정에 대해 정리하고자 한다. 처음에 작성했던 Snackbar 코드다.처음 코드를 작성했을 때 정말.. 잘못 설계했다는 것을 깨달았다. 이유는 다음과 같다.import { useCallback, useEffect, useRef, useState } from 'react';import { IcAlertTriangleFilled, IcCloseFilled } from '@/style';import { StyledErrorIc, StyledIcMessage, StyledMessage, StyledSnackbar } from './Snackbar.style';import { SnackbarHeightType, Sna..

프론트엔드 기술세미나를 준비하면서 React.memo, useMemo, useCallback 이 3가지에 대해 꼭 블로그에 따로 정리를 해둬야지 싶었다. 오픈소스를 직접 뜯어보며 이 세 가지가 어떤 원리로 돌아가는지 알아간 것을 정리해보겠다. 먼저 브라우저 및 리액트 렌더링 과정에 대해 알아볼 필요가 있다. [React] 브라우저 + 리액트 렌더링 과정에 대해 알아보자기술세미나로 리액트 렌더링 최적화라는 주제에 대해 준비하기로 하였다.렌더링 최적화 방법을 소개하기 전에 브라우저와 리액트가 각각 어떤 과정을 통해 렌더링이 되는지 알아볼 필요가 있yonyoni824.tistory.com 아무리 리액트에서 변경된 사항을 모아서 한 번에 반영한다고 해도 불필요한 리렌더링이 계속 일어난다면 이는 브라우저에게 심각..

기술세미나로 리액트 렌더링 최적화라는 주제에 대해 준비하기로 하였다.렌더링 최적화 방법을 소개하기 전에 브라우저와 리액트가 각각 어떤 과정을 통해 렌더링이 되는지 알아볼 필요가 있었다.이에 대해 확실하게 정리하고 넘어가고자 포스팅으로 남기려고 한다. 브라우저는 어떻게 HTML, CSS로 작성한 웹페이지를 화면에 렌더링 하는걸까?🤔브라우저 렌더링 과정브라우저는 Critical Rendering Path(CRP)라는 과정을 통해 렌더링이 진행된다.상세 과정은 다음과 같다.1단계 - HTML, CSS 변환(DOM, CSSOM 생성)2단계 - Render Tree 생성3단계 - Layout 과정4단계 - Painting 과정HTML 파싱을 통한 DOM 생성CSS 파싱을 통한 CSSOM 생성DOM 트리와 CSS..

Portal이란?부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링을 해준다.즉, 컴포넌트의 상하 관계 구조를 가지고 있는 DOM 상에서 자식 컴포넌트를 부모 컴포넌트의 외부에 있는 다른 컴포넌트에 전달할 수 있도록 해준다. 리액트 프로젝트에서 해당 컴포넌트를 어디에 렌더링 시킬지,사전에 DOM을 선택하여 부모 컴포넌트 바깥에 렌더링해주는 기능이라고 생각하면 된다.ReactDOM.createPortal(child, container) ReactDom의 createPortal 메서드를 활용하여 포탈을 사용해 계층 밖으로 보낼 컴포넌트(child), 포탈로 이동할 목적지, DOM Element(container)를 인자로 넣어준다. 1. 모달이  렌더링할 위치 지정하기index.htm..

useReducer란?상태를 관리하고 업데이트하는 훅인 useState의 대체 함수.useState의 업그레이드 버전이라고 생각하면 된다.다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 useState가 아닌 useReducer 사용을 통해 컴포넌트의 성능을 최적화시킬 수 있다고 한다.(callback 대신 dispatch를 전달하기 때문) useReducer는 다음과 같이 사용된다.const [state, dispatch] = useReducer(reducer, initialArg, init);  state현재 상태 값. useReducer로 관리되는 상태의 현재 값이며, reducer 함수의 반환 값에 의해 업데이트 된다.초기 상태는 in..

React Context API란?컴포넌트에 props를 직접 전달하지 않고 여러 컴포넌트 간에 전역으로 상태를 쉽게 공유하고 관리할 수 있게 해준다.일반적으로 React에서는 데이터를 위에서 아래로(부모 -> 자식) props를 통해 전달하는데, 실제로 개발을 하다보면 목표 컴포넌트까지 props를 전달해주기 위해 여러 컴포넌트를 통과해야 하는 props drilling 문제가 발생하게 된다. 이 문제를 해결하기 위해 전역으로 관리할 수 있게 React에서 만든 것이 바로 Context API이다.주로 UI 테마(라이트 모드, 다크 모드 등), 언어 설정, 인증된 사용자 등 전역으로 사용될 수 있는 상태를 공유할 때 사용된다. 그렇다면 전역 상태 관리를 할 때 사용하면 되는가?그건 아니다.전역으로 관리..

프로젝트 태스크를 진행하다가 children 타입을 React.ReactElement; 로 두고 태스크 완성한 걸 PR에 올려두었다. 여기서 받은 다른 팀원 분의 질문요기 ReactNode가 아니라 ReactElement로 타입 좁혀놓으신 이유가 있을까용? 이 질문을 보면서 ReactNode와 ReactElement의 차이를 제대로 설명을 할 수 있어야겠다고 생각하여 공부하면서 이 포스트에 정리해보겠다. children의 타입으로 사용하는 타입에는 크게 ReactNode와 ReactElement가 있다.  ReactNode-> 클래스형 컴포넌트의 리턴값에 해당ReactNode는 JSX에서 children으로 전달될 수 있는 모든 타입을 가질 수 있다.string, number, boolean, null,..

recoil로 상태 관리를 했는데 userState가 바뀌면 안되는데 자꾸 상태 데이터가 날라가는 사태가 발생…로직 문제인 줄 알았는데 알고 보니 "a 태그" 때문이었던 것덕분에 a 태그와 Link 태그의 차이점을 크게 알았다.- 페이지를 전환할 때 a 태그의 href 속성을 사용하여, 새로운 페이지에서 'userState' 값을 초기화한다.- 이는 페이지 이동 시 새로운 컴포넌트가 마운트되고 초기화되기 때문에 발생- 페이지를 새로 불러오지 않고 (컴포넌트가 마운트되는 대신) 라우터가 컴포넌트를 변경하고 상태를 유지한다.- 페이지 주소만 변경하여 상태는 초기화되지 않는다메모메모…