공삼
article thumbnail
(React) 컴포넌트/엘리먼트 차이, JSX란?
Front-End/React 2023. 2. 15. 00:48

Component (컴포넌트) 컴포넌트는 데이터를 가진 props 객체인자를 받아 element를 반환한다. UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것으로, 엘리먼트 트리를 캡슐화 하는 것이다. Element (엘리먼트) element는 component를 이루는 작은 단위로, 보통 바로 사용되지 않고 Component에 리턴받아서 사용되곤 한다. 엘리먼트는 인스턴스가 아니다. 엘리먼트는 immutable한 plain object이다.(엘리먼트가 생성되면, 절대로 변화되지 않는다.) PlainObject 오래된 방식의 단순 자바 객체다. 조금 더 디테일한 의미는 특별한 환경(클래스나 인터페이스 등)에 종속되지 않는 일반적인 Java 객체를 의미한다. 이 단순 자바 객체는 다른 클래스나 인터페이..

article thumbnail
SSR, CSR 차이 + SPA, MPA
Front-End/React 2023. 2. 15. 00:26

SSR (Server Side Rendering) 서버 사이드 랜더링은 서버로부터 완전하게 만들어진 html을 받아와 페이지를 렌더링하는 방식. CSR과의 차이점으로는 초기 로딩속도가 빠르지만, 새로운 요청이 있을때마다 페이지 전체를 다시 구성해야하는 단점이 있다. 장점으로는 SEO 검색엔진 최적화에 유리하다. 검색엔진이 웹을 크롤리하면서 페이지의 컨텐츠 색인을 생성하는 과정에서 유리하다. (SPA - Single Page Application -> 인터랙션이 발생할때마다 서버로부터 새로운 파일을 받아 해당 링크로 이동하여 페이지 전체를 새로 랜더링하는 웹페이지 구성방식 ) 왜 SEO 검색엔진 최적화에 유리할까? SSR은 서버에서 초기 페이지 로딩시 페이지의 내용을 렌더링 한 후 클라이언트에게 전달하기 ..