react (12) 썸네일형 리스트형 [React] Compound Component Pattern 실습 Compound Component PatternCompound Component Pattern은 부모 컴포넌트가 상태와 로직을 관리하고, 자식 컴포넌트들이 이 상태를 Context를 통해 공유하며, 사용자가 자식 컴포넌트들을 선언적으로 조합하여 복잡한 UI를 유연하게 구축할 수 있도록 하는 패턴이며, 일반적으로 React의 Context API를 활용해 구현된다.(compound = 화합물) (잠깐 ⸜(*◉ ᴗ ◉)⸝)[Context API 간단 정의]Context API는 React에서 컴포넌트 간에 데이터를 전달할 때, 중간 컴포넌트들에게 일일이 props를 넘기지 않고도 전역처럼 값을 공유할 수 있게 해주는 기능이다.부모 → 자식 → 손자 → 증손자 이렇게 깊은 트리 구조에서도 필요한 컴포넌트가 바.. Tree 프로젝트 | 애니메이션 구현기 – React + SVG 느낌 내기 이번 Tree 프로젝트에서는 사용자의 감정 기록 데이터를 시각화하여 보여주는 기능 중 하나로 트리 트렁크 애니메이션을 구현했습니다.이 애니메이션은 사용자가 얼마나 많은 질문에 응답했는지를 기반으로 트리 위에 알록달록한 "나뭇잎"을 떠다니듯 그려주는 방식입니다.이번 글에서는 이 트리 트렁크가 어떻게 동작하는지 코드 중심으로 분석하고 어떤 고민을 했는지도 함께 공유하려 합니다.목적: 감정 기록의 시각화사용자는 매일 감정에 대한 질문에 응답합니다.이 응답 수치를 트리 열매 개수로 시각화하면 성취감과 피드백을 줄 수 있을 것 같았고 그걸 시도한 UI 요소가 바로 트리 트렁크입니다.색상은 유저의 아바타에 따라 다르게const COLOR_MAP = { GREEN: [...], YELLOW: [...], PIN.. React에서 useEffect(() => {}, [])를 쓰는 이유 📚 목차useEffect란?useEffect의 두 번째 인자, dependency array빈 배열 []을 넣는 이유는?실전 예시의존성 배열을 잘못 쓰면 생기는 문제요약 정리마무리 React를 처음 접했을 때 useEffect(() => {...}, [])처럼 빈 배열이 왜 필요한지 의아했던 적 있지 않으신가요?이 글에서는 useEffect의 기본 개념부터, 왜 종종 "빈 배열"을 함께 사용하는지에 대해 하나하나 쉽게 정리해볼게요.1️⃣ useEffect란?useEffect는 React 컴포넌트가 렌더링될 때 부수 효과(side effect) 를 실행할 수 있게 해주는 Hook입니다.부수 효과란?데이터를 불러오는 작업 (fetch)이벤트 리스너 등록타이머 설정콘솔 출력, 로깅 등useEffect(() .. React에서 리렌더링은 언제 일어날까? ✍️ 이 글을 쓰게 된 이유React를 사용하면서"왜 여기서 다시 그려지지?""이 컴포넌트는 바뀐 게 없는데 왜 또 실행돼?"이런 의문이 생기곤 했어요.그러다 보니 자연스럽게 리렌더링에 대해 공부하게 되었고,그 핵심을 이해하려면 먼저 "렌더링 자체가 뭔지"부터 짚고 넘어가야 한다는 걸 알게 됐습니다.이 글은 제가 React에서 렌더링과 리렌더링 개념을 이해하고,불필요한 리렌더링을 줄이는 팁들을 정리한 내용입니다.렌더링(Rendering)이란?React에서 렌더링이란 컴포넌트의 JSX를 실제 DOM 구조로 변환해 브라우저에 그리는 것을 말합니다.즉,Hello, React!같은 코드를 브라우저가 실제로 인식할 수 있도록 만들어사용자에게 보이게 만드는 과정이에요.React에서 렌더링 순서이 모든 과정이 렌더링.. React Virtual DOM 정리하기 React를 배우다 보면 반복적으로 등장하는 개념 중 하나가 바로 Virtual DOM(가상 돔)이에요.공부하면서 "왜 React는 빠를까?"에 대한 해답을 찾고 싶었고,결국 그 중심에는 Virtual DOM이 있었습니다.이 글은 제가 공부한 내용을 정리하며,“React는 DOM을 어떻게 다루기에 이렇게 효율적일까?”라는 질문에 답을 찾은 과정을 공유하려고 씁니다.📚 DOM이란 무엇일까?먼저, DOM에 대한 개념을 정확히 짚고 넘어가야 해요.DOM (Document Object Model)= HTML 문서를 트리 구조의 객체로 표현한 것예를 들어, 우리가 HTML을 이렇게 작성하면 안녕하세요 React 공부 중입니다브라우저는 이 문서를 아래처럼 트리 형태로 해석합니다:document └── htm.. Heroicons로 React 아이콘 1초 삽입하기 |설치 없이 바로 복붙! React 프로젝트를 하다 보면 자연스럽게 고민하게 되는 요소 중 하나가 바로 아이콘 디자인입니다.직접 만들자니 번거롭고, 기존의 라이브러리는 무겁거나 제한적인 경우도 있죠.그럴 때 강력 추천하는 사이트가 바로http://Heroicons.dev HeroiconsHeroicons is a collection of MIT open source interface icons for web and app development. Icons are free, no attribution required. Icons by @steveschoger. Website by @username_ZAYDEK.heroicons.dev입니다.MIT 라이선스로 자유롭게 사용 가능하며 Tailwind CSS의 디자이너 Steve Sch.. React에서 async/await 제대로 활용하기 🙋♂️ 왜 비동기가 필요할까?React 앱을 만들다 보면 외부 API에서 데이터를 가져오는 일이 많습니다. 그런데 자바스크립트는 싱글 스레드 기반이라 시간이 오래 걸리는 작업이 있으면 다른 작업들이 블로킹(멈춤) 될 수 있어요.이 문제를 해결하기 위해 비동기 처리가 필요하고, 이걸 깔끔하게 해주는 문법이 바로 async/await입니다.async와 await란?개념 설명async비동기 함수임을 선언합니다. 항상 Promise를 반환합니다.awaitPromise가 끝날 때까지 기다리고, 그 결과값을 반환받습니다.쉽게 말해, "동기 코드처럼 보이지만 실제로는 비동기 처리"가 되는 마법 같은 문법이에요.실전 예제: 유저 리스트 불러오기 (주석 포함)import React, { useEffect, useSt.. [refactor] Lv.3 React 프로젝트에서 명명 규칙 통일하기 (feat. PascalCase) 우리 프로젝트 초반에는 기능 구현이 먼저였다.빠르게 화면을 띄우고, 버튼을 눌렀을 때 동작하게 하는 게 우선이었고파일 이름? 그건 나중에 정리하면 되지 뭐.그렇게 미뤘던 이름들이 쌓이고 쌓여 어느 순간 팀원들끼리 이런 대화가 오가기 시작했다."그 로그인 관련 파일 이름 뭐였지?""그거 Loginform이었나? 아니면 loginForm...? 대문자였나 소문자였나..."우리는 그제야 깨달았다.제각각 짓던 파일명 때문에 개발 생산성이 떨어지고 있었단 걸.혼란스러웠던 파일명들초기 로그인/회원가입 관련 컴포넌트 파일명은 이런 식이었다.LoginForm.jsSignup.jsMypage.jsNewpassword.jsPasswordFind.jsmodules.cssMypage.js: 단어 구분 없음Newpassword.. 이전 1 2 다음
