Je개발 일지

1. 무엇을 최적화해야 하는가? 프론트엔드에서 가장 비용이 많이 드는 것은 DOM 에 화면을 그리는 Layout(혹은 Reflow), Paint(Repaint) 하는 과정이다. 물론, 이미지 압축, 네트워크 요청 최적화 등의 작업들도 존재하지만 이 장에서는 “React 시작하기” 에 이어 가장 기초적인 React 라이브러리의 최적화 방안에 대해서 알아보고자 한다. 흔히 프론트엔드에서 최적화한다고 말하면 이 화면을 그리는 작업을 최소화하는 것을 뜻한다. 그렇다면 React 에서는 어떤 방식으로 DOM 에 화면을 그리는 지를 알아야 한다. 1-1) React 의 Trigger, Render, Commit React 에서 클래스형 컴포넌트가 주류였던 시기에는 Vue 와 마찬가지로 “Life Cycle” 이 중..

하단의 내용을 문서로 먼저 작성 후, 발표용 PDF 를 만들었다. 예시는 React 와 Vue 를 비교하면서, Vue 사용자들이 React 를 처음 사용할 때 당황할 법한 내용들을 담고 있다. 아래의 문서들이 너무 읽기 힘들다면 시각화된 자료로 간단하게 만든 PDF 파일을 보는 것을 권장. 1. React 의 고민 1-1) Angular.js 의 불편함 React 가 등장하기 전, 모던 프레임워크로 Angular.js 가 등장했다. Angular.js 는 작은 컨테이너들을 결합해 애플리케이션을 구축하는 형태다. 하지만, 컨테이너들이 결합하고 동일한 데이터를 사용하는 컨테이너들이 데이터를 조작하면서 “의도치 않은 데이터 변경” 이 이곳저곳에서 생기기 시작했다. 애플리케이션의 구조는 더욱 커져 갔고, 데이터..

1. 예제로 알아보는 state 끌어올리기 import { useState } from 'react'; function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( {title} {isActive ? ( {children} ) : ( setIsActive(true)}> Show )} ); } export default function Accordion() { return ( Almaty, Kazakhstan With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its c..

state 를 잘 구조화하면 컴포넌트가 수정과 디버깅에 용이해진다. 1. state 구조화 원칙 컴포넌트를 작성할 때는 얼마나 많은 state 변수를 사용할지, 데이터 모양은 어떻게 해야할지를 선택해야 한다. 관련 state 를 그룹화 한다. 항상 두 개 이상의 state 변수를 동시에 업데이트한다면 하나의 state 로 합치는 것이 좋다 state 모순을 피하라 여러 state 조각이 서 모순되거나 불일치할 방식으로 state 를 구성해서는 안 된다. 불필요한 state 를 피하라 렌더링 중에 컴포넌트의 props 나 기존 state 변수에서 일부 정보를 계산할 수 있다면 해당 정보를 해당 컴포넌트의 state 에 넣지 말아야 한다. state 중복을 피하라 동일 데이터가 여러 state 변수 간에 또..

1. 선언형 UI 와 명령형 UI 의 차이점 React 는 직접 UI 를 조작하지 않는다. 이는 컴포넌트를 직접 활성화하거나 비활성화하지도 않고, 보여주거나 숨기지도 않는다. 대신 표시할 내용을 선언하면 React 가 UI 를 업데이트할 방법을 알아낸다. 2. UI 를 선언적인 방식으로 생각하기 UI 를 React 로 다시 구현하는 과정을 보면 다음과 같다. 컴포넌트의 다양한 시각적 상태를 식별한다 상태 변화를 촉발하는 요소를 파악한다 useState 를 사용해 메모리의 상태를 표현한다 비필수적인 state 변수를 제거한다 이벤트 핸들러를 연결해 state 를 설정한 Step 1 : 컴포넌트의 다양한 시각적 상태 식별하기 먼저, 사용자에게 표시될 수 있는 UI 의 다양한 상태를 모두 시각화 해야 한다. ..

state 를 잘 구조화하는 방법, state 업데이트 로직을 유지 관리하는 방법, 멀리 떨어진 컴포넌트 간에 state 를 공유하는 방법에 대해서 알아볼 것 1. state 로 입력에 반응하기 React 를 사용하면 코드에서 UI 를 직접 수정하지 않는다. 대신 컴포넌트의 다양한 시각적 state 별로 표시하려는 UI 를 구현하고, 사용자 입력에 대한 응답으로 state 변경을 촉발한다. 2. state 구조 선택 state 를 잘 구조화하면 수정과 디버깅이 편한 컴포넌트와 버그가 끊임없이 발생하는 컴포넌트의 차이를 만들 수 있다. state 에 불필요하거나 중복된 정보를 포함하지 말 것 import { useState } from 'react'; export default function Form()..

1. 변이(Mutation)란 무엇인가 state 는 javaScript 의 어떤 값이든 담을 수 있다 이는 객체도 담을 수 있다는 것. 기술 적으로 객체 자체의 내용을 변경하는 것은 가능하다 const [p, setP] = useState({x: 0, y: 0}) p.x = 5 위 로직은 자바스크립트에서 가능하다. React state의 객체는 기술적으로 위와 같이 변이할 수 있지만, 이는 원시 타입과 같이 불변하는 것처럼 취급해야 한다. 2. state 를 읽기 전용으로 취급할 것 즉, state 에 넣는 모든 값을 read-only 로 취급해야 한다 import { useState } from 'react'; export default function MovingDot() { const [posit..

1. state 업데이트 일괄 처리 import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 ) } 이전 챕터에서 이 코드에서 onClick 의 결과로 h1 에 보여질 number 값은 +1 된 값임을 확인했다. 여기에서 한 가지 더 논의 될 사항이 존재한다 React 는 state 업데이트를 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다 이 원칙에 의거해 리렌더링은 모든 setNu..

1. state 를 설정하면 렌더링이 촉발된다 state 를 설정하고 이 값을 업데이트 하면 React 의 리렌더링을 촉발한다. 즉, 인터페이스가 이벤트에 반응하려면 state 를 업데이트 해야 한 import { useState } from 'react'; export default function Form() { const [isSent, setIsSent] = useState(false); const [message, setMessage] = useState('Hi!'); if (isSent) { return Your message is on its way! } return ( { e.preventDefault(); setIsSent(true); sendMessage(message); }}> set..

UI 를 요청하고 제공할 때 세 가지의 단계를 거친다 Trigger : 렌더링 촉발 Render : 컴포넌트 렌더링 Commit : DOM 에 커밋 1. Trigger : 렌더링 촉발 컴포넌트에서 렌더링이 일어나는 데는 두 가지 이유가 있다. 첫 렌더링 컴포넌트의 state 혹은 상위 요소 중 하나가 가 업데이트 된 경우 2. Render: 컴포넌트 렌더링 렌더링을 촉발시키면 React 는 컴포넌트를 호출해 화면에 표시할 내용을 파악한다 렌더링이란 React 에서 컴포넌트를 호출하는 것이다 첫 렌더링에서 React 는 루트 컴포넌트를 호출한다 이후의 렌더링에서 React 는 state 의 업데이느에 의해 렌더링이 발동된 함수 컴포넌트를 호출한다 이 과정은 재귀적으로 이뤄진다 업데이트된 컴포넌트를 반환하면..