- React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
- JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
- React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.
- create-react-app 으로 간단한 개발용 React 앱을 만들 수 있다.
🏀What is React?
front-end 개발을 위한 자바스크립트 오픈 소스 라이브러리
🏀리액트의 3가지 특징
🏅 1. 선언형
- 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기 보다는
하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향. (JSX: JS와 HTML이 합쳐진 파일)
➡ 이렇게 되면 사용자가 JSX 파일 하나만 보고도 실제 웹 어플리케이션의 모습과 기능을 상상해 볼 수 있음.
🏅 2. 컴포넌트 기반
-
하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
-
컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.
-
이렇게 하면 컴포넌트간 의존성이 없이 각자 독립적으로 작동을 한다.
➡ 기능 작동에 집중해서 개발하는 것이 가능 -
또한 이전에 사용한 컴포넌트를 또 사용할 수도 있기 때문에 재사용성도 높다.
-
유지보수, 유닛테스트를 하기에도 편하다 .
🏅 3. 범용성
-
JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다.
-
FaceBook에서 관리되어 안정적이고, 가장 유명하며 리액트 네이티브로 모바일 개발도 가능하다.
🏀JSX (JavaScript XML)
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 요소를 만들 수 있다. 하지만 코드가 복잡하고, 가독성이 떨어진다)
🏅 JSX를 써야하는 이유
-
JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.
-
JSX는 개발자가 코드만 바라보는게 아니라, 구조를 바라보게 도와준다.
🏀JSX 활용
1. JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 한다.
2. React에서 CSS class 속성을 지정하려면 "className"으로 표기
- class로 작성하면 React에서는 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의
3. JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용!
- 안 그러면 일반 텍스트로 인식한다.
function App() {
const name = 'Ryo';
return (
<div>
hello, {name}!
</div>
);
}4. React 엘리먼트가 JSX로 작성되면 "대문자"로 시작
- 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식하게 된다.
- 이렇게 대문자로 시작되는 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부름!
5. 조건부 렌더링은 if문이 아닌 삼항연산자를 이용
6. React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용
- map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야한다.
- "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>;
}- JSX를 사용하면 중괄호 안에 모든 표현식을 포함할 수 있기 때문에
map메서드의 결과를 return문 안에 인라인으로 처리할 수도 있다.
이때, 코드 가독성을 위해 변수로 추출할지 아니면 인라인에 넣을지는 개발자가 판단해야 할 몫!
🏅key 속성
-
React에서
map메서드 사용 시, key 속성을 넣지 않으면 아래와 같은 err 발생!
-
key 속성의 위치는 map 메서드 내부에 있는 엘리먼트 즉, 첫 엘리먼트에 넣자.
-
key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 함. 만약, id가 없다면 최후의 수단(as a last resort)으로 배열 인덱스를 넣어서 해결
