분류 전체보기

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

드롭다운 구현 중 외부 영역 클릭감지를 어떻게 해야하나 구글링을 하며 알게된 내용을 코드와 함께 상세히 적어보겠습니다. 구현을 위해 필요한 지식은 useRef와 이벤트 핸들링, 그리고 버블링입니다. 이 내용들을 다 알고 있다면 바로 드롭박스 구현쪽으로 넘어가시면 됩니다~ [사전지식] 1. useRef란? 리액트에서 특정 DOM을 선택하는 용도로 사용하거나, 렌더링과 상관없이 특정 값을 유지하고 싶을 때 사용하는 Hook이다. 다음 간단한 예제 코드이다. import React, { useRef, useEffect } from 'react'; function App() { const myInput = useRef(); //useRef 선언 useEffect(() => { myInput.current.foc..

Recoil 상태관리 라이브러리 기업 프로젝트 진행 중, 이전 분이 작성하신 코드를 보니 상태관리 라이브러리로 Recoil을 사용하셔서 관련하여 정리를 해본다!! 리코일은 상태관리 라이브러리로, 애플리케이션의 상태를 효과적으로 관리해준다. Atom과 Selector 라는 개념을 활용해 상태를 정의하고 파생된 데이터를 생성한다. Atom recoil에서 상태의 최소 단위. key: atom의 이름으로 유일해야 한다. default: 상태의 기본 값. '[]' 이면 'useState([])' 이라고 생각하면 된다. // 로그인 사용자 이름 export const userNameState = atom({ key: "UserNameState", default: "", }); // 로그인 사용자 역할. expor..

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..

radix와 shadcn https://velog.io/@ckstn0777/shadcnui-%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B3%B5%EC%9C%A0-UI-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%82%AC%EC%9A%A9-%EA%B2%BD%ED%97%98 radix-ui는 스타일없이 제공되는 UI 컴포넌트 라이브러리로 MUI에 비해 유연성이 높다. shadcn은 radix UI및 tailwind css를 사용해 구축된 재사용 가능한 컴포넌트로 버튼 같이 디자인이 다양하게 사용되는 컴포넌트에 사용하면 좋다. radix이용해서 progress bar 컴포넌트 만들기 일단 radix에서 progress 컴포넌트를 설치해준 후 tail..

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

SELECT- 12세 이하인 여자 환자목록 출력하기 https://school.programmers.co.kr/learn/courses/30/lessons/132201 SELECT PT_NAME,PT_NO,GEND_CD,AGE,ifnull(TLNO,"NONE") as TLNO FROM PATIENT WHERE (AGE1 ORDER BY USER_ID, PRODUCT_ID DESC - GROUP BY의 기준에 속성을 여러 개 줄 수 있다. - HAVING을 이용해 GROUP BY 집계 결과에 조건을 줄 수 있다 - 집계함수 COUNT로 컬럼의 갯수를 산출한다. SELECT- 조건에 맞는 회원수 구하기 https://school.programmers.co.kr/learn/courses/30/lessons/1..

문제 설명 링크 https://www.acmicpc.net/problem/7576 문제 철수의 토마토 농장에서는 토마토를 보관하는 큰 창고를 가지고 있다. 토마토는 아래의 그림과 같이 격자 모양 상자의 칸에 하나씩 넣어서 창고에 보관한다. 창고에 보관되는 토마토들 중에는 잘 익은 것도 있지만, 아직 익지 않은 토마토들도 있을 수 있다. 보관 후 하루가 지나면, 익은 토마토들의 인접한 곳에 있는 익지 않은 토마토들은 익은 토마토의 영향을 받아 익게 된다. 하나의 토마토의 인접한 곳은 왼쪽, 오른쪽, 앞, 뒤 네 방향에 있는 토마토를 의미한다. 대각선 방향에 있는 토마토들에게는 영향을 주지 못하며, 토마토가 혼자 저절로 익는 경우는 없다고 가정한다. 철수는 창고에 보관된 토마토들이 며칠이 지나면 다 익게 되..