[React] 정의와 특징 그리고 JSX에 대하여

MOONJUNG·2022년 9월 4일
0

React

목록 보기
2/10
post-thumbnail

React란?

정의

페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리

1. 데이터 기반의 선언적 개발

- UI를 자동으로 업데이트해준다
- 자동으로 UI를 업데이트하는 과정에서 Virtual DOM(가상 돔)을 통해 최적화된 업데이트를 할 수 있다

2. Component(컴포넌트) 기반의 개발

- 복잡한 UI를 효과적으로 구성할 수 있다
- JSX 문법으로 컴포넌트를 편리하게 작성

특징

01. 선언적

기존의 프로그래밍 언어는 절차적 프로그래밍하는 방식이라고 할 수 있다. 컴퓨터는 해야할 일을 코드의 순서대로 인지하고 실행시켜주기 때문에 원하는 결과를 만들기 위해서는 하나하나 직접 조작해야 했다. 자바스크립트의 경우는 직접 DOM을 조작하는 방식이 대표적인 예이다.

하지만, React는 좀 다르다.

선언적

  • “무엇인지(WHAT)”
  • 원하는 결과가 무엇인지 선언하는 형태로 프로그래밍하는 방식
  • 절차적인 것은 감추거나, 위임하고 선언적인 부분에만 집중
  • 원하는 결과를 선언 / DOM조작은 React에 위임

02. 컴포넌트(Component)

독립적이고 재사용 가능한 UI 단위

특징

  1. 필요한 곳에서 재사용O
  2. 독립적으로 사용 → 코드의 유지보수↑
  3. 다른 컴포넌트를 포함할 수 있다
    • 컴포넌트 간 계층(부모-자식) 관계를 형성 가능
    • 컴포넌트를 조합해서 큰 컴포넌트를 만들 수 있다
  4. 해당 페이지가 어떻게 구성되어 있는지 ****한눈에 파악
    하기 좋다
    - 구조 파악 용이 → 가독성 향상, 유지보수 용이

선언방식에 따라

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

  • 어떤 태그라도 self closing tag로 사용
  • <img />와 같이 항상 /으로 끝내줘야 한다

7. Nested JSX

  • 반드시 최상위를 감싸고 있는 하나의 태그가 있어야 한다

    JSX를 하나의 태그로 감싸야 하는 이유
    리액트의 Virtual DOM에서 컴포넌트 변화를 효율적으로 비교하기 위해서는 한 컴포넌트는 하나의 DOM 트리 구조로 이루어져야 한다

8. React.Fragment

  • 추가적인 DOM element를 생성하지 않고 하나의 컴포넌트 안에 여러 요소(자식)를 간단하게 그룹화할 수 있는 기능
  • React 패키지를 사용하는 것이기 때문에 → import React from “react”; 해주어야함
  • 축약형 :  <> ... </>

9. 주석 사용

  • JSX 내 {//}
  • 시작태그를 여러줄 작성시에는, 내부에서 // 의 형식을 사용
profile
뜨거운 열정으로 꿈을 실현하는 프론트엔드 개발자 장문정

0개의 댓글