📝 면접질문 props와 state의 차이에 대해 설명해주세요. props와 state 모두 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있으므로 비슷해보일 수 있으나 다릅니다. props는 부모 컴포넌트에서 설정해주는 컴포넌트의 속성값으로 함수형 컴포넌트의 경우 인자값으로 전달됩니다. 컴포넌트 자신은 읽기만 가능하여 직접 데이터 변경이 불가하며, 이를 변경하기 위해서는 최상위 부모 컴포넌트에서 변경하거나 추가로 state를 만들어주어야 합니다. state는 컴포넌트 자체적으로 지닌 값으로 내부에서 변경가능한 데이터입니다. 함수형 컴포넌트에서 useState를 사용하여 렌더링 사이에 데이터를 유지하면서, 업데이트가 이뤄질때 리렌더링을 합니다. state는 불변성을 유지해줘야 하여 클래스형 컴포넌트에서는..
TIL
📝면접 질문 작성 VirtualDOM과 DOM에 대해 설명하세요 DOM은 객체를 문서구조로 표현한 것으로 XML이나 HTML로 작성됩니다. 이는 트리형태로 특정 노드를 수정, 삭제, 삽입이 가능합니다. 그러나 노드 하나의 변화에 CSS를 그리고, 레이아웃 변경 후 리페인트를 진행하기 때문에 큰 데이터를 가진 동적인 UI에는 취약합니다. DOM의 성능을 개선하면서 최적의 UX 보장하기 위해 DOM을 추상화한 Virtual DOM이 나오게 되었습니다. 이는 데이터를 업데이트 할때 전체 UI를 Virtual DOM에 리렌더링 한 후 이전 VDOM과 비교하여 바뀐 부분만 실제 DOM에 적용하는 방식입니다.abs 번들러에 대해 설명하세요 모듈들을 하나의 파일로 합쳐 생성합니다. 여기서 모듈은 자바스크립트에 국한되..
너저분한 모달 상태관리,,, 모달의 UI는 한정되어있는데 페이지마다 모달의 상태관리를 저렇게 state로 무지성 난사로 쓰다보니 불필요한 재렌더링도 그렇고, 불필요한 코드 중복성이 늘어나 리팩토링의 필요성을 느꼈다. 멘토님께서 리액트 포탈로 관리해보기 전, useContext로 해보자고 하셔서 useContext로 리팩토링을 우선하였다. 보여줄 모달을 전역으로 관리하게 되면 다음과 같은 장점이 있다. 1. 재사용성: 같은 모달을 쉽게 사용하게 하여 중복성을 제거한다. 2. 통제 용이성: 어느 위치에서든 모달의 상태를 통제할 수 있어, props drilling을 피할 수 있다. context/ModalContext.jsx 생성 import React, { createContext, useState } f..
Recoil 상태관리 라이브러리 기업 프로젝트 진행 중, 이전 분이 작성하신 코드를 보니 상태관리 라이브러리로 Recoil을 사용하셔서 관련하여 정리를 해본다!! 리코일은 상태관리 라이브러리로, 애플리케이션의 상태를 효과적으로 관리해준다. Atom과 Selector 라는 개념을 활용해 상태를 정의하고 파생된 데이터를 생성한다. Atom recoil에서 상태의 최소 단위. key: atom의 이름으로 유일해야 한다. default: 상태의 기본 값. '[]' 이면 'useState([])' 이라고 생각하면 된다. // 로그인 사용자 이름 export const userNameState = atom({ key: "UserNameState", default: "", }); // 로그인 사용자 역할. expor..
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..
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..
