2024.01.17 TIL

 💡 React

• A JavaScript library for building user interface - React.js는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용한다.

 

SPA란?

Single Page Application, 하나의 페이지로 이루어진 애플리케이션이라는 뜻.

MPA(Multi Page Application)와 상반된 개념 SPA↔MPA

• 왜 좋을까?
  • 하나의 페이지로 구성된 웹앱이므로 서버에 1회 리소스를 요청하고(index.html하나만 존재)
  • 그 이후에는 필요할 떄, 데이터만 받아와서 기존 페이지를 ‘수정’하는 방식으로 화면을 수정함. (re-rendering이 필요하지 않음)
  • 사용자에게 최적의 UX 경험 제공
• 안좋은 점은? SEO
  • SEO(Search Engine Optimization)을 위해서는 HTML 페이지 전체가 필요한데, SPA 페이지의 HTML 파일은 index.html 하나뿐이기 때문에 서치 엔진이 찾을 수가 없어서 검색에 잘 안걸린다. ( → next.js로 보완 )

 

리액트 프로젝트 만들기

1. npx create-react-app [만들 프로젝트 이름]
2. cd [프로젝트 위치]
3. yarn start

 

컴포넌트란?

= 벽돌? 벽돌을 쌓아 집을 짓는다. 좋아요.. 댓글.. 등등 모두가 하나의 벽돌

• SPA는 컴포넌트 단위로 변경사항을 반영하기 때문에 깜빡임(렌더링)이 없음
• 컴포넌트를 통해 UI를 재사용가능한 개별적인 여러 조각으로 나눈다. JavaScript의 함수와 유사함.
• 컴포넌트를 만들어라! ⇒ html을 return하는 함수를 만들어라!
• prop을 Input으로받고 react Element를 반환한다.

 

자바스크립트, jsx(html)영역 이해하기

import React from "react";
function App() {
  // <---- 자바스크립트 영역 ---->
  const clicked = () => {
    alert("클릭");
  };

  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{ //자바스크립트를 쓰기위한 대괄호 안에, 객체를 쓰기 위한 대괄호
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      이것은 내가 만든 컴포넌트 입니다.
      <button id="btn" onClick={clicked}>
        클릭
      </button>
    </div>
  );
}

export default App;

 

 

회고

오늘로 리액트를 시작했다.

JSX 문법이나 리액트 환경이 아직 낯설어서 많이 헷갈린다.

리액트네이티브로 뭔지도 모르고 앱만들때 

코드에 갑자기 화살표가 왜나오는지, 대괄호는 또 왜 두번쓰는지 

전혀 모른채로 마구잡이로 코딩했던 시절이 생각나면서

아 이게 그거였구나 하고 생각이 났다.

개인과제는 또 어떻게 할지 막막하지만 차근차근 해봐야겠다.