1. JSX 문법
- JSX(JavaScript XML)는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
1) 하나의 부모 요소
-
여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening 태그와 closing 태그로 감싸줘야 한다.
-
React가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자
컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다라는 규칙이 있기 때문이다.
React.Fragment
<React.Fragment></React.Fragment>태그를 사용하면DOM에 의미없는 태그(div)를 사용하지 않고 여러 하위 노드들을 그룹화해서 사용할 수 있다.
<></>와 같이 단축해서 쓸 수도 있다. 다만, 단축해서 쓸 경우key값을 설정할 수 없다.
2) 클로징 태그와 셀프 클로징 태그
- HTML에서 input이나 br을 사용할 때 태그를 닫지 않는 경우가 있었지만, 리액트에서는 반드시 클로징 태그를 써줘야 한다.
3) class 지정
- React에서 CSS class를 지정하려면
className으로 작성해줘야 한다. 만약 원래대로 class라고 작성할 경우 React에서는 이를 html 클랙스 속성 대신 자바스크립트 클래스로 인식한다.
4) PascalCase
- React 엘리먼트가 JSX로 작성되면 '대문자'로 시작(PascalCase)해야 한다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식하게 된다. 이렇게 대문자로 작성된 JSX 컴포넌트를 '사용자 정의 컴포넌트'라고 부른다.
5) JavaScript 표현식
- JSX에서 JavaScript를 쓰려면 중괄호(
{})를 써야한다. 중괄호가 없으면 일반 텍스트로 인식한다.
6) if(for)문 대신 삼항 연산자 사용
- 조건부 렌더링에는 '삼항연산자'를 사용해야 한다.
7) map()
-
React에서 여러 개의 HTML 엘리먼트를 표시할 때는
map()함수를 사용한다.map()함수를 사용할 때는 반드시 'key' JSX 속성을 넣어야 한다. 'key' JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다. -
key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 한다. key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문이다. 정 고유한 id가 없는 경우에만 배열 인덱스를 넣어서 해결할 수 있지만, 배열 인덱스는 최후의 수단(as a last resort)으로만 사용해야한다.
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React!" },
{ id: 2, title: "Installation", content: "You can install React via npm." },
];
// 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>;
}
// map 메서드를 return문 안에 인라인으로 처리한 방법
function Blog() {
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>;
}
FE Developer