본문 바로가기
728x90

React29

[React] useLayoutEffect vs useEffect: 언제, 왜 사용하는가? React에서 useEffect와 useLayoutEffect는 비슷해 보이지만 동작 방식에서 중요한 차이가 있음이 차이를 이해하면 UI가 깜빡이는 문제(Flickering) 등을 방지 가능1. 기본 개념 정리 ▶ useEffect비동기적으로 실행됨 (렌더링 후 실행됨)화면이 먼저 업데이트된 후에 실행됨사용자에게 먼저 UI가 보이고 그 후에 실행되는 효과를 적용할 때 사용 ▶ useLayoutEffect동기적으로 실행됨 (렌더링 직후, 화면이 그려지기 전에 실행됨)DOM 업데이트가 적용되기 전에 실행됨UI가 깜빡이는 것을 방지하고 레이아웃이 변경되기 전에 실행해야 할 경우 사용2. 실행 순서 차이 ▶ useEffect 실행 순서컴포넌트가 렌더링됨브라우저가 화면을 업데이트함useEffect 실행됨impor.. 2025. 2. 5.
[React] Drawer와 Tab, Accordian - Console 콘솔에러 제거하기 [React] https://hhahee.tistory.com/174 Drawer와 Tab, Accordian으로 FAQ 구현하기2025년 02월 03일Mui의 Accordion 컴포넌트 사용Help Container에서 해당하는 버튼을 선택하면 Drawer가 나오도록 설정Drawer안에는 Tabs를 4가지로 구성각 Tab안에는 Questions의 리스트가 나오도록 하였음questionhhahee.tistory.com위 포스팅에서 초래된 콘솔 에러 해결해보기 모두 정상동작하지만 콘솔의 에러 (경고) 코드를 제거하고 싶었다. 1. FaqsTabs.tsx:84 Warning: Each child in a list should have a unique "key" prop.위의 에러에 나온 84번째 줄은 컴포.. 2025. 2. 4.
[React] Drawer와 Tab, Accordian으로 FAQ 구현하기 2025년 02월 03일Mui의 Accordion 컴포넌트 사용Help Container에서 해당하는 버튼을 선택하면 Drawer가 나오도록 설정Drawer안에는 Tabs를 4가지로 구성각 Tab안에는 Questions의 리스트가 나오도록 하였음question은 길이와 expand시 bold체에 따라 한줄~두줄로 설정될 수 있음 → useEffect를 사용하여 expand되는 question 혹은 tab이 바뀔때마다 question의 wrapper라고 할 수 있는 AccordionSummary 컴포넌트의 height을 조정함호버 시, 글자색과 AccordionSummary 배경색상을 변경하여 가시적으로 표현함Question은 선택 시 Accordian 형태로 answer가 dropdown되도록 설정하였음.. 2025. 2. 3.
[React] KeyDown, KeyUp 한국어 2번? onKeyUp, onKeyDown 한글 입력 시 두번 실행되는 오류특정 환경에서 한글 입력 시 composing 단계를 거치는데 이게 완료되지 않아 keyCode나 which 값이 229가 나오는 에러가 발생한다고 한다.이 229 에러가 발생해 그 연장선으로 key event가 제대로 작동하지 않아 결국 함수가 두 번씩 실행된 것 같은데, 두 번 실행에 대한 정확한 사유는 적혀있지 않았다.onKeyDown을 사용하고, composing 단계랑 keyCode === 229 일 때 return 하는 방법으로 걸러주어 밑의 작성된 코드를 정상적인 동작을 하게끔 만들어 주는 것으로 파악된다.function keyEnterHandler(e) { if (e.isComposing || e.keyCode === 22.. 2025. 2. 3.
[React] Mention 기능 (Tribute.js) Tribute.js는 웹에서 @멘션 기능을 쉽게 구현할 수 있는 JavaScript 라이브러리입니다. 사용자가 특정 문자를 입력할 때, 해당 문자에 맞는 추천 목록(예: 사용자 목록)을 표시해주고, 그 중 하나를 선택할 수 있는 기능을 제공합니다. 주로 채팅 또는 댓글 시스템에서 사용자의 이름이나 태그를 입력할 때 편리하게 사용됩니다.기본 동작사용자가 @를 입력하면, 미리 정의된 리스트(예: 사용자 목록)에서 해당하는 항목들이 자동으로 제안됩니다.사용자가 제안된 목록 중 하나를 선택하면, 텍스트에 해당 항목이 삽입됩니다.이 라이브러리는 텍스트 영역, 인풋 필드, 또는 WYSIWYG 편집기와 함께 사용할 수 있습니다.예시간단한 예제를 통해서 사용 방법을 설명하겠습니다. @아이콘 버튼을 누르면 멤버 리스트가.. 2025. 2. 3.
[React] Context useContext는 기존의 React에 존재하는 Context를 더 편하게 사용할 수 있게 해주는 역할Context 개념context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있음 (React공식문서)⇒ 데이터가 필요할 때마다 props를 통해 전달할 필요 없이 context 로 공유 가능context APIcreateContext : context 객체 생성Provider : 생성한 context를 하위 컴포넌트에게 전달Consumer : context의 변화를 감시하는 컴포넌트 2023. 8. 31.
[React] React에서의 불변성(Immutability) 1. 불변성- 변하지 아니하는 성질.- 공간 좌표의 반전, 시간 반전, 회전, 로런츠 변환 따위의 특정한 변환이나 연산으로도 변화하지 않는다고 하는, 물리량이나 물리 법칙이 갖는 성질2. JavaScript에서원시타입의 값들은 불변성을 가지고 있음string, number, bigint, boolean, undefined, symbol, null모든 원시 값은 불변하여 변형할 수 없음 (https://developer.mozilla.org/ko/docs/Glossary/Primitive)참조형 값들(객체, 배열, 함수 등) 은 다르게 동작number가 참조하고 있는 apple의 주소 값은 변경된다.복사되는 것이 아닌 참조값을 갖게되기 때문에, 사본을 수정하게 되면 원본도 수정됨let string = 'd.. 2023. 8. 30.
[React] setState할 때 […] 하는 이유 (ChatGPT) setState 할때 […] ←— 하는 이유 분석하기언제 써야하고, 안써야 하는지setState 함수는 React 라이브러리에서 상태(state) 관리를 위해 사용되는 함수입니다. 이 함수를 호출하면 React 컴포넌트의 상태를 업데이트하고, 컴포넌트를 다시 렌더링하도록 스케줄링합니다. setState 함수에 전달되는 값은 변경된 상태를 나타내며, 이 값은 새로운 상태로 컴포넌트를 업데이트할 때 사용됩니다.setState 함수를 사용할 때 [...] 형태로 이전 상태를 업데이트하는 이유는, React의 상태 업데이트는 불변성(Immutability)을 유지하면서 이루어져야 하기 때문입니다. 이는 다음과 같은 이유로 중요합니다:성능 최적화: React는 가상 DOM (Virtual DOM)을 사용하여 실제.. 2023. 8. 30.
[React] setState할 때 […] 하는 이유 setState 역할setState()가 쓰일 때, 컴포넌트의 state 객체에 대한 업데이트를 실행state가 변경되면, 컴포넌트는 리 렌더링state와 props의 차이점props와 state는 Javascript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있습니다.props는 컴포넌트에 전달되며, state는 컴포넌트 안에서 관리되는 차이점이 있습니다.언제 setState가 비동기로 작동할까?import React, { useState } from "react";function App() { const [state, setState] = useState(1); const onClick = () => { setState(state + 1); console.log.. 2023. 8. 30.
728x90

티스토리툴바