App.js 코드 분석
import logo from './logo.svg'; // import : 특정 파일을 불러옴 <- 자바스크립트 파일에서는 import를 사용해서 다른 파일들을 불러와 사용가능
import './App.css'; // 모듈을 불러와서 사용하는 것은 브라우저에는 X. Node.js에서 지원하는 기능
function App() { // 'App'이라는 함수 컴포넌트 생성(function)
return ( // 반환값은 HTML이 아님. JSX이다.
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
JSX의 장점
- 보기 쉽고 익숙하다
- 더욱 높은 활용도
=> 한 파일에서 생성된 컴포넌트를 다른 파일에서 import하여 HTML 태그 쓰듯이 작성할 수 있다
JSX 문법
1. 감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함.
function App() {
return (
<h1>안녕하세요</h1>
<h2>잘 작동하나?</h2>
);
}
export default App;
해결법
: 여러 태그들을 한 개의 div 태그로 감싼다
function App() {
return (
<div>
<h1>안녕하세요</h1>
<h2>잘 작동하나?</h2>
</div>
);
}
export default App;왜 하나의 요소로 감싸야할까?
: Virtual DOM에서 컴포넌트의 변화를 감지할 때 효율적으로 비교할 수 있도록 하기 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야한다는 규칙이 있기 때문이다.
div 요소를 사용하고 싶지 않다면 'Fragment'기능도 사용 가능하다.
import {Fragment} from 'react';
function App() {
return (
<Fragment>
<h1>안녕하세요</h1>
<h2>잘 작동하나?</h2>
</Fragment>
);
}
export default App;이렇게도 표현할 수 있다
import {Fragment} from 'react';
function App() {
return (
<>
<h1>안녕하세요</h1>
<h2>잘 작동하나?</h2>
</>
);
}
export default App;2. 자바스크립트 표현
JSX에서는 DOM 요소를 렌더링하는 기능뿐만 아니라 자바스크립트 표현식도 사용할 수 있다.
function App() {
const name = 'react';
return (
<div>
<h1>안녕 {name}!</h1>
<h2>잘 작동하나?</h2>
</div>
);
}
export default App;3. If문 대신 조건부 연산자
JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다. 조건에 따라 다른 내용을 렌더링해야 할 때는 (1) JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, (2) {} 안에 조건부 연산자를 사용하면 된다.
function App() {
const name = 'react';
return (
<div>
{name === 'react' ? ( // 삼항 연산자
<h1>react입니다.</h1>
) : (
<h2>react가 아닙니다.</h2>
)}
</div>
);
}
export default App;4. AND 연산자(&&)를 사용한 조건부 렌더링
특정 조건을 만족하지 않을 때 아무것도 렌더링하지 않아야 하는 상황에서, 조건부 연산자를 통해 구현할 수 있지만
function App() {
const name = 'react';
return (
<div>
{name === 'react' ? <h1>react입니다.</h1> : null}
</div>
);
}
export default App;AND 연산자(&&)를 통해서 더 짧은 코드로 똑같은 작업을 할 수 있다.
function App() {
const name = 'react';
return (
<div>
{name === 'react' && <h1>react입니다.</h1>}
</div>
);
}
export default App;5. undefined를 렌더링하지 않기
리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하면 안된다. 그렇게 되면, 다음과 같은 오류를 발생시킨다.
import './App.css'
function App() {
const name = undefined;
return name;
}
export default App;
App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.해결법
어떤 값이 undefined일 수 있다면, Or 연산자(||)를 사용하면 해당 값이 undefined일 때 대신 사용할 값을 지정할 수 있어 오류를 방지할 수 있다.
import './App.css'
function App() {
const name = undefined;
return name || '값이 undefined입니다.';
}
export default App;→ JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.
import './App.css'
function App() {
const name = undefined;
return <div>{name}</div>;
}
export default App;→ name 값이 undefined일 때 보여주고 싶은 문구가 있다면 다음과 같이 코드를 작성하면 된다.
import './App.css'
function App() {
const name = undefined;
return <div>{name || '보여주고 싶은 문구'}</div>;
}
export default App;6. 인라인 스타일링
인라인 스타일링이란, html 태그에 직접 style을 적용하는 방식이다. 리액트에서 DOM 요소에 style을 적용할 때에는 문자열 형태가 아닌, 객체 형태로 적용해야 한다.
(1) style 객체 미리 선언 후 적용
import './App.css'
function App() {
const name = 'react';
const style = {
backgroundColor: 'black', // 카멜 표기법(camelCase)
color: 'aqua',
fontSize: '48px', // font-size => fontSize
fontWeight: 'bold', // font-weight => fontWeight
padding: 16 // 단위 생략시 px
};
return <div style={style}>{name}</div>;
}
export default App;(2) style 바로 선언
import './App.css'
function App() {
const name = 'react';
return <div
style={{
backgroundColor: 'black',
color: 'aqua',
fontSize: '48px',
fontWeight: 'bold',
padding: 16
}}
>
{name}
</div>;
}
export default App;7. class → className
일반 HTML에서 CSS 클래스를 사용할 때에는 <div class="react"></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 = 'react';
return <div className="react">{name}</div>;
}
export default App;JSX 작성 시 CSS 클래스를 설정하는 과정에서 className이 아닌 class로 설정해도 스타일이 적용된다. 하지만 그렇게 되면 브라우저 개발자 도구의 Console 탭에 다음과 같은 경고가 나타난다.
Warning: Invalid DOM property `class`. Did you mean `className
in div (at App.js:6)
in App (at src/index.js:7)8. 꼭 닫아야 하는 태그
HTML에서는 <input>, <br>과 같이 태그를 닫지 않아도 되는 오픈 태그가 존재한다. 하지만, JSX에서는 태그를 닫지 않으면 오류가 발생한다. 따라서 오픈 태그도 닫아주어야 한다.
import './App.css'
function App() {
const name = 'react';
return (
<>
<div className="react">{name}</div>
<input></input>
</>
)
}
export default App; 태그 사이에 별도의 내용이 들어가지 않는 경우에는 다음과 같이 작성할 수 있다. 우리는 이러한 태그를 self-closing 태그라고 한다. 태그를 선언하면서 동시에 닫을 수 있다.
import './App.css'
function App() {
const name = 'react';
return (
<>
<div className="react">{name}</div>
<input /> // self-closing 태그
</>
)
}
export default App;9. 주석
JSX 안에서 주석을 작성하는 방법은 일반 자바스크립트에서 주석을 작성할 때와 다르다.
import './App.css'
function App() {
const name = 'react';
return (
<>
{/* 주석은 이렇게 작성한다 */}
<div
className="react" // 시작 태그를 여러 줄로 작성한다면 '//'로 주석을 작성할 수 있다.
>
{name}
</div>
// 하지만 이런 주석이나
/* 이런 주석은 페이지에 그대로 나타난다.
</>
)
}
export default App;