Study/React
React(리액트) 기초(1) - react 특징, JSX란? 규칙
- -
React 리액트
- 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리
- 선언형, 컴포넌트 기반, 범용성(다양한 곳에서 활용할 수 있다)
리액트의 특징 3가지
선언형(Declarative)
- 리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기보단
하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.
컴포넌트 기반(Component-Based)
- 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
- 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.
이런 식으로 나누어서 작성, 구현 가능 (넘나 편리하쥬)
위의 코드를 보고 Application을 떠올릴 수 있나요?
범용성 (Learn Once, Write Anywhere)
- 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다.
- Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다.
JSX 란?
- JavaScript XML
- 문자열도, HTML도 아니다.
- React에서 UI를 구성할 때 사용하는 문법으로 자바스크립트를 확장한 문법
> 이 문법을 통해 React 엘리먼트를 만들 수 있다.
> JavaScript의 확장된 문법이지만 브라우저가 바로 실행할 수 있는 JavaScript 코드는 아님.
>> 브라우저가 이해할 수 있는 자바스크립트로 변환해줘야 하고 이때 이용하는 것이 'Babel'
Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일한다.
컴파일 후 브라우저가 자바스크립트를 읽고 화면에 렌더링 할 수 있다.
React에서는 DOM과는 다르게 CSS, JSX 문법만을 가지고 웹 어플리케이션을 개발할 수 있다.
> 컴포넌트 구현에 필요한 파일이 줄었고 한눈에 컴포넌트를 확인할 수 있게 되었다.
> JSX를 사용하면 JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있다.
** JSX는 HTML이 아니라는 것을 꼭 명심
JSX는 왜 써야할까
- JSX를 이용하면 DOM 코드보다 명시적으로 코드 작성이 가능하다.
- JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인 가능하다.
이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트(component)라고 한다.
JSX 없이도 React 요소를 만들 수 있지만 코드가 복잡해지고 가독성이 떨어진다.
JSX 규칙
JSX에는 몇가지 규칙이 있다.
- 엘리먼트 클래스 사용 시 className 으로 표기
<div className="hello"> world </div>CSS class 속성을 지정하려면 className으로 표기한다.
그냥 class로 작성하면 HTML 클래스 대신 JavaScript 클래스로 인식한다.
- JavaScript 표현식 사용 시 {중괄호} 이용
const element = <img src={user.avatarUrl}></img>;중괄호를 사용하지 않으면 일반 텍스트로 인식한다.
+ 공식 문서에는 중괄호 주변에 따옴표를 입력하지 말라고 한다.
따옴표(문자열 값에)와 중괄호(표현식에)를 동일한 어트리뷰트(attribute)에 사용하면 안된다고 한다.
https://ko.reactjs.org/docs/introducing-jsx.html
- 사용자 정의 컴포넌트는 대문자로 시작 (PascalCase)
React 엘리먼트가 JSX로 작성되면 대문자로 시작해야 한다.
소문자로 시작하면 일반적인 HTML 엘리먼트로 인식한다.
이렇게 대문자로 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 한다.
+ 태그가 비어있다면 XML처럼 /> 셀프 클로징으로 바로 닫아주어야 한다.
- 조건부 렌더링에는 삼항연산자 사용
if문이 아닌 삼항연산자로 해야한다.
- 여러 개의 HTML 엘리먼트를 표시할 때 map() 함수 이용
React에서 여러 개의 HTML 엘리먼트를 표시할 때는 map() 함수를 사용 한다.
map 함수를 사용할 땐 반드시 key JSX 속성을 넣어야 한다.
key를 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.
key 속성
key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
> 첫 엘리먼트에 넣어주기
Key를 선택하는 가장 좋은 방법
> 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용
대부분의 경우 데이터의 ID를 key로 사용한다. (key 속성 값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문에)
렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로! 인덱스(index)를 key로 사용할 수 있다.
+ Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다.
두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.
map을 이용한 반복 Hands-on
react에서 여러 데이터를 렌더링 할 때 사용하는 메소드
1. 배열의 각 요소를 2. 특정 논리(함수)에 의해 3. 다른 요소로 지정(map)한다.
이렇게 써야 했던 코드를
이렇게 간편하게 바꿀 수 있다.
반복적으로 작성해야 하는 부분만 골라서 배열의 요소로 넣으면 React가 이를 인지하고 모든 요소를 렌더링 함.
컴포넌트를 재사용성 있게 만들면 단순 반복되는 코드를 간결하게 작성할 수 있다.
*return문 안에서도 map 메소드를 사용할 수 있다.
JSX를 사용하면 중괄호 안에 모든 표현식을 포함할 수 있기 때문에 map 메소드의 결과를 return문 안에 인라인으로 처리할 수 있다.
코드 가독성을 위해 변수로 추출할지 아님 인라인에 넣을지는 개발자 본인의 판단.
+ 공식문서의 내용
'Study > React' 카테고리의 다른 글
| [TIL] 벨로퍼트와 함께하는 모던 리액트(1) (0) | 2023.12.19 |
|---|
Contents
소중한 공감 감사합니다.