1-2) [리액트 기초] 기본 기능 다루기
1-1) 리액트 앱 최초 만들기 npx create-reacte-app npm run start http://localhost:3000/ 접속 확인 jframework.tistory.com 일단, 위와 같이 npx create-react-app 을 이용하여 리액트 보일러 플레이트를 생성한다. 아래와 같
jframework.tistory.com
위 내용 이어서 진행...
컴포넌트의 네이밍을 할 때에는 첫 글자는 항상 영어 대문자여야 합니다.
리액트에서 가이드로 제시하는 영역이며, 컴포넌트와 HTML 태그와 구분하기 위해서입니다.
import './App.css';
const Header = () => { // 함수형 컴포넌트는 함수명이 대문자로 시작한다.
return (
<header>
<h1>Hello React H1 tag</h1>
</header>
);
}
function App() {
return (
<div className="App">
<Header />
{/* //Header 렌더링 추가 */}
</div>
);
}
export default App;
위와 같이 작성을 하면 Header 컴포넌트를 <div className="App"> 하위에 그리기 때문에
소스적으로는 아래와 동일합니다.
import './App.css';
const Header = () => { // 함수형 컴포넌트는 함수명이 대문자로 시작한다.
return (
<header>
<h1>Hello React H1 tag</h1>
</header>
);
}
function App() {
return (
<div className="App">
<h1>Hello React H1 tag</h1>
</div>
);
}
export default App;
컴포넌트 분리 방법
기존에 작성한 Header 를 별도의 파일로 분리합니다.
- 파일을 분리한 후 외부 다른 파일이 사용할 수 있도록 export 해줍니다.
만약 export 를 해주지 않으면 컴파일 에러가 발생합니다.
동일하게 마찬가지로 Body 와 Footer 영역의 컴포넌트 함수도 분리하여 생성해보도록 하겠습니다.
src/components/Body.js
// src/components/Body.js
const Body = () => {
return (
<div>
<h1>Body</h1>
</div>
);
}
export default Body;
// src/components/Footer.js
const Footer = () => {
return (
<footer>
<p>© 2023</p>
</footer>
)
}
export default Footer;
// src/App.js
import './App.css';
import Header from './components/Header';
import Body from './components/Body';
import Footer from './components/Footer';
function App() {
return (
<div className="App">
<Header />
{/* //Header 렌더링 추가 */}
<Body />
<Footer />
</div>
);
}
export default App;
'프로그래밍 > react' 카테고리의 다른 글
| 1-9) [리액트 기초] useEffect 사용법 (0) | 2024.01.30 |
|---|---|
| 1-8) [리액트 기초] Ref 사용방법 (0) | 2024.01.29 |
| 1-7) [리액트 기초] 여러 개의 입력 상태 관리하기 (1) | 2024.01.29 |
| 1-6) [리액트 기초] 컴포넌트 이벤트 호출 (1) | 2024.01.24 |
| 1-5) [리액트 기초] 컴포넌트 값 전달하기 (0) | 2024.01.24 |
| 1-4) [리액트 기초] JSX란? JSX 문법 (1) | 2024.01.24 |
| 1-2) [리액트 기초] 기본 기능 다루기 (0) | 2024.01.23 |
| 1-1) [리액트 기초] 리액트 앱 최초 만들기 (0) | 2024.01.23 |
댓글