리액트 (23) 썸네일형 리스트형 Render as you fetch : 렌더링과 데이터 페칭을 동시에 우리의 목적 필요한 데이터를 최대한 즉시 가져오자 보통 데이터 fetch는 useEffect를 이용하는데, 이는 dom이 실제로 화면에 그려져 interactive한 이후이다. (코드 로드 > 코드 파싱 > 코드 실행 > 컴포넌트 렌더링 > useEffect로 요청) 그리고 사용자는 렌더링 시간 + 데이터 가져오는 시간 만큼을 시리얼하게 기다려야 한다. 화면 그리기 전에 필요한 데이터를 가져올 수는 없을까? Render as you fetch (렌더와 데이터 페치를 동시에)를 사용한다. 해당 방법을 위해선 suspense가 필요하다. 먼저, loading, error, success를 사용하는 useEffect훅을 대체한다. 성공하면 데이터, 그 외에는 promise를 throw 한다. function .. [WIP] 리액트 공식문서 읽기 : Thinking in React with Hooks 내 생각엔 리액트 처음 공부할 때 필독해야하는 글이다. 이걸 안보고 지나갔다니. 내 맘대로 의역 및 요약해서 정리한다. 리액트처럼 생각하기 - 리액트에 대한 오해 리액트는 클래스 컴포넌트에서 시작했다. 함수(형이 아님) 컴포넌트가 나왔다 하더라도, 리액트는 객체지향 철학에 깊은 뿌리를 두고 있다. 상태를 캡슐화하고, 외부로 뷰라는 인터페이스만 제공한다. 객체지향 설계에서 가장 중요한 것은 역할, 협력, 책임이다. 적절한 객체에 적절한 책임을 할당하는 것이 객체지향 설계의 첫번째 덕목이며, 이는 "관심사의 분리"라고도 불린다. 리액트가 클래스보다 좀 더 어려운 점은 뷰라는 관심사가 설계에 포함되어야 한다는 점이다. 이는 css기술과 엮여있고, 컴포넌트 best practice에 대한 논란이 있다. (요즘은.. React Suspense : 비동기 렌더링 내용은 아직 "미정" 상태에요 Dan Abramov: Beyond React 16 | JSConf Iceland - YouTube 제어의 역전(IOC : Inversion of Control) in React 원문 보기 사용 중인 루틴에 기능을 추가해달라는 요청을 받게 되면? 리액트 컴포넌트는 props를 추가하고, 리액트 훅은 argument를 추가할 것이다. 구현 로직은 점점 복잡해진다. 이같은 조치는 다음 문제들을 야기하기 쉽다 성능 이슈 : 코드 사이즈 증가 유지보수 문제 : 한가지 함수가 여러 기능을 하면 수정 유발 원인이 많다. 구현의 어려움 : 조건문은 자주 다른 조건들과 같이 바뀜. 수정 포인트가 많이 발생함. API의 복잡성 : props, argument, option 등의 플래그가 너무 많으면, 나중에 안쓰이는게 분명 발생함. 문서화도 어려움 변화에 최적화하라 Inversion Of Control API는 추상화를 이용하여 로직을 적게 구현하고, 대신 사용자의 코드를 실행한다. 플래그를 이.. [Epic React] useLayoutEffect, useImperativeHandle, forwardRef useLayoutEffect When? DOM에 (직접) 관찰 가능한 변경을 가하여 브라우저가 업데이트된 dom 페인트해야 하는 경우 LayoutEffect를 사용합니다. 포커싱, 스크롤(top, bottom 이동) 그 외 전부 useEffect function MessagesDisplay({messages}) { const containerRef = React.useRef() // update, unmount시마다 호출 React.useLayoutEffect(() => { containerRef.current.scrollTop = containerRef.current.scrollHeight }) return ( {messages.map((message, index, array) => ( {message.. useEffect는 라이프사이클 훅이 아니다. Myths about useEffect | Epic React by Kent C. Dodds Myths about useEffect Some common mistakes I see people make with useEffect and how to avoid them. epicreact.dev TLDR : useEffect는 deps의 상태들과 사이드이펙트를 동기화하기 위한 훅이다. 처음에 리액트를 학습하면 클래스 컴포넌트와 라이프사이클에 대해 배운다. 라이프사이클 함수는 보통 내 코드를 다른사람의 코드 안에 끼워넣는 방법이다. 해당 정보를 의식하고 클래스 컴포넌트처럼 코딩하면 아래처럼 된다. function DogInfo({dogId}) { const controllerRef = React.useRef.. [Epic React] React.createElement, jsx와 바벨 Get Really Good at React | Epic React by Kent C. Dodds https://epicreact.dev/learn/ epicreact.dev 해당 수업을 내돈내산하여 공부한 내용이다. props를 어떻게 사용해야 가장 성능에 영향을 안주는지 알아보자. 우리가 리액트로 개발하며 주구장창 만드는 jsx 컴포넌트는 바벨에 의해 컴파일되어 React.createElement로 변환된다. 정말 기본중의 기본인 두 가지 사용법을 보고가자. 첫번째는 2개 파라미터. 두번째에 props 객체 때려넣기 세번째는 prop을 null로 지정하고, 세번째 인자에 children 넣기 ReactDOM.render(div(), document.getElementById('root')) funct.. 이전 1 2 3 다음
