- React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
- JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
- React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.
- create-react-app 으로 간단한 개발용 React 앱을 만들 수 있다.
front-end 개발을 위한 자바스크립트 오픈 소스 라이브러리
➡ 이렇게 되면 사용자가 JSX 파일 하나만 보고도 실제 웹 어플리케이션의 모습과 기능을 상상해 볼 수 있음.
하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.
이렇게 하면 컴포넌트간 의존성이 없이 각자 독립적으로 작동을 한다.
➡ 기능 작동에 집중해서 개발하는 것이 가능
또한 이전에 사용한 컴포넌트를 또 사용할 수도 있기 때문에 재사용성도 높다.
유지보수, 유닛테스트를 하기에도 편하다 .
JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다.
FaceBook에서 관리되어 안정적이고, 가장 유명하며 리액트 네이티브로 모바일 개발도 가능하다.
React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다.
이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있다.
JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. (HTML같이 생겼지만, HTML도 아니다!)
즉, 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다.
➡ 이때 이용하는 것이 "Babel"
Babel: JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 해준다.
컴파일을 하면 브라우저가 JS를 읽고 화면에 렌더링할 수 있다.
React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다. 즉, JS파일과 HTML이합쳐지면서 컴포넌트 하나를 구현하기 위해 필요한 파일이 줄어들었고, 한눈에 컴포넌트를 확인할 수 있게 된 것.
JSX를 사용하면 JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는 것!!!
(물론 JSX 없이도 React 요소를 만들 수 있다. 하지만 코드가 복잡하고, 가독성이 떨어진다)
JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.
JSX는 개발자가 코드만 바라보는게 아니라, 구조를 바라보게 도와준다.
function App() {
const name = 'Ryo';
return (
<div>
hello, {name}!
</div>
);
}
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>;
}
map
메서드의 결과를 return문 안에 인라인으로 처리할 수도 있다.React에서 map
메서드 사용 시, key 속성을 넣지 않으면 아래와 같은 err 발생!
key 속성의 위치는 map 메서드 내부에 있는 엘리먼트 즉, 첫 엘리먼트에 넣자.
key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 함. 만약, id가 없다면 최후의 수단(as a last resort)으로 배열 인덱스를 넣어서 해결