고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
생활코딩을 참고하여 작성//
컴포넌트
프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 말한다.
더 쉽게말하자면 하나의 기능을 하는 부분부분으로 떼어서 이동하거나 재사용이 가능하다.
컴포넌트 만드는법
먼저 html로 이렇게 간단한 헤더가 있을때 이것을 컴포넌트로 만드려한다.
<body>
<header>
<h1>WEB</h1>
world wide web!
</header>
</body>
</html>class를 이용해 만들기 (함수형은 나중에 포스팅하겠음)
- class 이름 extends Component 작성
- 이름을 지어준다 (JSX문법에따라 첫글자는 대문자 - Subject라고 지었음)
- reder() / return {} (랜더는 원래 함수인데 클래스안에쓸때는 function을 생략한다.)
class Subject extends Component {
render (){
return {
}
}
}- 이렇게 작성했다면 html로 작성된 부분을 그대로 리턴안에 넣어준다.
class Subject extends Component {
render (){
return {
<header>
<h1>WEB</h1>
world wide web!
</header>
}
}
}주의할점은 역시나 JSX문법에 따르기!
리턴안에 내용은 큰 엘리먼트로 감싸져야한다.
컴포넌트 파일로 분리하기
만든 컴포넌트를 파일로 분리하여 다른파일에서 쉽게불러올수 있도록 하는 방법.
생활코딩 예시)
- component라는 폴더생성
- 각 이름을 가진 js파일 생성하여 각 컴포넌트 붙여넣기(Subject.js파일을 생성하여 Subject붙여넣기)
- 맨위에 impotr React, { Component } from 'react'; 작성
- 아랫부분에 export default Subject 작성// 외부파일에서 사용할 수 있게 하는 것.
컴포넌트 불러오기
위에서는 컴포넌트를 분리하여, 다른 파일에서 사용할 수 있도록했다.
실제로 컴포넌트를 사용하려면
내가 사용하고자 하는 파일 제일위에 import를 그 컴포넌트가 있는 파일로 해준다.
import 사용하고자하는 컴포넌트명 from 컴포넌트의 위치
import React { Component } from 'react';
import Subject from "./component/Subject"
728x90
반응형
'React' 카테고리의 다른 글
| [React]기초 - 이벤트 (0) | 2021.11.03 |
|---|---|
| [React]기초 - State (0) | 2021.11.03 |
| [React]기초 - Props (0) | 2021.10.30 |
| 리액트 react-twittler-intro (0) | 2021.10.27 |
| 리액트 랜덤 명언 앱 만들기 (0) | 2021.10.26 |
