0. 리액트 오픈소스 연결
1. DOM Container를 만들기(#root)
2.
3. 클래스형 컴포넌트 생성
- 웹제작에 필요한 섹션단위(영역)라고 생각하면 된다.
- 예] 헤더, 메인, 섹션1, 섹션2..., 푸터 컴포넌트 등을 만들수 있다.
- 클래스형 컴포넌트 생성
3-1. 클래스 네이밍 규칙 : 파스칼케이스 기법
3-2. extends로 확장/상속받는다. React.Component에서 상속 받는다.
4. render() 메소드를 만든다. 클래스 안에서 쓰는 ()는 모두 메소드.
4-1. return문에 의해서 태그들을 뿌려준다. 딱 하나만의 태그를 넣어야 함. 싱글!페이지 단위로 이동된다. 라우터가 이런 방식을 쓴다.
5. 리액트 돔 : component와 dom component를 연동
리액트 돔 : 컴포넌트와 돔컨테이너 연동/ 웹브라우저에 마운트 시킨다고 말함.
프롭스(props) : properties , 속성인데, html태그에서 속성과 속성값이 있는데, 이 속성을 조작하는데 사용.
ps.<!-- 리액트안에서 제이쿼리가 돌아가므로, 아래에 작성하고, type="text/babel"을 꼭 씀 -->
<script type="text/babel" src="js/react_project2.js"></script>
<script type="text/babel" src="./js/script.js"></script>
html 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리액트 컴포넌트 생성하기</title>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 바벨 밑에 제이쿼리 연결함 -->
<script src="./js/lib/jquery.min.js"></script>
</head>
<body>
<!--
0. 리액트 오픈소스 연결
1. DOM Container를 만들기(#root)
2.
3. component
- 웹제작에 필요한 섹션단위(영역)라고 생각하면 된다.
- 예] 헤더, 메인, 섹션1, 섹션2..., 푸터 컴포넌트 등을 만들수 있다.
- 클래스형 컴포넌트 생성
4. 리액트 돔 : component와 dom component를 연동
-->
<div id="root">
</div>
<script type="text/babel" src="./js/react_project1_me.js"></script>
</body>
</html>react script 작성
(()=>{
class HeaderComponent extends React.Component{
render(){
// tbody안에 들어갈 내용을 출력변수 result에 map으로 받아작성
// render와 return사이에 출력변수 result를 정의하는것.
const result = this.props.scoreList.map((value, idx) =>{
return(
<tr>
{/* 아래 style 변수객체에 작성한것 사용 style.td */}
<td style={style.td}>{value.index}</td>
<td style={style.td}>{value.name}</td>
<td style={style.td}>{value.subject1}</td>
<td style={style.td}>{value.subject2}</td>
<td style={style.td}>{value.subject3}</td>
</tr>
);
});
// return 안에 돔요소를 작성하고, 맨 아래 ReactDOM으로 연결
return(
<header id="header">
<h1>header component title</h1>
<h1>props 중 title속성 : {this.props.title}</h1>
<h1>name : {this.props.name}</h1>
<div>
<ul>
<li>{this.props.scoreList[0].index} : {this.props.scoreList[0].name}</li>
<li>{this.props.scoreList[1].index} : {this.props.scoreList[1].name}</li>
<li>{this.props.scoreList[2].index} : {this.props.scoreList[2].name}</li>
<li>{this.props.scoreList[3].index} : {this.props.scoreList[3].name}</li>
<li>{this.props.scoreList[4].index} : {this.props.scoreList[4].name}</li>
</ul>
</div>
<hr />
<table style={{borderCollapse:"collapse", width:"800px"}}>
<thead>
<tr>
<th style={style.th}>index</th>
<th style={style.th}>name</th>
<th style={style.th}>subject1</th>
<th style={style.th}>subject2</th>
<th style={style.th}>subject3</th>
</tr>
</thead>
<tbody>
{/*
출력변수를 넣는다. 이 출력변수는 이 콤포넌트의
render()와 return사이에 변수로 선언하여 넣어줌.
*/}
{result}
</tbody>
</table>
{/* 하위컴포넌트 작성가능. 속성작성한것 잘보기 */}
<Section1Component title={this.props.title2} score={this.props.scoreList} />
</header>
)
}
}
//HeaderComponent하위에 있는 Section1Component도 class 컴포넌트로 작성
class Section1Component extends React.Component {
render(){
//하위컴포넌트는 상위컴포넌트를 상속받는데, 아래처럼 간략하게 작성할 수 있다.
const {title, score} = this.props;
return(
<section id="section1">
<h2>{title}</h2>
<p>{score[0].index}. {score[0].name}'s sum : {score[0].subject1+score[0].subject2+score[0].subject3}, avg : {Math.ceil((score[0].subject1+score[0].subject2+score[0].subject3)/3)}</p>
<p>{score[1].index}. {score[1].name}'s sum : {score[1].subject1+score[1].subject2+score[1].subject3}, avg : {Math.ceil((score[1].subject1+score[1].subject2+score[1].subject3)/3)}</p>
<p>{score[2].index}. {score[2].name}'s sum : {score[2].subject1+score[2].subject2+score[2].subject3}, avg : {Math.ceil((score[2].subject1+score[2].subject2+score[2].subject3)/3)}</p>
<p>{score[3].index}. {score[3].name}'s sum : {score[3].subject1+score[3].subject2+score[3].subject3}, avg : {Math.ceil((score[3].subject1+score[3].subject2+score[3].subject3)/3)}</p>
<p>{score[4].index}. {score[4].name}'s sum : {score[4].subject1+score[4].subject2+score[4].subject3}, avg : {Math.ceil((score[4].subject1+score[4].subject2+score[4].subject3)/3)}</p>
</section>
);
}
}
HeaderComponent.defaultProps = {
// 콤포넌트의 props는 속성 = 값을 주는형태로 작성하는데, 객체값으로 여러개를 넣을 수 있다.
// 즉 객체 형식(key : value, ...)으로 작성한다.
title : "header component title",
name : "bella",
scoreList : [
{index : 1, name : 'Tom', subject1 : 100, subject2 : 80, subject3 : 70},
{index : 2, name : 'Kyle', subject1 : 80, subject2 : 85, subject3 : 100},
{index : 3, name : 'David', subject1 : 90, subject2 : 90, subject3 : 90},
{index : 4, name : 'Marcel', subject1 : 85, subject2 : 88, subject3 : 80},
{index : 5, name : 'Isac', subject1 : 98, subject2 : 76, subject3 : 99}
],
title2 : '섹션1 컴포넌트 타이틀'
}
// 속성을 객체변수의 형태로 작성하여, 위에 태그 안에 적요
const style = {
td : {
textAlign : "center",
border:"1px solid #ddd",
height:'40px'
},
th : {
border:"1px solid #ddd",
height:'40px',
backgroundColor : '#eee'
}
}
Section1Component.defaultProps ={
title : "section1 component title"
}
ReactDOM.render(
// 속성을 태그안에 작성가능하나, 따로 defaultprops로 빼면 많이 작성가능.
// <HeaderComponent title="header component title" name="bella"/>,
<HeaderComponent />,
document.getElementById('root')
);
})()
'CoALab's React' 카테고리의 다른 글
| 1. 리액트 진행 두가지 방식 (0) | 2022.04.06 |
|---|