타닥타닥

리렌더링은 화면을 다시 그리는 과정인데, 이 과정이 불필요하게 자주 발생하게 된다면 성능이 저하될 수 있고 사용자 경험에 부정적인 영향을 끼칠 수 있습니다. 먼저 리렌더링을 방지하려면 리액트가 어떤 상황에서 리렌더링을 시키는지 알아야 할 필요가 있습니다. 리액트에서 리렌더링은 언제 일어날까? 🤔1. 컴포넌트의 state 변경리액트가 추적하고 있는 state 값이 변했을 때 해당 state를 관리하고 있는 컴포넌트가 리렌더링 된다. 2. 부모 컴포넌트의 리렌더링부모 컴포넌트가 리렌더링 되면 해당 컴포넌트의 모든 자식 컴포넌트가 리렌더링된다. 3. props 값의 변경props의 값이 변경되면 props를 받고 있는 컴포넌트가 리렌더링 된다.  따라서 최적화 도구를 적용하기 전에 기본적으로 코드를 짤 때 ..

useReducer란?useState처럼 상태를 관리하고 업데이트할 수 있는 리액트 내장 훅입니다. useState와 useReducer 비교문법이 비슷하지만 dispatch와 reducer 함수가 달라 보입니다. //useStateconst [ state, setState ] = useState(initialState);//useReducerconst [ state, dispatch ] = useReducer(reducer,initialState); useReducer의 구성요소는 다음과 같습니다.state : 상태의 이름dispatch : reducer함수를 실행시키고 상태를 업데이트 할 때 필요한 정보(기능, 재료)를 전달하는 함수reducer : dispatch로 전달된 데이터를 기반으로 상태를 ..

동기 처리와 비동기 처리란 무엇일까?자바스크립트 엔진은 싱글 스레드 방식으로 동작합니다. 싱글 스레드 방식은 한 번에 하나의 작업만 처리할 수 있기 때문에 시간이 오래 걸리는 작업을 실행하는 동안에는 다음 작업을 시작할 수 없습니다. 이러한 처리 방식을 동기 처리라고 하는데, 동기 처리는 직관적이고 처리 순서가 보장된다는 장점이 있지만 시간이 걸리는 작업을 실행하는 경우 다음 작업이 블로킹된다는 단점이 있습니다. 비동기 처리는 동기 처리와 반대로 현재 실행 중인 작업이 종료되지 않은 상태라 하더라도 다음 작업을 실행하는 방식을 말합니다. 이 방식은 시간이 걸리는 작업이 실행 중이더라도 다음 작업이 블로킹되지 않습니다. 자바스크립트는 어떻게 비동기 처리가 가능할까?자바스크립트는 한 번에 하나의 작업만 처리..

react-hook-form 이란?폼 관리 라이브러리로, 간단하고 효율적인 방식으로 폼 유효성 검사와 상태 관리를 처리할 수 있게 도와줍니다. 이번 프로젝트에서 react-hook-form을 선택한 이유1. 성능 최적화react-hook-form은 내부적으로 성능 최적화를 고려하여 설계되었습니다. 특히 리렌더링을 최소화하여 빠른 사용자 경험을 제공합니다. 2. 간편한 사용사용하기 쉽고 직관적인 api를 제공하여 필요한 기능을 Hook 함수로 호출하여 사용할 수 있습니다. 3. 유연성과 확장성react-hook-form은 유연하고 확장 가능한 구조를 가지고 있습니다. 커스텀 컴포넌트와의 통합이 간단하여 제가 사용하려는 shadcn/ui 컴포넌트와의 사용에 적합하다고 생각했습니다.기본적인 사용법사용하기 위해..

Context Api와 createPortal을 사용하여 효율적으로 모달을 관리하는 방법을 정리해 보겠습니다. Context로 모달을 제어하면 어떤 점이 좋을까? 여러개의 모달을 사용할 경우 각각 열고 닫는 상태를 만들어주지 않아도 됩니다. 부모의 상태 개입없이 독립적으로 모달을 열고 닫을 수 있습니다. 한 곳에서 모달을 관리하여 유지보수성이 높아집니다. 구현 방법 정리 createContext - DispatchContext(모달 열고 닫는 기능), ModalStateContext(모달) 생성 ModalProvider - openedModals 상태 관리, open, close 함수 작성 Modals - createPortal을 이용해 오픈된 모달을 렌더링하는 로직 CustomModal - 모달 컴포넌..

flex 속성을 적용할 item들의 부모요소에 display: flex;를 적용해 주는 것이 시작이다. 1. justify-content 쉽게 말하면 메인축(가로)정렬을 어떻게 할 것인가. 가로정렬이라고 했지만 메인축이 기본이 가로방향이기 때문이고 만약 메인축 방향을 세로로 바꾸게 된다면 세로축 정렬이 될 수도 있다. flex-start: 왼쪽 정렬 flex-end: 오른쪽 정렬 center: 가운데 정렬 space-between: 아이템들 사이에 같은 간격을 준다 space-around: 아이템들의 둘레를 같게 한다. 2. align-items(아이템 전체 적용) / align-self(아이템 지정) 쉽게 말해서 세로정렬을 어떤 방식으로 할 것인가. 세로정렬이라고 했지만 메인축의 수직인 축을 말한다. ..