프로그래밍/react
1-3) [리액트 기초] 기본 기능 다루기 - 함수 컴포넌트 생성
플로어코딩
2024. 1. 24. 10:22
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;
