리액트를 다루는 기술 요약- 리액트, JSX 정의

생활코딩 리액트 강의를 듣다가 먼저 책으로 공부하면서 정리하는 게 이해가 더 쉽다고 생각했다. 

그래서 티스토리에 리액트 정리를 하면서 공부를 할 것이다:) 작심삼일 안 되게 해주세오,,,

책은 '리액트를 다루는 기술 요약'입니다.

 

리액트에 대해 먼저 알아보자

리액트란?

리액트는 자바스크립트 라이브러리로 오직 유저 인터페이스를 만드는 데 사용합니다. 구조가 MVC, MVW 등인 프레임워크와 달리,

오직 V만 신경 쓰는 라이브러리입니다.

리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트라고 합니다. 컴포넌트는 재사용이 가능한

API로 수많은 기능들을 내장하고 있습니다. 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다.

 

어떤 UI 관련 프레임워크, 라이브러리를 사용하던지 간에 가장 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다.

이때 사용하는 함수는 render()이다. 이 함수 내부에서는 컴포넌트를 유저에게 어떻게 보일지 return한다.

 

JSX- 코드이해

import React, {Component} from 'react';

코드를 모듈화하여 재사용

 

JSX란?

JSX는 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생김

장점: 보기 쉽고 익숙, 오류 검사, 더욱 높은 활용도

 

JSX 문법

1. 감싸인 요소

2. 자바스크립트 표현

3. if 문 대신 조건부 연산자

4. &&를 사용한 조건부 렌더링

5. 인라인 스타일링

6. class 대신 className

7. 꼭 닫아야 하는 태그

8. 주석