FE/리뷰

메모이제이션은 필요한 곳에만메모이제이션도 어디까지나 비용이 드는 작업이므로 최적화에 대한 비용을 지불할 때는 항상 신중해야 한다고 주장값을 비교하고 렌더링 또는 재계산이 필요한지 확인하는 작업, 그리고 이전에 결과물을 저장해 두었다가 다시 꺼내와야 한다는 두 가지 비용이 존재 => 리렌더링 비용보다 저렴한지? 렌더링 과정의 비용은 비싸니 모조리 메모이제이션memo를 사용하지 않을 때 발생하는 비용 : 렌더링 비용, 컴포넌트 내부의 복잡한 로직의 재실행 비용, 앞의 두가지 비용이 모든 자식 컴포넌트에서 반복되는 비용, 리액트가 구 트리와 신규 트리를 비교하는 비용

브라우저의 렌더링HTML과 CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정  리액트의 렌더링브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정 리액트의 렌더링 이유최초 렌더링 : 사용자가 처음 애플리케이션에 진입하면 발생리렌더링 : 최초 렌더링이 발생한 이후로 발생하는 모든 렌더링클래스 컴포넌트의 setState가 실행되는 경우 상태의 변화가 발생하므로 리렌더링 발생클래스 컴포넌트의 forceUpdate가 실행되는 경우함수 컴포넌트의 useState()의 두 번째 배열 요소인..

클래스 컴포넌트import React from 'react'// props 타입 선언interface Props { required?: boolean text: string}// state 타입 선언interface State { count: number isLimited?: boolean}class Component extends React.Component { private constructor(props : Props) { super(props) this.state = { count: 0, isLimited: false, } } render() { const { props: {required, t..

DOM웹페이지에 대한 인터페이스브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있음 브라우저 렌더링 과정브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드함브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구성된 DOM 트리를 만듦2번 과정에서 CSS 파일을 만나면 해당 CSS 파일도 다운로드 함브라우저의 렌더링 엔진은 CSS도 파싱해 CSS 노드로 구성된 CSSSOM트리를 만듦브라우저는 2번에서 만든 DOM 노드를 순회하는데, 여기서 모든 노드를 방문하는 것이 아니고 사용자 눈에 보이는 노드만 방문함5번에서 제외된, 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용함레이아웃 : 각 노드..

JSX란XML과 유사한 내장형 구무능로 리액트에 종속적이지 않은 독자적인 문법자바스크립트 표준 문법이 아닌 페이스북이 임의로 만든 새로운 문법이기 때문에 반드시 트랜스파일러를 거쳐야 자바스크립트 런타임이 이해할 수 있는 의미 있는 자바스크립트 코드로 변환됨JSX의 설계 목적은 다양한 트랜스파일러에서 다양한 속성을 가친 트리 구조를 토큰화해 ECMAScript가 이해할 수 있는 코드로 변경하는 것JSX는 자바스크립트 내부에서 표현하기 까다로웠던 XML 스타일의 트리 구문을 작성하는 데 많은 도움을 주는 새로운 문법임  JSX의 정의JSXElement가장 기본 요소HTML의 요소와 비슷한 역할JSXElement의 형태JSXOpeningElement : 일반적으로 볼 수 있는 요소, JSXOpeningElem..

타입스크립트란기존 자바스크립트 문법에 타입을 가미한 것동적 타입인 자바스크립트와 달리 정적으로 빌드 타임에 타입 체크를 수행함즉, 자바스크립트의 슈퍼셋으로서 함수의 반환 타입, 배열, enum 등 기존에는 사용하기 어려웠던 타입 관련 작업들을 손쉽게 처리함리액트에서도 @types/react 라이브러리를 제공해 타입스크립트로 코드를 안정적으로 작성 가능함  타입스크립트 활용법any 대신 unknown 사용하기any 타입은 정말 불가피할 때만 사용해야 하는 타입any를 사용하는 것은 타입스크립트가 제공하는 정적 타이핑의 이점을 모두 버리게 되는 것불가피하게 아직 타입을 단정할 수 없는 경우 unknown을 사용하는 것이 좋음unknown은 모든 값을 할당할 수 있는 top type이지만 type narrow..

구조 분해 할당배열 또는 객체의 값을 분해해 개별 변수에 즉시 할당하는 것주로 어떠한 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용함배열 구조 분해 할당useState2개 짜리 배열을 반환하는 함수첫 번째 값을 value, 두번 째 값을 setter로 사용 가능함배열을 반환하는 이유는 자유롭게 이름을 선언할 수 있기 때문배열 분해 할당은 기본값을 사용할 수 있음undefined일 때 기본값을 사용함... 전개 연산자를 사용하면 여러 개의 값을 가져 올 수 있음const array = [1,2]const [a = 10, b = 10, c = 10] = array// a 1// b 2// c 10 객체 구조 분해 할당말 그래도 객체에서 값을 꺼내온 뒤 할당하는 것객체 내부 ..

동기직렬 방식으로 작업을 처리하는 것하나의 요청이 시작된 이후에는 무조건 응답을 받은 이후에야 비로소 다른 작업을 처리할 수 있음그동안 다른 모든 작업은 대기함 싱글 스레드 자바스크립트자바스크립트는 싱글 스레드로 작동하기 때문에 기본적으로 한 번에 하나의 작업만 동기 방식으로 처리할 수 있음자바스크립트는 초기에 HTML을 그리는데 보조하는 역할로 탄생했기 때문에 멀티 스레드 복잡한 내부 처리와 동시성 문제가 발생할 수 있는 멀티 스레드가 아닌 싱글 스레드로 설계됨자바스크립트에서 하나의 코드가 실행하는 데 오래 걸리면 뒤이은 코드가 실행되지 않는 특징을 갖음 = "Run-to-completion"  비동기동시에 일어나지 않는 것병렬 방식으로 작업을 처리할 수 있음동기식과 다르게 요청한 즉시 결과가 주어지지..