*개발자들은 리액트를 컴포넌트 기반의 UI라이브러리라고 소개한다.
1. 컴포넌트 만들기 (함수컴포넌트 권장)
- 함수컴포넌트는 화살표 함수를 사용할 수도 있음.
- return ( ) ; => 여러 줄로 이루어진 HTML을 반환할 때는 return문에서 반환할 HTML을 소괄호로 감싼 다음 마지막에 세미콜론을 붙임.
- 컴포넌트 이름은 항상 대문자로 시작.
- 리액트는 다른 컴포넌트를 태그로 감싸 사용함.(자식 컴포넌트를 배치한다.)
- 부모컴포넌트 : 다른 컴포넌트를 return문 내부에 포함하는 컴포넌트
- 자식컴포넌트 : return문에 포함된 컴포넌트
import React from 'react';
import './App.css';
function Header(){
return (
<header>
<h1>header</h1>
</header>
);
}
function App(){
return <div className="App"></div>
}
export default App;- 컴포넌트를 페이지에 렌더링하기
import React from 'react';
import './App.css';
const Header = () => {
return (
<header>
<h1>header</h1>
</header>
);
}
function App(){
return (
<div className="App">
<Header />
</div>
)
}
export default App;2. 컴포넌트의 계층 구조(컴포넌트 트리)
| <App /> : 루트컴포넌트(항상 최상위에 존재하는 컴포넌트) | ||
| <Header /> | <Body /> | <Footer /> |
3. 컴포넌트 별로 파일 분리하기
- 보통 하나의 파일에 하나의 컴포넌트를 만듦.(코드 가독성을 위해)
4.컴포넌트 불러오기
import Header from "./component/Header";
728x90
'React > React 기초' 카테고리의 다른 글
| React 기초 )) JavaScript template literal (0) | 2023.08.09 |
|---|---|
| React 기초 )) React UI-React styling 방법론 (0) | 2023.08.09 |
| react 기본 기능 )) Hook 비교 (0) | 2023.07.28 |
| 리액트의 기본 기능 )) JSX (0) | 2023.07.25 |
| 리액트 시작하기 (0) | 2023.07.25 |
