Lieto: React 기초잡기 🧗

박상하·2024년 1월 10일

Lieto

목록 보기

1/9

React 기초 다시 잡아보자 🎯

React를 오랜만에 사용을 하면서 (약 7개월 전 사용..) 그간 잊고있던 React에 대한 개념들을 다시 정리를 해보아야겠다.

Lieto Project를 시작하며 간단한 API(kakao api)를 연결하는데 뭔가 어떻게 컴포넌트에 반영을 해야할지 React의 좋은 점이 뭐였는지를 다시 한번 작성해보며 Project를 설계 및 개발 해보자 🧐

JSX 🎯

JSX는 Html+js 문법!
Javascript Syntex eXtension

결국 Javascript문법을 확장한 문법이다.

우리가 JS문법을 사용할 때는 html따로 Javascript 따로 관리를 하다보니 개발하는 입장에서도 불편감이 있었다.

그런데 JSX문법은 Html 태그를 Return하고 그 위에 Javascript 코드를 입혀줄 수 있다.

그냥 Javascript+html이 가능한 문법이라고 생각하면 쉽다.

JavaScript는 명령형, React는 선언형 🎯

우리가 event를 감지하여 console에 "Hello"를 찍는 과정을 각 다른 문법 (VanillaJS, JSX)으로 비교해보자

JavaSript 🟡

//html
 <body>    
    <div>
   <form>
   <button>hi</button>
   </form>
   </div>
  </body>

//js
const BTN = document.querySeletor("button")
BTN.addEventListener((e)=>console.log("Hello"))

다음과 같이 VanillaJS는 해당 과정을 모두 명령형으로 작성을 해주어야한다.
그렇다보니 코드가 비교적 길고 한눈에 어떤 button을 눌렀을 때인지 보기 힘든 부분이 있다.

React는 이러한 부분을 선언형으로 코드를 작성이 가능하게해준다.


return <div>
  <form>
    <button onClick={()=>console.log("Hello")}></button>
  </form>
  </div>

이렇게 컴포넌트함수 위에 바로 해당 함수를 적용할 수 있다.

즉, 선언적으로 개발자가 원하는 동작을 작성할 수 있다.

좋은점
1. 어떤 컴포넌트에 어떤 기능이 있는지 한눈에 볼 수 있다.(가독성증가)
2. 의도를 명확하게 표현할 수 있다.
3. 개발자가 쳐야하는 코드의 길이가 줄어든다.

즉, React 의 JSX는 위와 같은 장점을 가진 것이다!

그럼 JSX를 브라우저가 이해할 수 있나? 🎯

결론은 그렇지 않다.

브라우저는 Javascript 코드를 읽을 수는 있지만 JSX문법을 따로 읽어주지 못한다.
그렇기 때문에 Babel 이라는 트랜스파일러가 관여해 js코드로 변환시켜준다!

Babel은 React파일을 build 하면서 관여하게 된다.

코드 번들링: JavaScript 코드는 여러 파일로 나뉘어 있을 수 있지만, 빌드 프로세스에서는 이를 하나의 파일로 번들링합니다. 이 과정에서는 주로 webpack이나 Parcel과 같은 모듈 번들러가 사용됩니다.

JSX를 JavaScript로 변환: React 애플리케이션에서 사용된 JSX 코드는 브라우저에서 직접 해석할 수 없으므로, Babel과 같은 트랜스파일러를 사용하여 JSX를 일반 JavaScript 코드로 변환합니다.

CSS, 스타일 처리: 프로젝트에서 사용된 스타일 시트들은 하나의 CSS 파일로 번들링되거나 필요에 따라 여러 개의 CSS 파일로 분리될 수 있습니다. 이 파일들은 빌드 과정에서 생성되어 HTML 파일과 함께 로드될 수 있도록 합니다.

정적 자원 복사: 프로젝트에 사용된 이미지, 폰트 등의 정적 자원 파일은 빌드 과정에서 해당 디렉토리로 복사됩니다. 이는 빌드 결과물에 함께 포함되어 서버에서 애플리케이션을 호스팅할 때 필요합니다.

HTML 생성: React 애플리케이션의 진입점이 되는 HTML 파일이 생성됩니다. 이 HTML 파일에는 애플리케이션을 로드하고 실행하는데 필요한 스크립트 태그와 링크 태그가 포함되어 있습니다.

최적화 및 압축: 생성된 JavaScript 및 CSS 파일은 주로 최적화 및 압축 과정을 거칩니다. 이를 통해 빌드 결과물의 크기를 최소화하고 성능을 향상시킬 수 있습니다.

빌드 결과물 생성: 위의 모든 과정이 완료되면, 최종적으로 빌드 결과물이 생성됩니다. 이 결과물은 애플리케이션을 서버에 배포하고 호스팅할 때 사용됩니다.

다음과 같은 과정을 통해 React는 빌드 결과물을 생성하게 되는데 2번을 보면 JSX가 Javascript로 변환되는 걸 볼 수 있다.

React의 함수 대문자로 시작하는 이유는 JSX 🎯

React의 함수를 소문자로 만든 후 커스텀컴포넌트를 만든 후 html코드 사이에 넣으면 오류가 발생한다.
왜 그럴까??

//customButton.js
const customButton =()=>{
 return <div>
   <button></button>
   </div> 
}
// main.js
return 
<div>
  <h1>Title</h1>
<customButton/>
  </div>
// 오류발생!