리액트

리액트의 렌더링부라우저에서의 렌더링이란 HTML과 CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정이다. 사용자가 보게되는 결과물을 만드는 작업이기 때문에 중요한 과정이며 렌더링 방식이 성능에 큰 영향을 주게된다. 리액트의 렌더링이란리액트에서의 렌더링은 브라우저 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다. 이는 모든 컴포넌트들이 갖는 props와 state의 값을 기반으로 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정이다.해당 컴포넌트가 props와 state 같은 상태값을 갖고 있지 않다면 반환하는 JSX 값에 기반해 렌더링이 일어나게 된다.  리액트 렌더링 트리거리액트에서 렌더링이 발생하는 시나리오는 다음과 같다.최초 렌더링: 사용자가 처음 애플리케이션에 진입한 경우클래..

최근에 대다수의 프로젝트가 타입스크립트 기반으로 작성되었다. 코드를 작성하며 타입을 체크할 수 있는 타입스크립트는 코드를 더욱 안전하게 작성하면서도 잠재적인 버그도 크게 줄일 수 있다. 타입스크립트란?기존 자바스크립트 문법에 타입을 가미한 것이 타입스크립트라 할 수 있다. 동적 타입의 언어인 Javascript는 런타임에 에러를 확인할 수 있으며 동적 타입 언아라는 점은 개발자에게 자유를 줄 수 있지만 코드의 규모가 커질수록 오히려 발목을 잡는 경우도 있다.function test(a,b) { return a/b}test(5,2) // 2.5test('안녕하세요','하이')// NaN 두 인수를 받아 나눗셈한 결과를 반환하는데, 숫자가 아닌 타입의 값이 들어오면 NaN이 반환된다. 이러한 문제는 Java..

자바스크립트의 데이터 타입자바스크립트의 모든 값은 데이터 타입을 갖고 있으며, 이 데이터 타입은 크게 원시 타입과 객체 타입으로 나눌 수 있다.원시 타입 : boolean, null, undefined, number, string, symbol, bigint객체 타입 : object위 타입들 중 boolean의 true와 false 처럼 평가되는 값들이 존재하는데, 이를 truthy, falsy한 값이라 한다.falsy 값은 false, 0, -0, 0n, 0x0n, NaN, "", '', ``, null, undefined 이며, truthy는 falsy를 제외한 모든 값이다. Number자바스크립트의 Number는 다른 언어와 다르게 모든 숫자를 하나의 타입에 저장한다. 그 수의 범위는 -(2^53 ..

JSX : 자바스크립트의 확장 문법이며 브라우저에서 실행전 번들링에서 바벨을 통해 일반 JS형태로 바꿈 JSX를 사용하면 React.creatElement함수를 사용할 필요가 없기에 편하게 UI렌더링 가능 JSX는 JS문법이 아니다 (바벨로 사용할 수 있게 설정한 것이다) 더보기 ReactDOM.render 컴포넌트 페이지에 렌더링 하는 역활 첫번째 파라미터에서 페이지에 렌더링할 내용을 JSX로 작성 두번째 파라미터에서 해당 JSX를 렌더링할 도큐먼트 내부요소 작성 React.StrictMode 리액트 프로젝트에서 리액트의 래거시 기능들을 사용하지 못하게 하는 기능 나중에 사라질 문자열 ref, componentWillMount 등을 사용했을 때 경고를 출력 JSX의 장점 1️⃣보기쉽고 익숙하다 2️⃣더..