감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함
function App() {
return (
<h1> 리액트 </h1>
<h1> 안녕!! </h1>
)
}
export default App;와 같이 요소들을 하나로 감싸지 않으면 안됨
function App() {
return (
<div>
<h1> 리액트 </h1>
<h1> 안녕!! </h1>
<div>
)
}
export default App;와 같이 부모 요소 하나로 감싸야 함
why?
Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙
리액트 v16이상부터는
<div> 대신 <Fragment>라는 기능을 사용하면 됨
import { Fragment } from 'react';
function App() {
return (
<Fragment>
<h1> 리액트 </h1>
<h1> 안녕!! </h1>
</Fragment>
)
}
export default App;또는
function App() {
return (
<>
<h1> 리액트 </h1>
<h1> 안녕!! </h1>
</>
)
}
export default App;로 표현
자바스크립트 표현
JSX 안에서는 자바스크립트 표현식을 사용할 수 있음
JSX 내부에서 { }로 감싸서 사용
function App() {
const name = "리액트";
return (
<>
<h1> {name} </h1>
<h1> 안녕!! </h1>
</>
);
}
export default App;
if문 대신 조건부 연산자
JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수는 없다
조건에 따라 다른 내용을 랜더링해야 할 때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다
조건부연산자 = 삼항연산자
function App() {
const name = "뤼액트";
return (
<>
{name === "리액트" ? <h1> 리액트 입니다. </h1> : null}
<h1> 안녕!! </h1>
</>
);
}
export default App;
AND 연산자(&&)를 사용한 조건부 렌더링
특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아무것도 렌더링 하지 않아야 한다면 조건부 연산자를 통해 구현
function App() {
const name = "리액트";
return (
<>
{name === "리액트" && <h1> 리액트 입니다. </h1>}
<h1> 안녕!! </h1>
</>
);
}
export default App;
리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문
하지만 null이 아닌 0은 렌더링 됨
undifined를 렌더링하지 않기
리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다
function App() {
const name = undefined;
return name;
}
export default App;은 오류를 발생시킨다.
어떤 값이 undefined일 수도 있다면 OR( || ) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있다
function App() {
const name = undefined;
return name || '값이 undefined 입니다';
}
export default App;function App() {
const name = undefined;
return <div> { name } </div>;
}
export default App;처럼 JSX내부에 undefined를 렌더링 하는 것은 괜찮다.
인라인 스타일링
리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형채로 넣어 주어야 한다. 스타일 요소중 - 로 연결된 것은 카멜 표기법으로 작성해야한다.
function App() {
const name = "리액트";
const style = {
backgroundColor: "black",
color: "aqua",
fontSize: "48px",
fontWeight: "bold",
padding: 6,
};
return <div style={style}> {name} </div>;
}
export default App;
class 대신 className
일반 HTML에서 CSS 클래스를 사용할 때는 <div class="myclass"></div>와 같이 class라는 속성을 설정하지만 JSX에서는 class가 아닌 className으로 설정해 주어야 한다
App.css
.react {
background: aqua;
color: black;
font-size: 48px;
font-weight: bold;
padding: 16px;
}
App.js
import "./App.css";
function App() {
const name = "리액트";
return <div className="react"> {name} </div>;
}
export default App;
꼭 닫아야 하는 태그
HTML 코드를 작성할 때 가끔 태그를 닫지 않은 상태로 코드를 작성하기도 한다
input 태그는 <input></input>이라 쓰지 않고 <input>만 써도 작동한다
하지만 JSX에서는 태그를 닫지 않으면 오류가 발생한다.
import "./App.css";
function App() {
const name = "리액트";
return (
<>
<div className="react"> {name} </div>
<input />
</>
);
}
export default App;
주석
import "./App.css";
function App() {
const name = "리액트";
return (
<>
{/* 주-------석 */}
<div
className="react" // 이렇게도 작성 가능
>
{ name }
</div>
<input />
// 이런거나
/* 이런건 안됨 */
</>
);
}
export default App;