프로그래머스 데브코스 53일차 with. TS 웹 풀스택

📚요약

지난 시간까지 타입스크립트에 대해 배웠습니다. 이번 시간부터 타입스크립트를 활용한 리액트의 기본 동작 원리와 프로젝트 생성 방법 및 JSX 문법에 대해 학습하겠습니다.

 

📖리액트

리액트는 프레임워크가 아닌 웹과 네이티브 인터페이스 라이브러리로 페이스북에서 개발했습니다.

프레임워크가 아니고 라이브러리인 이유는

1. 내장 기능이 부족하고 서드 파티 패키지에 의존하기 때문입니다.
2. 완전한 생태계와 디자인 시스템을 제공하지 않기 때문에 리액트로 만들어진 프로젝트의 형태가 다양한 모습을 하고 있습니다.
3. 프로젝트에 적합한 설계에 따라 원하는 도구를 선택할 수 있기 때문입니다.

참고한 블로그와 리액트 공식 문서의 글을 보면 더 자세한 이유가 나와있습니다.

Start a New React Project – React

 

📑SPA

리액트의 특징 중 하나인 SPA는 Single Page Application의 약자로 비동기로 필요한 데이터만 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식입니다. 중요한 점은 화면 전체를 렌더링 하는 것이 아닌 필요한 영역만 변화를 줄 수 있기 때문에 사용자의 몰입감을 높일 수 있습니다.

🍯tip! 이전 공식 사이트, 현재 공식 사이트가 다르기 때문에 두 가지가 있다는 것을 아는 것이 좋다.

React

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

📄동작원리

• 초기 렌더링 : 첫 화면 렌더링을 합니다.
• 가상 DOM 변경 : 변화가 생긴 부분을 파악하고 가상 DOM을 변경합니다.
• 재조정 : 가상 DOM에서 변경된 부분을 실제 DOM에 동기화합니다.
• 실제 DOM 업데이트 : 가상 DOM과 동기화된 실제 DOM을 업데이트합니다.

📑프로젝트 생성

자바스크립트 프로젝트 생성

npx create-react-app 프로젝트명

 

타입스크립트 프로젝트 생성

npx create-react-app 프로젝트명 --template typescript

 

📄JSX(TSX)

JSX는 JS를 확장해 .js 파일에 HTML을 쓸 수 있게 해주는 문법입니다.

export default function App() {
  let name = 'nulzi';
  let inlineStyle = {
    fontSize : 48px;
    color : 'white';
    backgroundColor : 'black';
  }    
  
  return (
    <>
      {/* JSX 내부의 주석 */}
      
      {/* JSX는 항상 하나의 부모 태그만 반환할 수 있다. */}
      <h1> JSX </h1>
      {/* js 파일 내부에 HTML을 사용할 수 있도록 해주는 문법 */}
      <p> {name} </p>
      {/* HTML 내부에서 JS를 사용할 수 있는 방법 */}
      {name === 'nulzi' ? <p> 환영합니다. </p> : <p> 누구세요? </p>}
      
      <div className = 'hidden'></div>
      {/*
        JSX 내부에서 HTML의 기본 속성은 다른 이름으로 사용되는 경우가 있다.
        다른 이름으로 사용되는 경우는 camelCase로 사용된다.
      */}
      
      <div style = {inlineStyle}></div>
      {/* inline 스타일도 변수로 받아올 수 있지만, 네이밍이 달라진다는 점을 유의해야 한다 */}
      
      <br></br>
      {/* JSX 내부에서 HTML은 항상 닫는 태그가 있어야 한다. */}
    </>
  )
}

 

JSX에 대한 자세한 내용은 글을 참고하면 좋을 것 같습니다.

JSX 소개 - 전 공식 사이트

JSX 소개 – React

Writing Markup with JSX - 현 공식 사이트

Writing Markup with JSX – React

JavaScript in JSX with Curly Braces - 현 공식 사이트

JavaScript in JSX with Curly Braces – React

 

다음 시간에 계속...

 

출처 & 참고

이창현 강사님의 강의

React는 라이브러리인가 프레임워크인가, hyehye, 2024.06.19

SPA란 특징부터 구현 방법까지, elancer 비즈니스 팁, 2024.06.19

브라우저는 어떻게 동작하는가, MDN, 2024.06.19

React란? 동작원리는 어떻게 될까?, 민프, 2024.06.19