JSX 란?
자바스크립트에서 html 부분만을 JSX 라고 한다.
const hi = <h1> Hello World! </h1> 자바스크립트에서 제공하는 문법표현은 아니기 때문에 react import 해야한다.
import React from './react'component.js파일에 JSX element를 입력해 html 역할을 대신한다.
component
class component를 만들 때 render()가 필수 method.
componenet 는 'class' 로 만들어야 함 => 우리만의 custom class
브라우저에 띄우기 위해서는 render()를 꼭 써야 함!!!
state: component 안에서 관리하는 값들은 객체에 저장되는데 그걸 state라고 한다.
state를 바꾸는 방법 => setState()
state 변경은 react에서 아주 중요한 부분!! setState()
props: 부모에서 자식에게 값을 넘겨줄 때 사용하는 속성
react
react 는 라이브러리, 메소드를 조합해서 사용하는 완전 단순한 UI 라이브러리
SPI(single-page-application): html은 div tag 하나/ js는 엄청 긴/ 가장 최초의 페이지로 따로 서버 통신이 안 됨/ url로 이동/ 리액트는 SPI(<-> MPI, multi-page-application)
자바스크립트 코드가 너무 길어지는 단점이 있긴 하나 요즘은 환경설정이 잘 되어 있어서 그런 부분이 많이 보완됨.
-
server side rendering(SSR): html에 모든 데이터를 심어서 데이터가 수정을 html로 자동으로 해서 브라우저로 띄우는 방식 => html에서 자료를 구할 수 있음 => 노출에 더 유리
-
client side rendering(CSR): SPI로 구성되어 있어서 html로 들어가도 자료, 정보에 대한 내용 없이 div 태그 하나.. 덩그러니 있어서 의미있는 정보나 자료를 구할 수 없음. 이 부분이 문제점이라고 할 수 있음. 사이트가 검색 노출이 덜 됨. 키워드를 올려도. 구글봇이 내용인식을 못하므로. =======> 백엔드와 프론트엔드가 완전히 분리될 수 밖에 없는 이유.
검색 노출 부분은 프론트 개발자가 신경써 봐야 하는 것.
어떤 웹을 개발하느냐에 따라 SSR, CSR을 결정
리액트 종류(환경설정, 소스의 차이/ 메소드는 리액트)
-
CRA(create-react-app): component만 만들면 되도록 환경설정이 된, web pack, babel 상관 없이, SSR이 안 되고, API(o)
package.json: 파일의 dependency 관리, 완전 중요한 부분
index.js: 시작 파일 -
Next.js: SSR이 되고, API(o)
-
Gatsby: API(X), 정적파일
web pack: 기능별로 나눠진 자바스크립트 파일들을 하나로 합쳐주는. 잘 돌아갈 수 있도록
babel: 어떤 ES 버전이든 ES5로 바꿔주는 컴파일. 어떤 버전이든간에
일회성으로 react 환경 설치: npx create-react-app fileName
글로벌로 react 환경 설치 : yarn/npm create-react-app fileName
