리액트

너저분한 모달 상태관리,,, 모달의 UI는 한정되어있는데 페이지마다 모달의 상태관리를 저렇게 state로 무지성 난사로 쓰다보니 불필요한 재렌더링도 그렇고, 불필요한 코드 중복성이 늘어나 리팩토링의 필요성을 느꼈다. 멘토님께서 리액트 포탈로 관리해보기 전, useContext로 해보자고 하셔서 useContext로 리팩토링을 우선하였다. 보여줄 모달을 전역으로 관리하게 되면 다음과 같은 장점이 있다. 1. 재사용성: 같은 모달을 쉽게 사용하게 하여 중복성을 제거한다. 2. 통제 용이성: 어느 위치에서든 모달의 상태를 통제할 수 있어, props drilling을 피할 수 있다. context/ModalContext.jsx 생성 import React, { createContext, useState } f..

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref. 어떤 컴포넌트가 특정 정보를 기억하게 하고 싶지만, 새로운 렌더를 일으키고 싶지 않을 때 사용한다 (공식문서) html에서 DOM 요소에 이름을 달 때는 id를 사용한다. 리액트 내부에서 DOM에 이름을 다는 방법은 바로 ref Q. 리액트 컴포넌트 안에서 id를 사용하면 안되나요? 사용해도 되지만 HTML에서 DOM id는 유일해야 하는데 중복의 위험이 있다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다. Re..

라이프사이클(생명주기) 모든 리액트 컴포넌트에서는 라이프사이클(수명 주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝난다. 리액트 프로젝트를 진행하면 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. 라이프사이클 큰 흐름⬆️ 클래스형 컴포넌트 생명주기 Mounting ➡️Updating ➡️ Unmounting 라이프사이클은 위와 같이 총 세가지 마운팅(생성), 업데이트, 언마운팅(제거)로 나뉜다. [출처] https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ 흐..