웹, 데스크탑, 모바일 등 다양한 플랫폼에서 활용할 수 있는 프론트엔드 라이브러리, React에 대해서 공부하겠습니다.
- React의 3가지 특징에 대한 이해
- JSX가 왜 명시적인지 이해하고 작성하기
- React Component의 필요성에 대한 이해
React 란?
프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리
React를 사용하는 이유는 3가지 특징 때문입니다.
- 선언형
- 컴포넌트 기반
- 범용성
선언형이란?
페이지를 보여주기 위해서 HTML, CSS, JS로 나누기보다 하나의 파일에 명시하여 작성할 수 있게 도와주는 선언형 프로그래밍입니다.
(HTML, CSS, JS 왔다갔다 할 필요가 없다.)
컴포넌트 기반이란?
하나의 기능 구현을 위해 여러 조건을 묶어놓은 것을 뜻합니다.
컴포넌트를 분리하면 서로 독립적이고 재사용 가능합니다.
(기능 자체에 집중하여 개발이 가능하다.)
범용성
리액트는 JavaScript 프로젝트 어디에든 적용이 가능합니다.
안정적이고, 유명하며, 리액트 네이티브를 통해 모바일 개발도 가능합니다.
JSX란? (JavaScript XML의 줄임말)
JavaScript의 확장 문법입니다.
하지만 JavaScript 코드가 아닙니다. 따라서 "Babel"이라는 친구가 있어야 컴파일하고 브라우저가 읽어 화면에 렌더링 할 수 있습니다.
React JSX
React는 DOM과 다르게 CSS, JSX문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다. 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄었고, 한눈에 컴포넌트 확인이 가능합니다.
JSX는 HTML과 비슷하게 생겼지만 HTML이 아니기 때문에 "Babel"이 필요합니다.
React JSX를 사용하면 DOM(HTML, CSS, JS)를 활용할 때 보다 코드를 명시적으로 작성할 수 있고 한눈에 알아보기도 쉽습니다.
이렇게 구조와 동작에 대한 코드를 묶어 놓은 코드셋을 컴포넌트라고 합니다.
JSX 없이 React 요소를 만들 수 있지만 코드가 복잡하고, 가독성이 떨어지기 때문에 JSX를 사용하는 것이 좋습니다.
JSX 문법
JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 합니다.
JSX 규칙 1번
React에서는 CSS Class 속성을 지정하려면 "className" 으로 표기해야 합니다. HTML에서 작성하듯 class로 작성하게 되면 작동이 안됩니다.
JSX 규칙 2번
JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 합니다.
중괄호를 사용하지 않으면 일반 텍스트가 됩니다.
ex)
function App() {
const name = 'KJ';
return (
<div>
Hello, {name}
</div>
);
}JSX 규칙 3번
React 엘리먼트가 JSX로 작성되면 "대문자" 로 시작해야 합니다. 소문자로 시작하면 HTML 엘리먼트로 인식합니다.
이렇게 "대문자" 로 작성된 JSX 컴포넌트를 정의 컴포넌트라고 부릅니다.
JSX 규칙 4번 (if문이 없다.. 삼항연산자 사용해라)
조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 합니다.
ex)
<div>
{
(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
}
</div>JSX 규칙 5번 (여러 HTML 엘리먼트를 표시 할 때, map()함수를 이용)
React에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용합니다.
map함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 합니다.
"key" 속성을 넣지 않으면 경고가 표시됩니다.
ex)
const posts = [
{id: 1, title: 'KJ', content: 'Welcome'},
{id: 2, title: 'SJ', content: 'Good bye'}
];
function Blog() {
const content = posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{content}
</div>
);
}map을 이용한 반복 Hands-on
React에서 여러 데이터를 렌더링 할 때 map 메소드를 사용합니다.
적은양의 포스트는 하드코딩을 통해 해결할 수 있지만 수백개의 포스트가 작성될 경우 알아서 렌더링할 수 있도록 배열 메소드 map을 활용합니다.
map을 이용한 반복
- 배열의 각 요소 추출
- 특정 논리(함수)를 사용
- 다른 요소로 지정(map) 합니다.
ex) map 실제 예시
function Blog() {
// postToElement라는 함수로 나누지 않고 아래와 같이 써도 무방합니다.
const blogs = posts.map((post) => (
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
));
return <div className="post-wrapper">{blogs}</div>;
}key속성 값을 넣어야 경고가 없어집니다. map 메소드 내부에 있는 첫 엘리먼트에 넣어주면 됩니다.
Component
하나의 기능을 구현을 위한 여러 종류 코드의 묶음입니다.
UI를 구성하는 필수 요소라고 얘기하는 사람도 있습니다.
Component를 사용하면 각자 독립적인 기능을 가지고, UI의 한 부분을 담당하기도 합니다. 컴포넌트 여러개를 조합하여 애플리케이션을 만들 수 있습니다.
모든 React 애플리케이션은 최소 한 개 이상의 컴포넌트를 가지며, 내부적으로는 Root(근본) 역할을 합니다. 다른 자식 컴포넌트 또한 컴포넌트를 가질 수 있고 이를 계층적 구조(hierarchy)라고 합니다.
(결국에는 트리 구조..)
내용 정리
JSX는 JavaScript를 확장한 문법으로 React 컴포넌트를 작성할 때 사용하는 문법입니다. HTML문법을 일부 사용하지만, 다른 문법을 사용합니다.
JSX를 사용하지 않아도 React를 사용할 수 있지만 문법의 가독성이 떨어지고 코드가 복잡해집니다.
주의 사항
두 개 이상의 엘리먼트가 존재할 때는 opening tag, closing tag를 꼭 사용해야 합니다.
컴포넌트 단위로 코드를 작성하면 컴포넌트 간 의존성이 낮아집니다. 따라서 독립적으로 작동합니다.
주의 사항
let langs = ["JavaScript", "HTML", "Python"];
let viewLangs = () => {
return langs.map((it) => {
return <p>{it}</p>;
});
};
return (
<div>
{viewLangs}
</div>
);하단의 return 문 뒤에 {viewLangs}를 함수로 호출했습니다.
함수로 호출할 경우 {viewLangs()}를 써줘야 합니다.
