React 복습 / components

Winsam·2024년 3월 11일

React

여러 개의 라이브러리가 하나의 완성 된 UI를 관리를 지원 함, 그래서 React라는 자바스크립트 객체가 여러 가지 매서드를 이용해서 UI를 관리를 해줌

화면의 구성요소를 만들어는 매서드

화면에 실제로 드러나게 해주는 매서드

=> 본래 HTML으로 화면을 그렸다면 React.createElement() 매서드를 이용해서 계층적으로 화면을 만들고 ReactDOM.createRoot() 매서드를 이용해서 화면에 출력 함 (하지만 ReactDOM.render 는 18 이전의 방법이고, ReactDOM.createRoot() 가 도입 됨)

하지만 이런 식으로 화면을 그리면 너무나도 불편하기 때문에 컴포넌트라는 개념을 도입 함.
컴포넌트라는 화면을 조합해서 하나의 화면을 만듬

JSX

자바스크립트에 정의돼 있는 그대로 확장 된 문법

본래 HTML 문서의 태그에 넣을 수 있는 것들은 attributes인데 리액트가 인식 가능한 형태로 자바스크립트와 태그문법을 혼용해서 사용할 수 있게 도와줌
components의 JSX 가 순수 ReactCode로 변환이 돼야 리액트가 읽을 수 있는데 그 순수 ReactCode로 변환하는 과정으로 bable을 활용 함 (번들링)

Components

최종적으로 element 를 리턴하는데 클래스나 함수로 만들 수 있지만 요즘은 보통 함수로 만듬
화상표 함수도 가능하기 때문에 보통 하나의 element를 리턴 함

(위의 section 태그가 하나의 element 를 의미 함)

export, import

이전까지는 하나의 HTML 문서 안에서 여러 개의 js들이 실행 되었음 하지만 지금은 실행되는 과정에서 스크립트들이 공유되어야 하는 환경에서 만들어져야 함. 그래서 자료들 간의 export, import를 통해 서로의 자료를 공유해서 하나의 HTML을 그려가야 함

index.js

위에서 JSX를 이용한 compoenets 들의 자료들은 export, import 통해 공유하고 ReactDOM.createRoot() 로 만든 화면들을 index.js에서 App이라는 컴포넌트를 그림
=> index.js의 App 부분이 계속 달라지면서 유저가 보는 화면이 계속 바뀌는 반응형 환경이 완성 됨

번들링

본래 HTML이 가장 먼저 빌드되면서 그 안에 아무런 코드 하나도 없이 그냥 실행하면 아무 것도 뜨지 않아야하지만 React에 들어오면서 아무런 코드가 없어도 컴포넌트들이 잘 만들어져 있으면 화면이 그려짐
번들링 시 각 파일들의 이름을 찾아서 규칙적으로 순서대로 빌드해줌 그래서 아래의 public의 파일들의 이름을 함부로 바꿔서는 안됨