리액트란?
리액트는 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리
리액트가 필요한 이유?
아래 세가지 특징 덕분에 프론트엔드 개발을 더 효율적으로 할 수 있다.
선언형(Declarative)
리액트는 한 페이지를 보여주기 위해 HTML, CSS, JS로 나눠서 적기보다 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.
개발에서의 선언, 명시의 뜻은?
코드를 자세히 분석하지 않아도 의도를 분명하게 알 수 있는것
HTML로 다 적었는데 자바스크립에서 쿼리셀렉터로 가져와서 코드를 작성하는 건 직관적이지 않음!
반면에 리액트는 JSX라는 HTML과 JS가 결합한 문법을 기반으로 명시적으로 코드를 작성하여 직관적임!
다른 기술을 한 곳에 모아 봐서 코드만 봐도 실제 어플리케이션의 모습과 기능을 상상할 수 있음
컴포넌트 기반(Component-Based)
리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면서 서로 독립적이고 재사용 가능하기 때문에 기능 자체에 집중하여 개발할 수 있다.
범용성
리액트는 자바스크립트 라이브러리이다! 기존의 자바스크립트 프레임워크로 제작된 웹 어플리케이션에 추가해서 사용할 수 있다.
JSX
JSX는 Javascript XML의 줄임말이며 React에서 UI를 구성할 때 사용하는 문법으로 Javascript를 확장한 문법이다. 이 문법으로 React 엘리먼트를 만들 수 있다.
JSX는 JavaScript가 확장된 문법이지만 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니기 때문에 Babel로 JSX를 브라우저가 이해할 수 있는 Javascript로 컴파일한다. 컴파일 후 Javascript를 브라우저가 읽고 화면에 렌더링할 수 있다.
// JSX로 작성한 코드
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// Babel은 JSX를 React.createElement()로 컴파일한다.
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
// 컴파일한 결과물
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다. 즉, 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들었고, 한눈에 컴포넌트를 확인할 수 있게 되었다.
👉 JSX를 사용하면 JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있다!
JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다. 이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 한다.
JSX 없이는 리액트 요소를 만들 수 없을까?
만들 수 있다! 다만 코드가 복잡하고 가독성이 떨어진다...
JSX 규칙
-
JSX에서 여러 엘리먼트를 작성할 때 최상위에서 opening tag와 closing tag로 감싸줘야 한다.
-
React에서 CSS class 속성을 지정하려면 className으로 표기해야 한다.
👉 class로 작성하게 되면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의! -
JSX에서 JavaScript를 쓸 때 중괄호를 사용한다.
👉 중괄호가 없을 시 일반 텍스트로 인식 -
React 엘리먼트가 JSX로 작성되면 대문자로 시작해야한다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 된다.
👉 대문자로 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 한다. -
조건부 렌더링은 if문이 아닌 삼항연산자를 사용한다.
-
태그가 비어있다면
/>를 사용해서 닫아준다. JSX 태그는 자식을 포함할 수 있다. -
React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프하므로 애플리케이션에 명시적으로 작성되지 않은 내용은 주입되지 않는다. → XSS 공격을 방지한다.
-
여러 개의 HTML 엘리먼트를 표시할 때 map()을 이용한다(map() 사용 시 반드시 key JSX 속성을 넣어야 한다. 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다고 경고 표시)
map을 이용한 반복
function Blog() {
const postToElement = (post) => (
<div>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
const blogs = posts.map(postToElement);
return <div className="post-wrapper">{blogs}</div>;
}Component
컴포넌트는 하나의 기능 구현을 위한 여러 종류의 코드 묶음이며 UI를 구성하는 필수 요소다.
리액트 어플리케이션은 컴포넌트들의 관계를 트리 구조로 형상화하여 표현할 수 있다.
Create React App
Create React App이란?
리액트 SPA(Single Page Application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
👉 복잡한 개발 세팅을 미리 해줌
