프론트엔드 개발/React

프론트엔드 개발/React

[React] Component

Class Component 작성법 위와 같이 작성하면 Class Component를 사용할 수 있다. Class Component 정의하기 class ClassComponent extends React.Component{ //React안에 Component라는 클래스를 상속 받음 render(){ //render 메서드는 정의 되어야하고 return 값이 꼭 있어야 함 return Hello; } } ClassComponent라는 이름의 클래스 컴포넌트를 React 라이브러리 안에 있는 Component 클래스로부터 상속받았다. Component 클래스 안에는 render() 메서드 값이 필요하며 render 값에는 꼭 return 값이 있어야 한다. Class Component 사용하기 ReactDO..

프론트엔드 개발/React

[React] SSR vs. CSR (Feat.Next.js)

CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 브라우저가 렌더하는 방식들을 의미하는 단어들이다. CSR Client Side Rendering의 약자이다. 서버 쪽에서 렌더링 준비를 마쳤을 때 클라이언트에게 전달하는 방식을 의미한다. 과정 설명 어떤 특정 도메인, 즉 웹 서비스에 접속 하게 될 때 그 웹 서비스에서 html을 먼저 다운로드하게 되고 html 화면을 보여주고, html 안에 있는 DOM 요소가 보이거나 CSS가 적용된 스타일이 보인다. React에선 html은 빈 껍데기 html만 내려오게 되고 Browser가 JS 파일을 요청하게 됩니다. (React는 JS파일이 모두 존재 해야 UI가 그려진다) JS 파일 안에는 React Web A..

프론트엔드 개발/React

[React] BootStrap vs React-BootStrap

BootStrap vs React BootStrap 일단 React BootStrap은 BootStrap의 코드를 기초로 개발 되었기 때문에, BootStrap Library를 꼭 가지고 있어야 구동이 가능하다. 일반 BootStrap말고 React-BootStrap, Vue-BootStrap 같이 일반적으로 많이 사용되는 반응형 웹 프레임워크같은 경우엔 본인들만의 BootStrap을 따로 개발하여 사용하고 있다. 일반 부트스트랩을 사용하지 않는 이유는 간단하다. BootStrap 4 기준으로 작성 된 부트스트랩 코드를 살펴보자 import React from 'react'; const ReactWithBootstrap = () => { return ( Email Password Address Addre..

Jongung
'프론트엔드 개발/React' 카테고리의 글 목록 (2 Page)