JSX란?
JSX는 JavaScript에 XML을 추가한 확장 문법이다.
React에서 컴포넌트를 만드는데 유용하게 사용된다.
JSX 문법
1. 최상위 태그
컴포넌트에 두 개 이상의 요소가 있다면 무조건 하나의 부모 요소가 감싸는 형태여야한다.
감싸주는 이유는 리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효울적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야한다는 규칙이 있기 때문이다.
function App() {
return (
// <div className="App"> --> ERROR!
<MyHeader />
<h1>안녕하세요</h1>
<br />
<img src={logo} className="App-logo" alt="logo" />
<MyFooter />
// </div>
);
}
이렇게 태그로 감싸고 싶지않다면, React.Fragment 를 사용하면 된다.
React의 기능이기 때문에 import React from 'react'를 써야하지만 상위 컴포넌트에 작성되어있다면 생략이 가능하다.
function App() {
return (
<Fragment>
<MyHeader />
<h1>안녕하세요</h1>
<br />
<img src={logo} className="App-logo" alt="logo" />
<MyFooter />
</Fragment>
);
}2. 태그를 꼭 닫야야한다.
HTML에서는 <img>, <br> 등 닫는 태그가 필요없는 경우도 있다.
하지만 JSX에서는 닫는 태그가 없으면 에러가 발생하기 때문에 <img />,<br /> 처럼 태그는 꼭 닫혀있어야한다.
function App() {
return (
<div className="App">
<MyHeader />
<h1>안녕하세요</h1>
<br />
<img src={logo} className="App-logo" alt="logo" />
<MyFooter />
</div>
);
}JSX 사용하기
1. JSX 안에 자바스크립트 값 사용하기
JSX 내부에서 변수나 객체 같은 자바스크립트 값을 사용할 수 있다.
변수 사용
변수 선언 후, {변수명}으로 사용한다.
function App() {
const name = '은영';
return (
<div className="App">
<MyHeader />
<h1 id="title">안녕하세요! {name}님</h1>
<MyFooter />
</div>
);
}
export default App;객체 사용
function App() {
const user = {
name : '은영',
age : 26
}
return (
<div className="App">
<MyHeader />
<h1 id="title">안녕하세요! {user.name}님</h1>
<p>{user.name}님의 나이는 {user.age}세 맞으신가요?</p>
<MyFooter />
</div>
);
}
export default App;2. 조건부 렌더링
JSX 내부에서 조건부 렌더링을 하려면 삼항 연산자, AND 연산자를 사용한다.
(if문은 사용할 수 없지만 사용하려면 즉시 실행 함수 표현을 사용해야한다.)
삼항 연산자
true일 때와 false 일 때 다른 것을 보여주고 싶을 때 사용한다.
function App() {
return (
<div className="App">
<p>{1+1 === 2 ? (<div>정답</div>) : (<div>땡!</div>)}</p>
</div>
);
}
export default App;2일 경우 정답!이 나오고 2가 아닌 다른 숫자일 경우 땡!이 나온다.
AND 연산자
단순히 조건이 true일 땜나 보여주고 false일 경우는 아무것도 보여주고 싶지 않을 때 사용한다.
function App() {
return (
<div className="App">
<p>{1+1 === 2 && (<div>정답</div>)}</p>
</div>
);
}
export default App;2일 경우 정답이 나오고 2가 아닌 다른 숫자일 경우 아무것도 나오지 않는다.
컴포넌트 만들기
컴포넌트 생성
여러 문법을 통해 컴포넌트를 만들 수 있다.
먼저 ~~~.js 확장자 파일을 만든다. (jsx여도 상관없음)
1. function 키워드로 만들기
const MyFooter = function() {
return <footer>푸터</footer>;
}
export default MyFooter;2. 화살표 함수로 만들기
const MyFooter = () => {
return <footer>푸터</footer>;
}
export default MyFooter;3. export와 function 합쳐서 만들기
export default function MyFooter() {
return <footer>푸터</footer>;
}컴포넌트 사용
이 컴포넌트를 사용하는 상위 컴포넌트에서 import 해준다.
import MyFooter from './components/MyFooter';최상위 컴포넌트 파일인 App.js에서
<MyFooter /> 로 불러오면 된다.
CSS 적용하기
css를 작성하는 방법은 여러가지가 있다.
1. 인라인 스타일
JSX에서 인라인 스타일을 사용할 때는 객체 형태로 작성해준다.
속성값에 대시(-)를 쓰지않고 카멜케이스를 사용한다.
일반 html에서 사용하는 css 속성 background-color, font-size 등을 backgroundColor, fontSize처럼 사용하면 된다.
function App() {
const user = {
name : '은영',
age : 26
}
return (
<div className="App">
<h1 id="title">안녕하세요! {user.name}님</h1>
<p style={{
backgroundColor: "#f00",
color: "#fff",
fontSize: "18px"
}}
>
{user.name}님의 나이는 {user.age}세 맞으신가요?
</p>
</div>
);
}
export default App;
2. 별도의 CSS 파일 사용하기
crate-react-app 을 해주면 App.css 파일과 index.css 파일이 생성된다.
index.css는 페이지 전체에 영향을 미치는 스타일을 정의하고
App.css는 App 컴포넌트에 영향을 미치는 스타일을 정의한다.
하지만 여기에는 문제가 있다.
App.css는 App 컴포넌트에만 영향을 미치지 않는다. 내부에 위치한 하위 컴포넌트에게까지 모두 영향을 미친다.
예시로 아래와 같이 스타일을 적용했다면
/* App.css */
.desc {
font-size: 20px;
color: #f00;
}
/* MyHeader.css */
.desc {
color : blue;
font-weight: bold;
font-size: 40px;
background-color: #61dafb;
}// App.js
function App() {
const user = {
name : '은영',
age : 26
}
return (
<div className="App">
<MyHeader />
<h1 id="title">안녕하세요! {user.name}님</h1>
<p className="desc">
{user.name}님의 나이는 {user.age}세 맞으신가요?
</p>
</div>
);
}
export default App;
// MyHeader.js
export default function MyHeader() {
return <p className="desc">회원님에 대한 정보</p>
}각각의 css가 컴포넌트 모두에 영향을 미친다.
이 방식에서 css 파일들은 각각의 컴포넌트에 종속되는 것이 아니라 전체 파일의 head 부분 안에 다 같이 들어가게되어 전체적으로 영향을 주게된다.
3. CSS Module 활용하기
각 컴포넌트에 종속적인 스타일을 정의할 수 있는 방법이다.
(1) 파일명 확장자를 .module.css로 작성한다.
맨 앞에 오는 파일명은 보통 해당 컴포넌트의 이름으로 한다.
(2) 해당 컴포넌트.js에서 import styles from 파일경로 import. 클래스명은 className={styles.클래스명} 으로 변경.
일반 import 방식과 다르게 styles 라는 객체를 생성한다.
import styles from './MyHeader.module.css';
export default function MyHeader() {
return <p className={styles.desc}>회원님에 대한 정보</p>
}
CSS 모듈 사용시 클래스명 규칙
(1) 하이픈(-) 들어갈 경우
<div className={style['sc-banner']}></div>(2) 클래스 이름을 두 개 이상 적용하는 경우
<div className={`${style.header}${style.fontL}`}></div>
이렇게 MyHeader 컴포넌트에만 적용할 수 있는 스타일을 만들 수 있다.
