<JavaScript> React 그리고 JSX

 

🌈 React

 

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

 

- 선언형 (Declarative)

리액트는ㅇ 한 페이지를 보여주기 위해 HTML/CSS/JS 로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 직관적으로 코드를 짤 수 있다는 장점이 있다. 코드를 보고 실제 기능을 대충 떠올릴 수 있다.

 

- 컴포넌트 기반 (Component-Based)

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

 

- 범용성

리액트는 자바스크립트 프로젝트 어디에든 유연하게 적용 가능. 페이스북에서 관리되어 안정적이고 가장 유명하며 리액트 네이티브로 모바일 개발도 가능하다. 2020년 가장 유명한 프론트엔드 기술이다.

 

 

 

💡 JSX란?

: JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아닌 React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 이를 이용해서 우리는 react 엘리먼트를 만들 수 있다.

 

JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 Javascript 코드가 아니기 때문에, "Babel" 을 이용하여 브라우저가 이해할 수 있는 JavaScript코드로 변환을 해주어야 한다. Babel은 JSX 를 브라우저가 이해할 수 있는 JavaScript로 컴파일 하는데, 컴파일 후 Javascript를 브라우저가 읽고 화면에 렌더링할 수 있다.

 

React는 DOM 과는 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다. JSX를 사용하면 자바스크립트 만으로도 마크업 형태의 코드를 작성하여 DOM에 배치할 수가 있다.'

 

구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋은 컴포넌트라고 한다.

 

 

<JSX 규칙>

 

- 하나의 엘리먼트 안에 모든 엘리먼트가 포함.

- 리액트에서 CSS class 속성을 지정하려면 "className" 으로 표기해야된다. 만약 클래스로 작성하게 되면 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해야함.

- JSX에서 자바스크립트를 쓰고자 한다면 꼭 중괄호 {}를 이용해야함. 그렇지 않으면 텍스트로 인식하게 됨. 

- React 엘리먼트가 JSX로 작성되면 꼭 대문자로 시작해야 한다. 이렇게 정의된 컴포넌트를 사용자 정의 컴포넌트라고 부름.

- 조건부 렌더링은 if문이 아닌 삼항 연산자를 이용해야함.

<div>
{
	(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
}
</div>

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