import logo from './logo.svg';
import './App.css';
//App이라는 컴포넌트 만들어주는 코드
function App() { //함수 컴포넌트
//프로젝트에서 컴포넌트 렌더링하면(보여준다는 의미) 함수에서 반환하고 있는 내용 나타냄
//JSX라고 부름
return (
<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;
이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환. 매우 편하게 UI 렌더링 가능
function App() { //함수 컴포넌트
//프로젝트에서 컴포넌트 렌더링하면(보여준다는 의미) 함수에서 반환하고 있는 내용 나타냄
//JSX라고 부름
return (
// <div>
// <h1>리액트 안녕</h1>
// <h2>잘 작동하니</h2>
// </div>
// <Fragment>
// <h1>리액트 안녕</h1>
// <h2>잘 작동하니</h2>
// </Fragment>
<>
<h1>리액트 안녕</h1>
<h2>잘 작동하니</h2>
</>
)
}
export default App;
리액트 컴포넌트에서 요소 여러개를 하나로 감싸주어야 함. Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 함.
div 요소 말고 Fragment도 사용 가능 . 아니면 아예 생략하고 <> 로도 가능
function App() {
const name = '리액트';
return (
<>
<h1>{name} 안녕</h1>
<h2>잘 작동하니</h2>
</>
)
}
export default App;
자바 스크립트 표현식 작성 가능
function App() {
const name = '리액트';
return (
<>
{name == '리액트' ? (
<h1>리액트 입니다.</h1>
): (
<h2>리액트가 아닙니다.</h2>
)}
</>
)
}
export default App;
if문 사용대신 이런식으로 조건문 표현 가능
import logo from './logo.svg';
import './App.css';
import { Fragment } from 'react';
function App() {
const name = '리액트';
const style = {
backgroundColor: 'black',
color : 'aqua',
fontSize : '48px',
fontWeight: 'bold',
padding: 16
};
return (
<div style={style}>{name}</div>
)
}
export default App;
style 객체 미리 선언하고 div의 style 값으로 지정
import logo from './logo.svg';
import './App.css';
import { Fragment } from 'react';
function App() {
const name = '리액트';
return (
<div
style={{
backgroundColor: 'black',
color : 'aqua',
fontSize : '48px',
fontWeight: 'bold',
padding: 16
}}>
{name}
</div>
);
}
export default App;
미리 선언하지 않고 바로 style 값 지정
.react {
background: black;
color : aqua;
font-size : 48px;
font-weight: bold;
padding: 16px;
}
import './App.css';
function App() {
const name = '리액트';
return <div className="react">{name}</div>;
}
export default App;
JSX에서는 class가 아닌 className으로 CSS 클래스 사용
*<br> , <input> 태그는 사용 후 꼭 닫아주자.
태그 사이에 별 내용 없으면 <input />만 쓰고 끝내도 됨.
'FE > React & TS' 카테고리의 다른 글
[REACT] component / state / useEffect (0) | 2023.05.08 |
---|---|
[REACT] create-react-app (0) | 2023.05.08 |
[REACT] propTypes (0) | 2023.05.08 |
[REACT] JSX / setState / converter (0) | 2023.02.15 |
[REACT] Component (0) | 2023.02.07 |