REACT (187) 썸네일형 리스트형 리액트 디자인 패턴(React design pattern) : Compound Component Pattern(컴파운드 컴포넌트패턴)과 Uncontrolled Component Pattern(유상태 컴포넌트 패턴) radix-ui와 같은 라이브러리는 컴파운드 컴포넌트 패턴을 uncontrolled component 패턴과 조합한 구현을 채택하고 있습니다. HTML 삽입 미리보기할 수 없는 소스 위 다이얼로그 컴포넌트의 재미있는 점은, children으로 전달받은 컴포넌트에 dialog를 열기 위한 핸들러를 전달할 필요가 없다는 점입니다. Edit profile 컴파운드 컴포넌트는 내부적으로 context를 활용하니, Dialog 컨텍스트를 활용해 해당 버튼이 클릭되는 것을 어떻게든 감지한다는 것을 알 수 있습니다. 그런데 일반 와 버블링을 활용하면 span을 div로 감싸다보니 css(스타일) 관점에서 원하지 않는 동작이 발생할 수 있습니다. 따라서 가장 보수적인 방법은 button으로 open, close 이벤트.. [React] 리액트 Children, React Children API의 모든 것 Children API를 사용하면 children prop으로 받은 JSX를 조작하고 변형할 수 있습니다. const mappedChildren = Children.map(children, child => {child} ); Children API의 명세 Children.count(children) Children.count(children)를 호출하여 children 데이터 구조의 자식 수를 계산합니다. import { Children } from 'react'; function RowList({ children }) { return ( Total rows: {Children.count(children)} ... ); } 파라미터 children: 컴포넌트가 받은 children prop의 값. 리턴값.. 리액트 이벤트 리스너는 어떻게 등록되고 처리되는가 우리는 리액트 컴포넌트의 JSX에 콜백 형태로 이벤트 리스너를 등록합니다. 이는 natiive DOM API를 사용할 땐 권장되지 않는 방식입니다. 보통 셀렉터와 이벤트 리스너 API를 사용하죠. 그런데도 우리는 리액트로 UI를 개발할 때, 콜백 이벤트 핸들러를 너무나도 자연스럽게 사용하고 있습니다. 왜 그래도 되는지 알아봅시다. 오개념 (The misconception) 먼저 질문을 던저 봅시다. 우리는 다음과 같은 코드를 function App() { return ( console.log('Click on the button')}> Click me ); } 이렇게 이해해도 되는걸까요? // `buttonRef` an imaginary reference added by React on the butto.. 자바스크립트 스킬 티어 리스트 출처 : https://www.youtube.com/watch?v=vdiYtiKD8eI fireship youtube 유투브 추천알고리즘이 재미있는 자료를 소개해주어 읽어봤습니다. state of js 2023(https://stateofjs.com) 레포트를 기반으로 만들어 진 것 같은데, 개인적으로 의미있는 결과들이 보여 정리해보고자 합니다. Vite(S) vs Next.js(S) Vite는 사실상 프론트엔드의 스프링과 같은 포지션을 잡고 있습니다. 프레임워크 별 설정 자동화 및 단순화 기능을 지원합니다. Vite와 Rollup.js 플러그인 사용방법만 알면 모든 프론트엔드 프레임워크를 쉽게 설정할 수 있습니다. Next.js는 현재 프론트엔드 프레임워크 3대장 체제에서 1대장 체제로 서열정리에 성공.. [React 디자인 패턴] Renderless Component 패턴 리액트에는 훅 아키텍처 이전에 유행한 Render Props 패턴이 있었다. https://reactjs.org/docs/render-props.html Render Props – React A JavaScript library for building user interfaces reactjs.org children을 함수 형태 인자로 받아 하단 컴포넌트로의 의존성을 명시적으로 제공하는 패턴으로 의존성 주입의 베스트 프랙티스 중 하나로 여겨졌지만, 반대로 render props hell을 생성하는 단점이 있었다. 훅 아키텍처와 함께 사라진 패턴이지만, 분명 컨테이너 컴포넌트는 사이드 이펙트의 격리를 위해 필요하다. https://kciter.so/posts/effective-atomic-design Ef.. zustand와 react query를 같이 사용하는 방법 zustand와 react query는 둘 다 여러 개의 전역 스토어를 지향합니다. 두 라이브러리를 같이 잘 사용하는 방법을 배워봅시다. 대부분의 아이디어는 아래 글에서 가져왔습니다. https://tkdodo.eu/blog/working-with-zustand Working with Zustand Let's dive into some tips for working with Zustand - one of my favourite client state management libraries in React. tkdodo.eu Zustand 전역 스토어를 제공하며 셀럭터를 포함한 간단한 API를 포함합니다. 용량도 매우 작습니다.(1.1kb) 개념적으로 리덕스와 비슷합니다. 사용중인 필드를 셀렉터로 추적해야 .. 리액트와 유닛 테스트를 위한 클린 아키텍처 [부제, 의존성 주입은 정말 필요한가?] 아래 글에 포함하려다 따로 떼내어 적습니다. https://itchallenger.tistory.com/771 헥사고날 아키텍처와 관심사의 분리를 이용한 클린 코드 1. 어니언, 헥사고날 아키텍처 헥사고날, 어니언 아키텍처는 port, adaptor 패턴의 별칭일 뿐입니다. https://blog.ploeh.dk/2016/03/18/functional-architecture-is-ports-and-adapters/ Functional architecture.. itchallenger.tistory.com 리액트의 모든 컴포넌트 인터페이스는 다음과 같이 추상화 할 수 있습니다. (props:React.ChildrenWithProps)=>React.ReactNode 하지만 보통 구체적인 구현체인 평션 컴포넌.. CSR 성능 최적화를 위한 PRPL 패턴 with React rendering-on-the-web 문서서는 클라이언트 렌더링 최적화를 위해 RTTs를 줄이거나 중요한 스크립트와 데이터를 를 사용하여 더 빨리 전달하거나, JS 용량을 줄이거나(tight JavaScript budget) PRPL 패턴을 사용하거나 코드 스플리팅을 사용하거나(aggressive code-splitting) Application Shell caching을 사용하라고 합니다. 이 중에서 PRRL 패턴을 알아보겠습니다. TL;DR P : 링크의 rel 속성을 통해 프리 로딩(페치) 이용 R : 서버 렌더링을 이용해 프리 렌더링 이용 P : 서비스 워커를 이용해 프리 캐시를 이용 L : loading 속성을 통해 지연 로딩을 이용 PRPL 패턴이란? PRPL은 다음의 약어입니다. Push (.. 이전 1 2 3 4 5 6 ··· 24 다음
