1. 리액트 컴포넌트(React Components)란?
컴포넌트란 재사용 가능한 UI 조각을 의미한다.
- 컴포넌트를 이용하면 더 쉽게 UI를 재사용할 수 있고, 유지보수도 쉬워진다.
- 컴포넌트는 독립적이고 재사용 가능하며, 여러 컴포넌트를 조합하여 화면을 구성할 수 있다.
- 컴포넌트는 트리 형태로 구성되어 있으며, 최상위 컴포넌트는 하나만 있어야 한다.
- 컴포넌트의 규칙
- 컴포넌트는 함수 또는 클래스로 정의할 수 있음
- 컴포넌트 이름은 대문자로 시작해야 함
- 소문자로 시작할 경우 컴포넌트를 DOM 태그로 인식하게 됨
- 컴포넌트로부터 엘리먼트를 생성하여 이를 리액트 DOM에 랜더링에 전달할 수 있음
// html div 태그로 인식
const element = <div />;
// 컴포넌트로 인식
const element = <Cat name="겨울" />;- 함수 컴포넌트
- 컴포넌트를 정의하는 가장 간단한 방법
- 일반 함수, 화살표 함수의 형태로 컴포넌트를 정의할 수 있다.
// 일반 함수로 정의
function Header() {
return <header>logo</header>;
}
export default Header;// 화살표 함수로 정의
const Header = () => {
return <header>logo</header>;
};
export default Header;- 클래스 컴포넌트
- 자바스크립트 ES6의 클래스(class)를 사용해 컴포넌트를 정의하는 또 다른 방법
- React.Component를 상속받아서 컴포넌트를 정의할 수 있음
- render() 메소드는 화면에 표시할 내용을 반환해야 함
// 클래스 컴포넌트로 정의
import React from 'react';
class Header extends React.Component {
render() {
return <header>logo</header>;
}
}
export default Header;리액트의 모든 클래스 컴포넌트는 React.Component를 상속받아서 정의해야 한다.
상속이라는 것은 부모 클래스의 기능을 그대로 물려받는 것을 의미한다.
위 예제에서는 React.Component라는 클래스를 상속받아서 Header 클래스를 만들었고,
이는 React.Component를 상속받았기 때문에 리액트 컴포넌트가 된다.
- 리액트 컴포넌트가 가지고 있는 기능은 무엇일까?
- 컴포넌트의 상태(state)를 관리할 수 있음
- 컴포넌트의 생명주기(lifecycle)를 관리할 수 있음
- 컴포넌트의 속성(props)을 관리할 수 있음
2. 컴포넌트 만들기
- 일반 html
<!-- index.html -->
<div id="wrap">
<header>
<h1>logo</h1>
</header>
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/">About</a>
</li>
<li>
<a href="/">SignIn</a>
</li>
</ul>
</nav>
<main>
<section>
<h2>섹션1</h2>
<p>섹션1 컨텐츠</p>
</section>
<section>
<h2>섹션2</h2>
<p>섹션2 컨텐츠</p>
</section>
</main>
<footer>footer</footer>
</div>- 위 html 코드를 리액트 컴포넌트로 나누어 보자.
// App.js
import React from 'react';
function Header() {
return (
<header>
<h1>logo</h1>
</header>
);
}
function Nav() {
return (
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/">About</a>
</li>
<li>
<a href="/">SignIn</a>
</li>
</ul>
</nav>
);
}
function Section() {
return (
<section>
<h2>섹션1</h2>
<p>섹션1 컨텐츠</p>
</section>
);
}
function Footer() {
return <footer>footer</footer>;
}
function App() {
return (
<div id="wrap">
<Header />
<Nav />
<main>
<Section />
</main>
<Footer />
</div>
);
}
export default App;3. 컴포넌트의 재사용
- 컴포넌트는 재사용이 가능하고 재사용하면 코드의 중복을 줄일 수 있다.
- 아래 코드에서 article 컴포넌트를 2번 사용하고 있다.
// App.js
import React from 'react';
//... 생략 ...
function App() {
return (
<div id="wrap">
<Header />
<Nav />
<main>
<Section />
<Section />
</main>
<Footer />
</div>
);
}
export default App;4. 컴포넌트의 조합
-
컴포넌트는 다른 컴포넌트를 포함할 수 있다.
-
컴포넌트를 조합하여 화면을 구성할 수 있다.
-
Header 컴포넌트에 Nav 컴포넌트를 포함시켜 구조를 변경할 수 있다.
// App.js
import './styles.css';
function Header() {
return (
<header>
<h1>logo</h1>
<Nav />
</header>
);
}
function Nav() {
return (
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/">About</a>
</li>
<li>
<a href="/">SignIn</a>
</li>
</ul>
</nav>
);
}
// ... Section 컴포넌트 생략 ...
export default function App() {
return (
<div id="wrap">
<Header />
<main>
<Section />
<Section />
</main>
<Footer />
</div>
);
}5. 컴포넌트의 분리
- 컴포넌트를 분리하면 코드의 재사용성을 높일 수 있다.
- 컴포넌트를 분리할 때는 컴포넌트를 사용하는 부모 컴포넌트와 컴포넌트를 분리하는 자식 컴포넌트로 구분한다.
- 자식 컴포넌트는 부모 컴포넌트에 종속되지 않고 독립적으로 동작해야 한다.
- Header 컴포넌트 분리
// Header.jsx
import React from 'react';
function Header() {
return (
<header>
<h1>logo</h1>
<Nav />
</header>
);
}
export default Header;- Nav 컴포넌트 분리
// Nav.jsx
function Nav() {
return (
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/">About</a>
</li>
<li>
<a href="/">SignIn</a>
</li>
</ul>
</nav>
);
}
export default Nav;- Article 컴포넌트 분리
// Section.jsx
function Section() {
return (
<section>
<h2>섹션1</h2>
<p>섹션1 컨텐츠</p>
</section>
);
}
export default Article;- App 컴포넌트에서 분리한 컴포넌트를 불러와서 사용한다.
// App.js
export default function App() {
return (
<div id="wrap">
<Header />
<main>
<Section />
<Section />
</main>
<Footer />
</div>
);
}
export default App;6. 컴포넌트 랜더링
- 컴포넌트를 랜더링(출력)할 때는 ReactDOM.render() 함수를 사용
- 첫 번째 파라미터는 랜더링할 결과물, 두 번째 파라미터는 컴포넌트를 어떤 DOM에 그릴지 정함
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));