리액트는 페이스북에서 개발한 오픈소스 자바스크립트 라이브러리이다.
프론트엔트 개발에서 많이 사용된다.
리액트의 세 가지 특징
컴포넌트 기반 개발
- 하나의 기능을 위해서 여러 종류의 코드를 묶어 놓은 것을 컴포넌트라고 한다. 리액트는 컴포넌트를 기반으로 프로그래밍한다.
- 컴포넌트로 분리하면 서로 독립적이고 이 컴포넌트는 재사용이 가능하다.
- 만약 UI의 구성을 재배치 한다고 생각했을 때, 컴포넌트를 사용하지 않았다면, HTML과 JS 모두 다시 작성해야 할지도 모른다.
- 컴포넌트로 분리되면 유지와 보수, 유닛 테스트에 용이하다.
- 상기 장점들로 기능 작동 개발에 집중할 수 있게 해준다.
선언형 프로그래밍
- 리액트는 한 페이지를 보여주기 위해서 HTML, JS, CSS를 나누어 작성하기 보다는 JSX를 사용하여 JSX와 CSS로 페이지를 구성한다.
- 작성된 JSX를 보고 각 컴포넌트의 기능과 웹의 구성을 짐작할 수 있다.
범용성
- 리액트는 페이스북(메타?)에서 개발했기에 안정적이고 매우 유명하다.
- 자바스크립트 프로젝트라면, 어디에든 유용하게 사용될 수 있다.
(기존 프로젝트에 유연하게 적용이 가능하다.)- 리엑트 네이티브로 모바일의 개발도 가능하다.
JSX
- 자바스크립트를 확장한 문법으로 이를 통해서 코드를 더 이해하기 쉽게 작성할 수 있다.
- JSX를 Babel이 JS로 변환한다.
JSX 규칙
- 하나의 요소안에 모든 요소가 포함되어야 한다.
- class 대신에 className을 사용해야 한다.
- 자바스크립트를 표현할 때 {}를 통해 코드를 감싸야 한다.
- 사용자 정의 컴포넌트는 대문자로 시작한다.
- 조건부 렌더링에는 삼항연산자 ? 를 사용한다.
- JSX에서 여러개의 HTML 요소를 표현할 때는 map을 이용해 처리한다.
이때에 key 라는 JSX 속성값을 무조건 지정해야 한다.
(주로 배열의 index, id를 key 값으로 지정한다.)
🥟 key는 변하지 않고 예상가능하며 유일해야 한다.
- application은 컴포넌트들의 조합이다.
- 컴포넌트끼리의 관계는 트리구조로 형상화 할 수 있으며, 이를 통해서 UI 구조를 용이하게 변경할 수 있다.
- 리액트 프로젝트를 생성하기 위해서는 node.js, npm(yarn), npx가 설치되어 있어야 한다.
Create-React-App (CRA)
- CRA를 통해서 간편하게 리액트 개발 환경을 구성, 설정할 수 있다.
npx create-react-app <application 이름>
yarn create react-app <application 이름>
- 위 명령어를 통해서 리액트 프로젝트를 만들 수 있다.
리액트에서 CSS 파일을 적용하기 위해서는 해당 CSS 파일을 import 해온다.
🙌🙌🙌🙌