🌞 JSX, JS
🌝 JSX
JavaScript Syntax Extenstion -> 자바스크립트 + HTML 의 형태이다.
리액트에서 JSX로 코드를 작성하면babel이 JavaScript로 변환을 해준다!const element = ( <h1 className="hi"> Hello, world! </h1> );요것이
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );이렇게 변화하는 것!
🌟 Babel이란?
JSX를
createElement로 컴파일해주는 것은 트랜스파일러(문법도구) Babel을 통해 이루어진다. 즉, Babel은 최신 자바스크립트 문법을 모든 브라우저가 제공하는 구기능으로 변환시키는 과정을 거친다.
아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해주어 구형 브라우저와 같은 환경에서도 제대로 싱행할 수 있도록 하는 역할을 하는 것
🌜 JSX의 등장이유
웹이 더욱 상호작용적으로 변화하면서 점점 로직에 의해 동적으로 렌더링되는 요소가 많아지게 되었고,
이를 위해 렌덜이 로직과 마크업이 함께 존재하는 JSX가 등장하게 된 것!!
따라서,장점으로는,
🍀1. DX가 훌륭하다
➡️표현력이 뛰어나 코드를 읽기 쉽다.
➡️중첩된 선언형 구조를 잘 나타낸다
🍀2. 익숙하다
➡️ 팀의 생산성 향상
🍀3. 문법 오류와 코드량 감소
🌜 JSX의 규칙
🍀1. 모든 태그를 닫아야 한다
🍀2. 단위 상일 태그:
➡️구성 요소에서 여러 요소를 반환하려면, 단일 상위 태그 요소로 감싸주어야 한다.
// ❌ Error
function App() {
return (
<input />
<div>안녕히계세요.</div>
);
}
export default App;
// ✔
function App() {
return (
<div>
<input />
<div>안녕히계세요</div>
</div>
);
}
export default App;또는
React.Fragment 사용
function App() {
return (
<React.Fragment>
<input />
<div>안녕히계세요</div>
</React.Fragment>
);
}
//축약형
function App() {
return (
<>
<input />
<div>안녕히계세요</div>
</>
);
}🍀3. 중괄호 {} 안에 표현식(자바스크립트 값)
const element = <h1>{Math.random()}</h1>🍀4 속성 : camelCase
class -> className
inline-style 속성도 camelCase
🌞 TypeScript를 사용하는 이유.
🌝 TypeScript란?
자바스크립트에 타입을 부여한 언어
🌝 TypeScript를 사용하는 이유
🍀1. 정적 타이핑 제공
➡️ JavaScript는 자료형에 대한 타입은 존재하지만, 변수에 타입이 정해져 있지 않아, 런타임 상황에서 변수의 타입이 동적을 변할 수 있다.
🍀2. 유지보수 용이
➡️ 변수와 함수들에 어떤 타입이 어떻게 들어가야 하는지를 파악할 수 있으며, 전체 코드의 흐름을 이해하는데 좋다
🍀3. 자동완성
➡️ 편집기와 호환을 통해 개발의 편리성을 높여주고 정확하게 코드를 작성할 수 있다.
➡️오탈자로 인한 단순한 에러를 실행 전에 알게 되어 에러를 사전에 방지할 수 있다
🌜 TypeScript 컴파일러가 하는 일
🍀1. 트랜스 파일
➡️ 웹 브라우저는 JavaScript만 해석할 수 있기 때문에 이때 TypeScript -> JavaScript로 변환해주어야 한다
🍀2. 타입 오류 체크
🌜 TS VS TSX
.ts: TypeScript만 사용하는 경우, JSX 문법을 사용할 수 없다
.tsx: react component와 같이 사용할 경우
🌞SSR과 CSR 특성 및 차이점.
🌝SSR
Server Side Rendering: 화면을 그리는 주체가 서버
사용자의 페이지 요청 ➡️ 서버가 요청된 페이지에 맞는 HTML 파일 생성(
pre-rendering) ➡️만들어진 HTML과 그 파일을 동적으로 제어할 수 있는 js 다운로드 -> Hydration
🌜Hydration
미리 렌더링해둔 HTML 페이지에 자바스크립트 코드를 연결시켜 interactive하게 만들어주는 과정
🌜장점
서버쪽에서 렌더링을 하기 때문에 초기 로딩이 빠르다
SEO에 유리하다
🌜단점
페이지 이동 느림: 이동마다 서버에서 다시 받아와야 한다
서버의 부담이 늘어난다.
화면은 보이지만 인터렉션이 되지 않는 경우, 사용자에게 좋지 않은 경험을 제공할 수 있다!(깜빡임,,,, + Time to View & Time to react의 공백,,)
🌝CSR
Client Side Rendering: 화면을 그리는 주체가 클라이언트(브라우저)
브라우저 접속 ➡️ 최초 페이지 요청➡️ 빈 HTML과 모든 css, js 등 리소스를 다운로드 ➡️ 클라이언트 측에서 렌더링➡️ 초기 렌더링 완료 후 api 요청, state 업데이트에 따른 페이지 렌더링
🌜장점
깜빡이 현상이 없어서 자연스러운 페이지 렌더링이 가능
페이지 이동이 빠름
서버의 부담이 줄어든다
🌜단점
초기 렌더링 지연,,,,
SEO 최약
