[리액트] JSX 와 컴포넌트

JSX(JavaScript XML)

- 자바스크립트에 XML을 추가한 확장형 문법

- 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어 편리

- HTML이 아니라 XML의 마크업 규칙을 따른다.

- 리액트 엔진을 통해 JSX파일이 기존 자바스크립트로 해석됨.(선언형 화면 기술)

 

JSX가 javaScript로 제대로 변환되기 위해서 지켜주어야 하는 규칙

- 꼭 닫혀야 하는 태그(Self Closing 태그)

- 두 개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 함.

  >>   <div></div>

  >>   <></>(Fragment) : 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다.

- JSX 안에 자바스크립트 변수를 보여줘야 할 때에는 { }으로 감싸서 보여줍니다.

- style 과 className 

  >> 인라인 스타일은 객체 형태로 작성

  >> background-color 처럼 - 구분되어 있는 이름들은 backgroundColor처럼 camelCase 형태로 네이밍

- 주석 : {/* 이런 형태*/}, 열리는 태그 내부에서는 주석 작성 가능.

 

 

컴포넌트

 

-MVC의 뷰를 독립적으로 구성하여 재사용할 수 있음. 예시 유튜브 영상 목록

-컴포넌트는 일종의 UI조각

 

-기존의 웹 프레임워크는 MVC(Model, View, Controller) 방식으로 정보, 화면, 구동 코드를 분리하여 관리.

-장점은 코드의 효율적관리에 있지만, 단점은 각 요소의 높은 의존성으로 코드를 일부만 변경하는 것이 어려움.

 > 이러한 불편함에서 컴포넌트가 등장

 

 

컴포넌트 구성 요소

데이터 구성 요소	특징
프로퍼티	상위 컴포넌트 에서 하위 컴포넌트로 전달 되는 읽기 전용 데이터
state	컴포넌트의 상태를 저장하고 변경할 수 있음.
컨텍스트	부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터.

 

 

출처 : 리액트 프로그래밍 정석(저자 박호준)