Controlled 컴포넌트와 UnControlled 컴포넌트 😊 공통 컴포넌트 고민해보기

공통 컴포넌트를 개발할 때, 특히 input이 있는 경우 자주 고민하는 문제가 있다. 바로, 상태를 어디서 컨트롤하게 할지 고민하게 되는 것이다. 공통 컴포넌트 외부에서 컨트롤을 주입하여 외부에서 사용하도록 하는 방법이 있고, 공통 컴포넌트 내부에서 자체적으로 컨트롤되도록 설정하는 방법이 있다. 전자의 경우는 좀 더 다양한 상황에서 사용할 수 있는 컴포넌트를 개발할 수 있다는 장점이 있다 🐥후자의 경우는 좀 더 선언적으로 컴포넌트를 생성하여 내부 구현이 어떻게 되었든 간에, 기능을 더 손쉽게 외부에서 가져다 사용할 수 있는 장점이 있다 🐣 근본적으로는 컴포넌트에서 상태 관리의 책임을 어디냐 두느냐, 에 대한 질문도 같이 포함되어 있다고 생각한다. Controlled VS Uncontrolled상태 소..

• format_list_bulleted React
• · 2025. 7. 13.
• textsms

리스트 가상화(Virtualization) - 성능 최적화를 위한 필수 기술 (많은 데이터 표현 시 최적화)

🎯 리스트 가상화란?많은 데이터를 렌더링할 때 성능을 최적화하는 기법으로, 실제로 보이는 항목만 렌더링하여 불필요한 리소스 사용을 줄이는 방식이다. 수천, 수만 개의 리스트를 한꺼번에 렌더링하면 성능 문제가 발생하는데, 가상화를 적용하면 이를 해결할 수 있다.🛠 구현 방식리스트 가상화를 구현하는 방법에는 여러 가지가 있지만, 여기서는 두 가지 방식을 소개한다.absolute 포지셔닝 방식리스트 전체 높이를 유지하면서 보이는 아이템만 absolute 위치 조정하여 렌더링.빠른 성능을 보장하지만, 일부 스타일이 변경될 경우 위치 계산이 틀어질 가능성이 있음.패딩(Padding) 방식위/아래에 div로 패딩을 추가하여 스크롤 위치를 조정.스타일 변경에 강하고, absolute 없이 구현 가능하여 유지보수성..

• format_list_bulleted 웹 개발
• · 2025. 7. 4.
• textsms

MDX 설정하기 in Next.js 15 🍝 (Markdown for thecomponent era)

개발을 하다 보면 마크다운 문서에 인터랙티브한 React 컴포넌트를 섞고 싶을 때가 있을 수 있다.(ex. 문서 안에 버튼을 넣거나, 경고 박스를 커스텀 컴포넌트로 만들고 싶을 때) 그럴 때 유용하게 쓰이는 게 바로 MDX이다 🍹 ✨ MDX란? MDX는 Markdown + JSX이다.즉, 마크다운 문법 안에서 React 컴포넌트를 직접 사용할 수 있는 포맷을 의미한다. 직접 예시로 확인해보자면, 다음과 같은 느낌이다.# 안녕하세요이건 일반 마크다운입니다.눌러보세요!+ markdown 문법 #과 컴포넌트 Button이 동시에 존재하는 특이한 문법이다 🚀 Next.js 15에서 MDX 사용하는 방법그렇다면 이번에는 App Router기반 Next.js 15버전에서 직접 MDX를 써보고자 한다. 먼저..

• format_list_bulleted React
• · 2025. 5. 18.
• textsms

React를 사용할 때, HTML을 직접 삽입하기 - dangerouslySetInnerHTML 사용 예제

React를 쓰다 보면, HTML 문자열을 그대로 DOM에 삽입해야 하는 상황이 종종 있다. 예를 들어 CMS에서 내려오는 콘텐츠, 외부 라이브러리에서 생성된 HTML, 혹은 서버에서 렌더링된 일부 HTML 조각 등을 사용할 때 그렇다. 그런데 React에서는 일반적으로 HTML 문자열을 직접 넣을 수 없다.그래도 넣어야 하는 경우가 있다면 사용할 수 있는 게 바로 dangerouslySetInnerHTML인데, 이름부터 위험하듯, 조심스럽게 사용해야 한다. 🤔 왜 dangerouslySetInnerHTML일까?React는 XSS(Cross-Site Scripting) 공격을 방지하기 위해 JSX 내부에서 HTML 문자열을 직접 렌더링하지 못하게 막는다.그래서 HTML 문자열을 렌더링하려면 특별한 방법..

• format_list_bulleted React
• · 2025. 4. 20.
• textsms

JS UI 라이브러리를 instance로 만들어 React 이식하기 (with useImperativeHandle & Tui Grid) 💘

가끔 좋은 JS 라이브러리를 발견해서 써보려고 했는데, 해당 라이브러리가 직접 React를 지원하지 않는 경우들이 있다.이런 경우에 UI 컴포넌트 instance를 생성해서 React에 직접 연결해주는 작업이 필요한데, 이를 어떻게 잘 할 수 있을지 고민해보았다 😃(이런 경우는 인스턴스를 직접 컨트롤해야 하는 UI 컴포넌트가 많아서 더욱 고민이 필요하다) 보통 React에서는 useRef를 통해서 인스턴스를 관리하는데, 여기에 추가로 useImperativeHandle을 활용해 Tui Grid를 React에서 자연스럽게 사용하는 예제를 한번 만들어 보았다.(tui는 react 까지 레핑된 라이브러리를 하긴 하는데.., 유지보수가 멈췄다 🤣)1️⃣ 기본적인 그리드 설정Tui Grid는 JavaScrip..

• format_list_bulleted JavaScript
• · 2025. 4. 1.
• textsms

Input 이벤트에서 한글 처리하기. event.isComposing이란? (한글 두 번 입력 방지 😸)

프론트엔드 개발을 하다 보면 input 이벤트나 keydown, keyup 이벤트를 다룰 때, 예상치 못한 버그를 마주할 때가 있다. 특히 IME(Input Method Editor)를 사용하는 환경(예: 한글 입력)에서 이벤트 핸들러가 엉뚱한 동작을 하거나, 입력값이 두 번 처리되는 등의 문제가 발생할 수 있다. 이때 유용하게 활용할 수 있는 속성이 바로 event.isComposing이다. event.isComposing 🎉event.isComposing은 사용자가 IME를 사용하여 입력을 조합(Composing)하는 중인지 여부를 나타내는 불리언 값이다.(한글의 경우에는 자음과 모음, 혹은 또 하나의 자음이 합쳐져 하나의 글자가 되므로, 조합형 글자이다)true 사용자가 아직 글자를 완성하지..

• format_list_bulleted JavaScript
• · 2025. 3. 12.
• textsms