![]()
NextJS에서 아래와 같이 anchor tag를 사용하여 페이지 이동 할 수 있다. 하지만, 이상적인 방법이 아니다. anchor tag를 사용하여 페이지 이동을 할 경우, 크롬 브라우저의 왼쪽 상단에 있는 새로고침 버튼이 잠깐 X로 변경되었다가 다시 돌아온다. 이는 완전히 새로고침된다는 신호이다. 새로고침이 된다는 것은 새로운 페이지가 backend에서 다운로드 된다는 신호이다. 이는 더 이상 SPA가 아니라는 뜻이다. 앞서 NextJS에서는 콘텐츠가 BackEnd에서 랜더링 된다는 것을 배웠다. 하지만, NextJS의 가장 훌륭한 점은 URL를 입력하는 것과 같이 처음 페이지를 방문할 때는 서버에서 랜더링 되고, 이미 페이지에 진입해 있다면 NextJS에서 제공하는 Link를 사용하여 SPA방식으로..
![]()
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개의 인스턴스 트리를 구성하게 된다. 즉, 컴포넌트 인스턴스는 함수로 작성한 코드..
