컴포넌트 제작하기
컴포넌트를 제작하기 전 아주 간단한 pure.html 라는 파일을 pubilc 폴더 안에 만들어 주었다.
pure.html
<html>
<body>
<header>
<h1>WEB</h1>
Hi, My name is jin seok.
</header>
<nav>
<ul>
<li><a hresf="1.html">HTML</a></li>
<li><a hresf="2.html">CSS</a></li>
<li><a hresf="3.html">Javascript</a></li>
</ul>
</nav>
<article>
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
</body>
</html>
pure.html 부분에서 <header> 부분만 리액트에 컴포넌트 적용시켜보고자 한다.
<header>
<h1>WEB</h1>
Hi, My name is jin seok.
</header>
일단 src 폴더 안에 있는 App.js 파일을 열어 컴포넌트를 제작한다.
App.js
import React, {Component} from 'react';
import './App.css';
class App extends Component { //자바스크립트의 class 함수라고 보면 된다.
render (){
return (
//아래에서 <header>을 컴포넌트한 class의 Subject을 이와 같이 붙여주면 적용 완료.
<div className="App">
<Subject></Subject>
</div>
);
}
}
class Subject extends Component {
render (){
return (
<header>
<h1>WEB</h1> // class 함수안에 render() 함수안의 return 값으로 컴포넌트
Hi, My name is jin seok. //하고 싶은 <header> 부분을 붙여놓았다.
</header> //이때 특이한 점은 자바스크립트 코드임에도 따로 콤마 표시같은
//형식적인 자바스크립트 규칙을 안해도 적용이 되는 게 리액트 특징이다.
);
}
}
export default App;
아래와 같이 리액트의 index에 컴포넌트 한 <header> 값이 적용되었다.
이렇게 이런 컴포넌트 기능을 사용한다면 실제 실무에서 만약 <header> 부분 안에 방대한 정보들이 있다면 획기적으로 정리정돈 할 수 있다.
props
리액트의 API 기능 중 하나인 props 기능을 사용하면 적용시킨 컴포넌트를 더 효율적으로 다룰 수 있다.
{this.props.name}
import React, {Component} from 'react';
import './App.css';
class App extends Component {
render (){
return (
//아래에 <Subject> 부분에 title 및 sub nmae으로 <header>을 대신한 각각 값을 주었다.
//대신 <header>에는 원래의 값들을 지우고 props 기능을 적용시켰다.
<div className="App">
<Subject title="WEB_prop Test" sub="Hi, My name is jin seok."></Subject>
</div>
);
}
}
class Subject extends Component {
render (){
return (
//아래와 같이 <header>의 본래 값들을 지우고 props 기능을 추가하였다.
<header>
<h1>{this.props.title}</h1>
{this.props.sub}
</header>
);
}
}
export default App;
이와 같이 props 기능을 이용하여 더 실용성 있는 코딩할 수 있게 되었다. 아무리 컴포넌트를 많이 써놓아도
title과 sub 값만 수정하면 <header>라는 수 많은 태그가 있다 가정하면 한 번의 수정으로 모두 적용이 되니 매우 효율적이다.
컴퍼넌트 분리하기
더 효율적으로 컴퍼넌트를 코드 상에서 이용하기 위해서는 컴퍼넌트 파일 별로 분리하여 연동시키는 것이 좋다.
src 폴더 안에 component라는 폴더를 만들고 그 안에 분리할 컴포넌트 파일을 넣어둘 js 파일 하나를 만들어놓는다.
그리고 위와 같이 Subject.js 파일에 Subject 컴포넌트를 App.js에서 가져와 붙여준다.
그리고 App.js으로 돌아와 원래 있던 Subject 컴포넌트는 지우고 Subject.js 파일과 연동시켜주는 코드를 작성해주면 분리 완료이다.
그대로 리액트는 실행이 된다.
이렇게 분리하는 과정을 수 많은 컴포넌트를 따로 따로 분리해두면 수정 및 개발 할때 매우 정리 정돈이 잘되어 매우 효율적으로 일을 처리할 수 있다.
'프로그래밍 개발 > ReactJs' 카테고리의 다른 글
| ReactJs - Update , Delete기능 구현하기 (0) | 2021.01.04 |
|---|---|
| ReactJs - Create 기능 구현 (0) | 2021.01.04 |
| ReactJs - 이벤트 (0) | 2020.12.31 |
| ReactJs - state (0) | 2020.12.31 |
| React.js - 리액트 개발 환경 구축하기 (0) | 2020.12.30 |
댓글