React

Stella·2021년 7월 14일

React

리액트

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

리액트의 3가지 특징

리액트의 특징으로는 크게 3가지가 있는대

1. 선언형

2. 컴포넌트

3. 범용성

1. 선언형(Declarative)

리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향합니다.

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

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

3. 범용성(Learn Once, Write Anywhere)

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

JSX란

JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아닙니다.

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법입니다. 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있습니다.

JSX를 써야 하는 이유

DOM에서 JavaScript와 함께 사용하기 위해서는 JavaScript와 HTML을 연결하기 위한 작업이 필요합니다.
Inline 방식이나 script 태그를 이용하여 외부 JavaScript 파일을 연결할 수도 있습니다. (혹은 내부에 넣을 수도 있습니다.)

하지만 React에서는 JSX를 이용해서 앞서 보았던 DOM 코드보다 명시적으로 코드를 작성할 수 있습니다.
JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있습니다. 두 마리 토끼를 한 번에 잡을 수 있죠.
이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 합니다.

JSX문법

JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 합니다.
React에서 CSS class 속성을 지정하려면
"className"으로 표기해야 합니다.
만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해야 합니다.
JSX에서 JavaScript를 쓰고자 한다면, 꼭! 중괄호를 이용해야 합니다.
중괄호를 사용하지 않으면 일반 텍스트로 인식합니다.
React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 합니다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 됩니다.
이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부릅니다.
조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 합니다.
React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용합니다.
map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야합니다.
"key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다.