React란?
정의
페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리
1. 데이터 기반의 선언적 개발
- UI를 자동으로 업데이트해준다
- 자동으로 UI를 업데이트하는 과정에서 Virtual DOM(가상 돔)을 통해 최적화된 업데이트를 할 수 있다
2. Component(컴포넌트) 기반의 개발
- 복잡한 UI를 효과적으로 구성할 수 있다
- JSX 문법으로 컴포넌트를 편리하게 작성
특징
01. 선언적
기존의 프로그래밍 언어는 절차적 프로그래밍하는 방식이라고 할 수 있다. 컴퓨터는 해야할 일을 코드의 순서대로 인지하고 실행시켜주기 때문에 원하는 결과를 만들기 위해서는 하나하나 직접 조작해야 했다. 자바스크립트의 경우는 직접 DOM을 조작하는 방식이 대표적인 예이다.
하지만, React는 좀 다르다.
선언적
- “무엇인지(WHAT)”
- 원하는 결과가 무엇인지 선언하는 형태로 프로그래밍하는 방식
- 절차적인 것은 감추거나, 위임하고 선언적인 부분에만 집중
- 원하는 결과를 선언 / DOM조작은 React에 위임
02. 컴포넌트(Component)
독립적이고 재사용 가능한 UI 단위
특징
- 필요한 곳에서 재사용O
- 독립적으로 사용 → 코드의 유지보수↑
- 다른 컴포넌트를 포함할 수 있다
- 컴포넌트 간 계층(부모-자식) 관계를 형성 가능
- 컴포넌트를 조합해서 큰 컴포넌트를 만들 수 있다
- 해당 페이지가 어떻게 구성되어 있는지 ****한눈에 파악
하기 좋다
- 구조 파악 용이 → 가독성 향상, 유지보수 용이
선언방식에 따라
1. Class Component (클래스 컴포넌트)
- render() 메서드 안에서 JSX를 반환하는 방식
- state, lifeCyle 등 API를 통해 관련 기능 사용할 수 있어 초창기 많이 사용
- 단점 : Class문법과 동작이 복잡함
2. Function Component (함수 컴포넌트)
- render() 메서드 없이 JSX를 반환하는 방식
- 단점 : state, lifeCyle 관리하지 못한다
- React 16.8 버전에서 Hook 기능이 추가 → 많이 사용
- 함수 컴포넌트에서도 state를 사용할 수 있게됨
사용 방법
- 소문자로 시작하는 요소 → HTML 태그로 인식
- 컴포넌트명은 항상 첫 글자가 대문자가 되도록 작성
- 선언한 컴포넌트는 다른 곳에서 import하여 사용
JSX(JavaScript Syntax Extension)
정의
- React에서 사용하는 자바스크립트 확장 문법
- 별도의
.html
, .js
파일이 아닌 하나의 자바스크립트 파일에서 HTML 마크업과 자바스크립트 로직을 동시에 작성
- 자바스크립트 문법은 아니기에 브라우저에서 해석X
- JSX로 작성한 코드는 브라우저에서 동작하기 전에 Babel이라는 transcompiler를 통해 일반 자바스크립트 코드 형태로 변환(React.createElement()함수로 변환됨)
특징
1. JSX element
- 자바스크립트 파일 어디에서나 필요한 곳에 HTML처럼 작성
- 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다
2. Javascript 표현식
- 값을 출력하고 싶다면
{ }
안에 유효한 자바스크립트 표현식을 작성
- if문(for문) 대신 삼항 연산자(조건부 연산자) 사용
3. JSX attribute
- 태그의 attribute name(속성명)은 camelCase로 작성
4. Event 처리하기
- 태그를 작성할 때 직접 이벤트와 이벤트 핸들러(Event Handler)를 부여
- 이벤트는 앞에
on
을 붙여 camelCase로 작성합니다.
- 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.
5. Inline Styling
- style 속성 = camelCase를 요소로 가지는 자바스크립트 객체
- 중괄호를 두 번 겹쳐서 쓰는 형태
- 바깥의
{ }
: JSX 문법을 의미
- 안쪽의
{ }
: 자바스크립트 객체를 의미
- css보다 성능이 낮고 우선순위가 높기 때문에, 동적으로 계산하여 스타일링하는 경우 이외에는 사용을 지양하자
6. Self-Closing Tag
7. Nested JSX
- 반드시 최상위를 감싸고 있는 하나의 태그가 있어야 한다
JSX를 하나의 태그로 감싸야 하는 이유
리액트의 Virtual DOM에서 컴포넌트 변화를 효율적으로 비교하기 위해서는 한 컴포넌트는 하나의 DOM 트리 구조로 이루어져야 한다
8. React.Fragment
- 추가적인 DOM element를 생성하지 않고 하나의 컴포넌트 안에 여러 요소(자식)를 간단하게 그룹화할 수 있는 기능
- React 패키지를 사용하는 것이기 때문에 →
import React from “react”;
해주어야함
- 축약형 :
<> ... </>
9. 주석 사용
- JSX 내 {/…/}
- 시작태그를 여러줄 작성시에는, 내부에서 // 의 형식을 사용