React-intro

이성민·2023년 5월 18일

오늘은 어디서든 한번쯤 꼭 들어봤을법한 리액트를 배웠다. 그동안 배운 html, css, js가 리액트를 쓰기 위해서였다고.....

리액트

javascript 오픈소스 라이브러리

리액트를 배워야 하는 이유?

리액트의 특징때문에 프로트엔트 개발을 더 효율적이고 효과적으로 할 수 있기때문.

리액트의 특징?

3가지의 특징이 있다.

선언형
컴포넌트기반
범용성

선언형(Declarative)

한 페이지를 보여주기 위해 html, css, js를 나눠서 적는게 아닌 하나의 파일에 명시적으로 작성할 수 있게 jsx를 활용한 선언형 프로그래밍을 지향.

컴포넌트 기반(Component-Based)

리액트는 하나의 기능 구현을 위해 여러종류의 코드를 묶어둔 컴포넌트 기반 개발.
컴포넌트로 분리 > 서로 독립적, 재사용 가능 = 기능 자체에 집중 개발.
에러 > 유지보수, 유닛테스트 편함

범용성(Learn Once, Write Anywhere)

js프로젝트 어디서든 유연하게 적용 가능.
facebook에서 관리 > 안정적, 리액트 네이티브 = 모바일 개발 가능.

JSX

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법
JSX는 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니기때문에 JavaScript 코드로 변환을 해주어야 한다.
이때 이용하는 것이 Babel. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일. 이후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다.

왜 JSX를 써야할까?

DOM에서 JavaScript를 사용하기 위해서는 JavaScript와 HTML을 연결하기 위한 작업이 필요하다. Inline 방식, script 태그로 외부 JavaScript 파일을 연결할 수 있다.
하지만 React에서는 JSX를 이용해서 DOM 코드보다 명시적으로 코드를 작성할 수 있다.
JSX를 쓰면 JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다. 이때 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 한다.
JSX 없이도 React 요소를 만들 수 있지만 코드가 복잡하고, 가독성이 떨어지는 단점이 있기에 편리하고 이해하기 쉽게 JSX를 사용해야 한다.

JSX의 규칙(필수 암기. 이해x)

여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸야한다.

<div>                                    <div>
  <h1>안녕</h1>                             <div>
</div>                        >>             <h1>안녕</h1>
<div>                         >>           </div>
  <h2>ㅎㅇ</h2>                             <div>
</div>                                       <h2>ㅎㅇ</h2>
                                           </div>
                                         </div>