분류 전체보기

https://codesmoothie.tistory.com/30 [React] Render의 진짜 의미와 동작 원리 https://codesmoothie.tistory.com/29 [React] Component가 Instance, Element로 변화는 과정 Component 리엑트에서 컴포넌트(Component)는 UI 블럭(조각)을 기술(설명)하는 곳이다. 컴포넌트는 정규 자바스크립트 함수로 이 codesmoothie.tistory.com 지난 포스팅 '[React] Render의 진짜 의미와 동작 원리'에서 연결되는 글입니다. State의 메카니즘(Mechanics)에 대한 잘못된 상식 React에서 랜더링이 어떻게 동작하는지 알기 전에 먼저 State의 메카니즘에 대해서 알아보자. 일반적으로 화..

ES11(ECMAScript2020)에서 도입된 null 병합(nullish coalescing) 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다. // 좌항의 피연선자가 null 또는 undefined이면 우항의 피연산자를 반환하고, 그렇지 않으면 좌황의 피연산자를 반환한다. var foo = null ?? 'default string'; console.log(foo); // "default string" null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다. null 병합 연산자 ??가 도입되기 이전에는 논리 연산자 ||을 사용한 단..

https://codesmoothie.tistory.com/29 [React] Component가 Instance, Element로 변화는 과정 Component 리엑트에서 컴포넌트(Component)는 UI 블럭(조각)을 기술(설명)하는 곳이다. 컴포넌트는 정규 자바스크립트 함수로 이루어져 있다. 하지만, 해당 함수는 최종적으로 React Element를 return하고 Tre codesmoothie.tistory.com 해당 글은 "[React] Component가 Instance, Element로 변화는 과정" 포스팅에서 연장되는 글입니다. 이해되지 않는 개념이 있다면 앞선 블로그를 정독하는 것을 권장합니다. 학습 영역 지난 포스팅에서 Component와 인스턴스 생성 그리고 그것이 화면의 UI로 ..

Component 리엑트에서 컴포넌트(Component)는 UI 블럭(조각)을 기술(설명)하는 곳이다. 컴포넌트는 정규 자바스크립트 함수로 이루어져 있다. 하지만, 해당 함수는 최종적으로 React Element를 return하고 Tree를 구성하게 된다. 일반적으로 JSX 문법으로 이러한 element를 작성하게 된다. 컴포넌트는 청사진 또는 템플릿에 가깝다. 하나의 템플릿(컴포넌트)으로 리엑트는 1개 또는 그 이상의 컴포넌트 인스턴스를 생성할 수 있다. Component Instance React는 컴포넌트를 사용할 때 인스턴스를 생성한다. 만약, Tab이라는 컴포넌트를 1번 정의하고, 3번 사용했다면 컴포넌트 트리에 3개의 인스턴스 트리를 구성하게 된다. 즉, 컴포넌트 인스턴스는 함수로 작성한 코드..