01. 감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 감싸주어야 한다.
import React from ‘react’;
function App(){
return (
<div>
<h1>부모 요소로</h1>
<h2>감싸야 되.</h2>
</div>
);
}
export default App;*왜 리액트 컴포넌트 에서 부모 요소로 여러 개의 요소를 감싸야 할까?
VirtualDOM 에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.
리액트 v16 이상부터 도입된 Fragment 는 div 요소 대신 사용할 수 있다.
import 구문에서 react 모듈에 있는 Fragment 라는 컴포넌트를 추가로 불러온다.
Fragment 는 <> 과 같은 형태로도 표현할 수 있다.
import React, { Fragment } from ‘react’;
function App(){
return (
<Fragment>
<h1>Fragment 를 사용해서</h1>
<h2>감싼다.</h2>
</Fragment>
{/* or */}
<>
<h1>이렇게도 사용할 수 있다.</h1>
</>
);
}
export default App;02. 자바스크립트 표현
JSX 안에서는 자바스크립트 표현식을 쓸 수 있다.
JSX 내부에서 코드를 { } 로 감싸면 된다.
import React from ‘react’;
function App() {
const name = “자바스크립트는”;
return (
<>
<h1>{name} 이렇게</h2>
<h2>사용하는거지</h2>
</>
);
}
export default App;03. if 문 대신 조건부 연산자
JSX 내부의 자바스크립트에서는 if 문을 사용할 수 없다.
대신 JSX 밖에서 if 문을 사용에 값을 설정하거나, { } 안에 조건부 연산자(삼항연산자)를 사용하면 된다.
import React from ‘react’;
function App() {
const name = “자바스크립트는”;
return (
<>
{name === “자바스크립트는” ? (
<h1>{name} 이렇게</h2>
) : (
<h2>사용하는거지</h2>
)}
</>
);
}
export default App;04. AND 연산자(&&)를 사용한 조건부 렌더링
import React from ‘react’;
function App() {
const name = “리이애액트으”;
return (
<>
{ name === “리액트” ? <h1>맞아</h1> : null }
</>
{/* or (더 짧게) */}
<>
{ name === “리액트” && <h1>맞아</h1> }
</>
);
}
export default App;&& 연산자 로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때는 null 과 마찬가지로 아무것도 나타나지 않기 때문이다.
*주의 : falsy 한 값인 0은 예외적으로 화면에 나타난다.
05. undefined 를 렌더링하지 않기
리액트 컴포넌트에서는 함수에서 undefined 만 반환해 렌더링하는 상황을 만들면 안된다. (오류 발생)
만약 어떤 값이 undefined일 수도 있다면 OR (||) 연산자를 사용해 오류를 방지할 수 있다.
import React from ‘react’;
function App() {
const result = undefined;
return result || ‘값이 undefined 이다.’;
}
export default App;반면 JSX 내부에서는 undefined를 렌더링해도 괜찮다.
import React from ‘react’;
function App() {
const result = undefined;
return (
<>{ result }</>
{/* or */}
<>{name || ‘undefined일 때 보여줌.’}<>
);
}
export default App;06. 인라인 스타일링
리액트에서는 DOM 요소에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어줘야 한다.
스타일 이름 중에 background-color 처럼 - 문자가 포함되는 이름은 - 을 제거해 카멜 표기법으로 작성해야 한다.
즉, background-color 이 backgroudColor 로 작성된다.
import React from ‘react’;
function App() {
const name = “리이애액트으”;
const style = {
backgroundColor: ‘yellow’,
color: ‘#000’,
fontSize: ‘14px’
}
return <div style={style}>{name}</div>
{/* or (스타일을 미리 선언하지 않고 직접 지정하려면) */}
Rreturn <div style={{backgroudColor: ‘yellow’,
color: ‘#000’,
FontSize: ‘14px’}}>{name}</div>
}
export default App;07. class 대신 className
JSX 에서는 class 가 아닌 className 으로 설정해 주어야 한다.
import React from ‘react’;
function App() {
const name = “리이애액트으”;
return <div className=“react”>{name}</div>
}
export default App;- className 이 아닌 class 값을 설정해도 스타일이 적용되기는 하지만 console 에 경고가 나타난다.
(리액트 v16 이상부터는 class 를 className으로 변환시켜 주고 경고를 띄운다.)
08. 꼭 닫아야 하는 태그
JSX 에서는 태그를 닫지 않으면 오류가 발생한다.
<input></input>
<input /> //self-colsing 태그09. 주석
JSX 안에서 주석을 작성하는 방법은 일반 자바스크립트에서 작성하는 방법과는 다르다.
import React from ‘react’;
function App() {
return (
{/* JSX 안에서 주석은 이렇게 작성한다. */}
<div className=“react” // 이런식으로 주석을 작성할 수도 있다.
>{name}</div>
// 하지만 이런 주석이나
/* 이런 주석은 페이지에 그대로 나타난다. */
);
}
export default App;