리액트

브라우저 개발자 도구일반적인 브라우저 환경에서 발생할 수 있는 문제를 디버깅할 수 있는 도구웹사이트를 불러올 때 발생하는 거의 대부분의 작업을 기록하고, 또 이와 관련된 많은 기능을 제공함  크롬 개발자 도구요소 탭현재 웹페이지를 구성하고 있는 HTML, CSS 등의 정보를 확인할 수 있음요소 화면현재 웹페이지를 구성하는 HTML을 나타냄이중 원하는 태그를 클릭하면 브라우저 페이지의 해당 요소가 강조되고, 해당 태그와 관련된 정보 확인 가능웹페이지의 DOM을 직접적으로 수정하면 프로덕션으로 개발된 페이지에서 수정된 내용을 바로 확인 가능DOM 요소를 선택해 디버깅 위치를 설정할 수도 있음요소 정보스타일 : 요소와 관련된 스타일 정보계산됨 : 해당 요소의 크기, 패딩, 보더 마진과 각종 CSS 적용 결과값..

리액트 API리액트는 애플리케이션을 서버에서 렌더링할 수 있는 API도 제공함react-dom/server.js에서 확인 할 수 있음 renderToString인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML 문자열로 반환하는 함수서버 사이드 렌더링을 구현하는 데 가장 기초적인 API먼저 완성된 HTML을 서버에서 제공할 수 있으므로 초기 렌더링에서 뛰어난 성능일 보임import React, { useEffect } from "react"import ReactDOMServer from 'react-dom/server'function ChilrenComponent({fruits} : {fruits: Array}) { useEffect(() => { console.log(fruits); ..

사용자 정의 훅서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용리액트 훅을 기반으로 개발자가 필요한 훅을 만드는 기법반드시 use로 시작하는 함수명이여야 함import { useEffect, useState } from "react";function useFetch( url: string, { method, body } : { method: string; body?: XMLHttpRequestBodyInit },) { const [result, setResult] = useState() const [isLoading, setIsLoding] = useState(false) const [ok, setOk] = useState() const [status,..

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

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..

클로저란함수와 함수가 선언된 렉시컬 환경의 조합선언된 렉시컬 환경 : 변수가 코드 내부에서 어디서 선언됐는지를 의미 스코프전역 스코프전역 스코프에서 선언된 변수는 어디서든 호출 가능함window, global함수 스코프자바스크립트는 기본적으로 함수 레벨 스코프를 따름 ( {} 블록이 스코프 범위를 결정하지 않음) 클로저의 활용자바스크립트는 함수 레벨 스코프를 가지고 있고, 스코프는 동적으로 결정됨클로저를 활용하면 한 변수나 상태 값을 별도로 관리하는 클로저 내부에서만 접근 가능함function Counter() { var cnt = 0 return { increase : function () { return cnt++ }, decrease : f..

클래스란자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 템플릿클래스를 활용하면 객체를 만드는 데 필요한 데이터나 이를 조작하는 코드를 추상화해 객체 생성을 더욱 편리하게 할 수 있음class Car { // 생성자 constructor(name) { this.name = name; } // 메서드 hook() { console.log('경적을 울립니다'); } // 정적 메서드 static hello() { console.log('안녕, 자동차야!'); } // setter set age(value) { this.carAge = value } //getter get age()..