27일차

JiHun·2023년 5월 18일

TIL

부트캠프

목록 보기

24/56

💼 React 기초

SPA (Single Page Application). 페이지 이동없이 한 페이지 내에서 요소가 부드럽게 동적으로 변한다. 페이지의 컴포넌트만 따로 변할 수 있다.

🗂️ React는 라이브러리인가? 프레임워크인가?

프레임워크 앱을 만들 때 기능을 모두 갖춘것
라이브러리는 하나의 기능을 얘기하는 개념.

React UI(User Interface)에 집중한 자바스크립트 라이브러리.React 하나만 있으면 모든 기능을 구현할 수 있으면 그것은 프레임워크라고 할 수 있다.
리액트 딱 하나만 필요한게 아니라 다른 라이브러리들이 필요하다. 리액트 혼자만 있다면 그냥 UI를 만드는 기능만 제공하는 라이브러리.
React-Router-Dom
Redux
Recoil
등등 많은 라이브러리들을 가져와서 기능을 구현할 수 있다.

💼 특징

🗂️ 선언형

하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향.

🗂️ 컴포넌트 기반

하나의 기능을 구현할 수 있는 각 컴포넌트로 묶어서 개발한다. 컴포넌트로 분리하면서 서로 독립적이다. 이 때문에 재사용이 가능하다. 기능마다 분리 해놓을 수 있기 때문에 각 컴포넌트의 기능 작동에 집중하여 개발이 가능하다. 또한 재사용이 가능하다.

🗂️ 범용성

리액트는 JavaScript 프로젝트 어디에든 리액트만 추가한다면 유연하게 적용될 수 있다. 프레임워크가 아니라서 그런 것이다. 프레임워크는 다른 프레임워크에서 사용될수 없지만 리액트는 라이브러리라서 그렇지 않다.

💼 JSX

JSX는 JavaScript가 확장한 문법.
HTML + JavaScript ==> 새로운 문법. HTML 태그들을 JavaScript로 옮겨서 쓸 수 있다.

브라우저는 JSX를 바로 읽을 수 없다. 브라우저가 읽을 수 있는 JavaScript로 변환해서 전달 해줘야 한다.

이 때, 사용되는 것이 Bable. Bable은 JSX를 JavaScript로 컴파일 해준다. 브라우저는 컴파일된 JavaScript를 읽고 렌더링한다.

🗂️ JSX 작성 규칙

하나의 엘리먼트 안에 모든 엘리먼트가 포함
최상위에서 Openingtag, closing tag로 감싸주어야 한다.

class 경우에 className으로

JSX 내에서 JS를 쓰고 싶으면 중괄호{}를 이용해야한다. 중괄호{}를 사용하지 않으면 일반 텍스트로 인식한다.

React 엘리먼트가 JSX로 작성되면 대문자로 시작해야 한다.

조건부 렌더링에는 if가 아니라 삼항연사자 사용 - 왜 사용하냐? Return 값이 들어가야한다.