23년 12월 21일 심화과정#2 JSX (리액트의 문법)

 

지난 주엔 바닐라 자바스크립트를 가지고 리액트의 구조를 따라해보는 시간을 가졌다면,

 

이번 주엔 드디어 리액트 문법을 배우는 시간을 가졌다. 

리액트 앱(CRA) 내부에서 그 문법을 사용한 것은 아니고, 그냥 JS에서 리액트 문법을 배워보았다.

 

CRA에서 배우지 않고 바닐라 JS에서 진행한 이유는

    - CRA를 동작시키는 것들이 문법 외에도 너무 많다 (ex. Node.js 등)

    - 그러한 것들을 모르는 채로 CRA를 바로 시작해버리면 문법에 대한 이해도가 떨어지게 된다.

 

 

여튼 저번주부터 심화수업이 시작되고 나서는 리액트를 제대로 배워나가기 위해

계속 약한 불로 슬슬 가열하는 느낌, 자동차를 운전하기 전에 시동을 부릉부릉 걸어놓는 느낌이 든다. 

 

가보좌

 

---

 

1. 리액트는 왜  배워야하는가? (부제: 기존 바닐라 웹 개발의 문제 해결)

 

1. 브라우저

1-1. 브라우저의 동작 구조

    a) DOM Tree 생성: html을 분석해서 dom 구조를 ram에 저장함

    b) Render Tree 생성: 1에서 만든 DOM Tree에 외부 CSS를 붙임

    c) Reflow: Render Tree를 기반으로 모니터 사이즈를 고려해서 실제 물리적 좌표를 계산함

    d) Painting: c)에서 구한 물리적 좌표에 따라 실제 화면에 그려줌

 

1-2. 브라우저 동작 구조의 문제점

한 번의 이벤트로 만약 3개의 태그 변화가 있다면 위 동작 과정 전체를 3번 반복한다. 

 

2. 바닐라 웹

2-1. HTML의 한계

    - 연산기능이 없음 

    - 몇 개의 데이터가 출력되어야 하는지 모르는 상황

    - 동일한 구조의 레이아웃이 출력되는 구조

    ⇒ JS의 createElement로 해결하고 있었다. 

 

    - 페이지 단위의 개발

    ⇒  이벤트 등으로 레이아웃의 일정 부분에 변화가 일어나면 페이지 전체가 다시 새로고침 된다.

 

but! 한 페이지에 많은 양의 데이터가 출력되는 서비스가 많아짐에 따라
위와 같이 페이지 전체가 새로고침 되는 동작 구조는 말도 안되게 비효율적이다!
(ex. 인스타그램 - 무한대로 내려가는 스크롤, 그와중에 좋아요 한 번 클릭하면 페이지 새로고침? 말도안됨!)

 

 

3. 문제 해결

⇒ 그러면 개발의 단위를 바꾸면 어떨까?

⇒ 애초에 JS로 HTML을 다 작성하는 건 어떨까?

⇒ 그러면 JS로 작성하는 김에, 웹의 각 부속품을 개발하는 형태로 하는 건 어떨까?

 

웹의 각 부속품 == 컴포넌트 단위의 웹 개발!

 

⇒ 페이지 단위로 개발되던 기존의 웹 개발을, 일정한 구역을 나눠서 그 구역을 모듈로 잡고 개발하자!

⇒ 모듈을 '컴포넌트'라고 부르고, 컴포넌트들을 모아서 하나의 웹 페이지를 구성하자!

 

---

2. 그래서 리액트가 뭐야?

- 가장 처음 출시된 Component Library

- JS 기반의 라이브러리, JS의 디자인 패턴을 그대로 가져간다

 

- (장) 많은 개발자들이 사용하여 시장이 넓고 자료가 방대하다

- (단) 요즘의 새로운 컴포넌트 라이브러리들에 비해 문법이 조금 조잡하고 성능이 떨어지는 편

 

- 객체형과 함수형 모두로 개발 가능하나, 최근 나온 리액트 18버전부터 객체형에 대한 지원이 끊겼기 때문에 

   리액트는 무조건 함수형으로 개발해야하는 라이브러리가 되었다

 

- 웹 프론트엔드 분야에서 리액트가 차지하는 비율은 약 30% 정도밖에 되지 않는다.

Component Library, State Management Library, CSS Framework, Bundler, Typescript, 기타 라이브러리 등도 배워 함께 사용해야 한다. 

 

[ 리액트로 개발할 때 유념해야하는 주요Point ]

1. 응집도: 하나를 수정하고자 할 때 하나의 파일만 봐도 수정이 가능한가. 

-> 리액트에서 파일 분리 원칙은 컴포넌트 단위이므로 한 컴포넌트에 대한 css, 이벤트 등 모든 것이 한 파일 안에 몰빵되어 있어야 한다.

 

2. 결합도: 하나의 컴포넌트로 얼마나 다양한 형태를 출력해낼 수 있는가. 

- 매개변수로 무얼 전달해주는지에 따라 출력여부를 결정할 수도 있고, 몇몇 조작을 주면 컴포넌트의 디자인을 바꿀 수 있는 등..!

(ex. 매개변수에 true, false를 주어서 매개변수에 따라 출력여부 결정)

-> 레이아웃이 비슷한지 개발자가 직접 판단하여 결합 여부를 결정해야 한다. 

 

 

=> 항상 개발할 때 위 두 가지 포인트를 생각하면서 할 것!!!!

 

---

 

3. 리액트의 문법, JSX에 대하여

 

3-1. JSX를 사용하게 된 이유?

JS로 html을 전부 만드는 방법: createElement

createElement는 눈에 잘 익지 않는다.! => so, JS 안에서 html 문법으로 코드를 작성해보면 어떨까?

 

3-2. JSX란?

정의: JS + XML

(XML: HTML의 기원)

 

- 브라우저는 JSX를 해석할 수 없기 때문에 Babel이라는 라이브러리의 도움을 받아야 한다. 

(Babel: ES6 이상 버전의 JS 문법을 브라우저가 해석할 수 있게 ES5로 변환해주는 라이브러리, but 타입스크립트, JSP 등 조금 다른 JS 문법들을 모두 Babel로 해석한다는 한계가 있음)

 

3-3. 리액트, JSX로 개발할 때 지켜야할 규칙

1) 컴포넌트 함수는 무조건 대문자로 시작할 것

2) 닫힘 태그가 없는 태그들 (<input>, <img>, <br>, <link> 등)은 앞으로 태그 닫기 전에 무조건 /을 넣어줄 것

ex. <input type="button" />

3) 하나의 컴포넌트에선 무조건 한 개만을 return 할 수 있다

-> 여러 개를 하나로 묶어주기 위한 불필요한 부모 태그가 생길 수 있다

-> 불필요한 부모 태그가 생기는 것을 방지하기 위해 <React.Fragment>라는 태그가 존재함

: 화면에 반영되는 것을 막기 위해 문법적인 요건을 채우는 용도

 

---

실습 기록

 

1. 필요한 라이브러리들을 import 한다. 

<!-- 리액트 라이브러리 import -->

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

 

<!-- Babel 라이브러리 import -->

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

 

 

2. JSX를 통해 만든 것들을 HTML에 추가해줄 단 하나의 태그를 만들어준다.

ex. <div id="root"></div>

 

 

3. 필수 구조 구축

<script type="text/babel">

    // 리액트가 추구하는 구조:  App 필수

    const App = () => {

        ReactDOM.createRoot(document.getElementById("root")).render(<InputContainer />)

    }

    window.onload = () => {

        App();

    }

 

</script>

 

- babel을 인식하기 위한 <script type="text/babel"></script>

- 리액트가 추구하는 App 구조 구현

 

 

4. <script type="text/babel"></script>  안에 하나의 태그만을 return하는 함수의 형태로 원하는 것들을 만들어 낸다.