1.React란?
-
리액트란 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리다.
-
React 3가지 특징
1) 선언형(명시적이라는 뜻이라고 보면 된다. 코드를 보면 바로 알수 있다..): 리액트는 한 페이지를 보여주기 위해 HTML,CSS,JS로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.
2) 컴포넌트 기반(Component-Based): 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.
3) 범용성 (Learn Once, Write Anywhere) : 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다. facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다. -
컴포넌트간의 의존성이 없어져서 독립적으로 기능한다. 재사용 할수 있다. -> 기능작동에 집중하여 개발하고, 에러를 쉽게 찾고 유지보수, 의존성이 없으니 유닛테스트 가능하다.
2. JSX란?
-
JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다. React에서 UI를 구성할때 사용하는 문법으로 JavaScript를 확장한 문법이다. 이 문법을 이용해서 우리는 react 엘리먼트를 만들 수 있다. 그런데 JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript코드는 아니다. ‘Babel’을 통해 브라우저가 이해할 수 있는 JavaScript코드로 변환해주어야한다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일한다.
-
JSX를 사용함으로써 코드의 복잡성을 줄이고 이를 이해하기 쉽게 만들수있다. JSX를 쓰지 않아도 React를 사용할 수 있다. 다만 문법적으로 가독성이 떨어지고 코드가 복잡해지는 단점이 있다.
-
JSX는 JavaSciprt를 확장한 문법으로 주로 React 컴포넌트를 작성할때 사용하는 문법이다.
3. JSX의 규칙
- 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어 있다.
- 엘리머트 클래스 사용시, className으로 표기해야 한다.
- JavaScript를 확장한 문법이기 때문에 이를 활용할 수 있고, 사용시 JSX 내부에서 중괄호
{ }내 JavaScript 표현식을 작성하면 된다. - 사용자 정의 컴포넌트는 대문자로 시작(PascalCase): 소문자를 쓰면 HTML 엘리먼트로 인식하게 된다.
조건부 렌더링에는 if문이 아닌 삼항연산자 사용해야한다. - 여러개의 HTML 엘리먼트를 표시할 때, map()함수를 이용. map함수를 사용할때 ‘key’ JSX속성을 넣어야한다. ‘key’ JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야한다고 경고가 표시된다. key속성 값은 가능하면 데이터에서 제공하는 id를 할당해야 한다. key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야하기 때문이다. 정 고유한 id가 없는 경우에만 배열 인덱스를 넣어서 해결할 수 있다. 그러나 배열 인덱스는 최우의 수단으로만 사용한다.
