리액트, 컴포넌트, JSX

---

React  

 

리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다.

React의 3가지 특징

 

선언형 

기존처럼 HTML/CSS/JS로 나눠 적는 것이 아닌, 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향

 

컴포넌트 기반 

리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다
유지보수에 용이

 

범용성 

리액트는 JavaScript 프로젝트 어디에든 유연하게 적용된다.
Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다.

 

JSX란..?

JavaScript를 확장한 문법

 

JSX는 HTML이 아니다! (기능과 구조를 한눈에 확인할 수 있다.)

 

 

JSX 규칙

 

하나의 엘리먼트 안에 모든 엘리먼트가 포함 ( <div>, <> 사용 )

엘리먼트 클래스 사용 시, className으로 표기

JavaScript 표현식 사용 시, 중괄호 {} 이용

사용자 정의 컴포넌트는 대문자로 시작 (PascalCase)

조건부 렌더링에는 삼항연산자 사용

여러 개의 HTML 엘리먼트를 표시할 때, map() 함수를 이용

key 속성 값에 가능하면 id 할당 // <div key={post.id}>

 

 

React 컴포넌트(React component)의 필요성

 

컴포넌트란 "하나의 기능 구현을 위한 여러 종류의 코드 묶음이다." 

 

"UI를 구성하는 필수 요소이다." "리액트의 심장,,?이다"

 

 

---