리액트에서 component(컴포넌트)란 재사용 가능한 UI 단위를 뜻한다.
리액트는 컴포넌트로 구성되어 있다고 해도 과언이 아니다.
컴포넌트가 무엇인지 알아보자.
: 프론트앤드 개발에서 Component 라는 단어를 많이 사용한다.
로그인, 회원가입 페이지 등등 아이디와 패스워드를 받는 input 요소가 필요하다고 했을 때, 각각의 페이지에서 동일한 코드가 아마 많이 반복 될 것이다.
(input,button,div 등등 HTML, 그것을 꾸며주는 CSS, 기능을 작동시킬 JS.... 등등)
이런 것을 단 한개만 만들어두고 필요한 곳에서 이것을 필요한 곳에서 뽑아 쓸 수 있게 만들어 주면 얼마나 코드가 줄어들까.
바로 이런 작게 잘라둔 단위를 컴포넌트라고 한다.
즉, 컴포넌트는 독립적이다.
: 컴포넌트는 2종류가 있다.
두 종류가 장단점이 있으니 모두 알아 두어야한다.
// Class형 컴포넌트
class Component extends React.Component {
render() {
return (
<div>
<h1>This is Class Component!</h1>
</div>
)
}
}
// Fuction형 컴포넌트
class Component extends React.Component {
render() {
return (
<div>
<h1>This is Class Component!</h1>
</div>
)
}
}
: 컴포넌트는 함수형 클래스형 모두 만들 수 있다.
function Welcome(props) {
return (<h1>Hello, {props.name}</h1>); /*JSX 형식을 불러와 준다.*/
}
class Welcome extends React.Component {
render() { /*render() 는 필수다.*/
return <h1>Hello, {this.props.name}</h1>; /*return도 필수다.*/
}
}
Welcome
이 된다.: 컴포넌트는 사용하기 위해서는 부모 컴포넌트와 자식간의 연결이 되어야한다.
class 컴포넌트이름 extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
export default 컴포넌트이름; // export 를 해야 다른 곳에서 쓸 수 있다.
export
를 해주어야한다.import '자식 컴포넌트를 사용할 이름' from '자식 컴포넌트의 경로';
class Main extends Component {
render() {
return (
<컴포넌트 이름 />
)
import
해준다.: constructor → render → componentDidMount → ( setState ) → render