react

리액트 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); ..

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

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

함수란작업을 수행하거나 값을 계산하는 등의 과정을 표현하고 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것리액트에서 컴포넌트를 만드는 함수도 자바스크립트 함수의 기초적인 형태를 따름자바스크립트에서 함수는 다른 함수의 매개변수가 될 수 있고, 반환값이 될 수 있으며, 할당도 가능하므로 일급 객체임   함수를 정의하는 방법함수 선언문가장 일반적으로 사용하는 방식표현식이 아닌 일반 문으로 분류됨function add(a,b) { return a + b;}함수 표현식함수를 변수에 할당해 표현하는 방식할당하려는 함수의 이름을 생략하는 것이 일방적const sum = function (a,b) { return a + b;}sum(10, 24) 함수 선언문함수 표현식호이스팅으로 인해 함수 선언문은 먼저 메모..

자바스크립트의 데이터 타입원시 타입 booleannullundefinednumberstringsymbolbigint객체 타입object  undefined선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값'선언됐지만 할당되지 않은 값' null아직 값이 없거나 비어 있는 값을 표현할 때 사용'명시적으로 비어 있음을 나타내는 값' string문자열은 원시 타입이며 변경 불가능함 Symbol중복되지 않는 어떠한 고유한 값을 나타내기 위해 사용Symbol() 함수를 이용해서만 만들 수 있음  객체 타입원시 타입 이외의 모든 것의 타입배열, 함수, 정규식, 클래스 등 포함참조를 전달한다고 해서 참조 타입이라고도 함  값을 저장하는 방식의 차이원시 타입불변 형태의 값으로 저장..

서론 웹 개발을 시작함과 동시에 React를 다뤘습니다. 마치 프론트엔드 개발 = React 개발 이라는 개인적인 생각 때문에 React를 왜 사용하는가에 대해 고민하는 시간을 가져보지 않았던 것 같습니다..! 웹 개발에 왜 React를 사용하는지 알아보시죠~! 왜 React 인건데? 웹 개발을 위한 프레임워크는 다양합니다. Vue.js React, Angular 등등.. 개인적으로 다른 프레임워크 대신 React를 사용하는 이유는 러닝 커브가 높지 않고 생태계가 잘 구축되어 있기 때문이라고 생각합니다! 하지만 이 것만이 React를 선택하는 이유는 아니라고 생각합니다. React의 특징 React의 특징은 다음과 같습니다. 1. Vitual DOM (가상 DOM) React는 DOM을 가상화하여 메모리..

1. 꼭 써봐야 하는 10가지 리액트 커뮤니티 훅들 react-hook-form 라이브러리의 useForm : 간단한 코드로 입력값 검증하고 에러처리 가능 react-use 라이브러리의 useUpdateEffect : 특정 상태가 업데이트 될 때 함수 호출 가능 import { useUpdateEffect } from "react-use" const Home = () => { useUpdateEffect(() => { // 이 함수는 첫 렌더링에 실행되지 않습니다 console.log("Runs only if the state updates") }, [fName]) return ( ...) } react-use 라이브러리의 useCopyToClipboard : 상태(사용자가 클립보드에 복사하는 문자열 값..