SW과정 REACT 14일차 0914
1. Props(프로퍼티:속성, 특성) vs State(상태)
1) props
(1) 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용 '단방향으로 데이터가 흐른다'
(2) 값을 받은 컴포넌트에서의 프로퍼티 값은 직접 수정을 할 수가 없다.
(3) 자식으로 넘겨온 프로퍼티값은 읽기 전용인 데이터이다.
2) State
(1) 값을 바꿔야 하는 경우에 사용 프로퍼티와 다르게 쓰기전용
(2) 값을 저장하거나 변경할 수 있는 객체
(3) 컴포넌트 내부에 선언하고, 내부에서 값을 변경할 수 있다.
2. STS4 특수문자 작성
<![CDATA[]]>이 안쪽에 있는 특수문자는 적용안됨
3. 오버로딩
자바의 한 클래스 내에 이미 사용하려는 이름과 같은 이름을 가진 메소드가 있더라도, 매개변수의 개수나 타입이 다르면 같은 이름을 사용해서 메소드를 정의할 수 있다. (대표적으로 pritln 메소드!)
4. 게시판 페이징 기능
import axios from "axios";
import React from "react";
import {Link} from 'react-router-dom';
import './Board.css';
class Board extends React.Component{
state={
page:1,
boardList:[],
}
getBoard=async ()=>{
const resultData =await axios.get('http://localhost:9999/boardList2?page='+this.state.page);
//console.log(resultData.data);
this.setState({boardList: resultData.data})
// if(this.state.boardList.length===0){
// alert("맨 끝 페이지입니다.")
// this.prePage();
}
componentDidMount(){
this.getBoard();
}
nextPage= async () =>{
const resultData =await axios.get('http://localhost:9999/boardCount');
console.log(resultData.data/3);
await this.setState({page: this.state.page+1});
if(this.state.page > resultData.data/3+1){
this.state.page = resultData.data/3+1;
alert("마지막 페이지 입니다.")
}
this.getBoard();
}
prePage= async () =>{
if( this.state.page > 1){
await this.setState({page: this.state.page-1});
this.getBoard();
}else{
alert("첫번째 페이지 입니다.");
}
}
render( ){
return (
<div className="about__container board-table">
<table className='table table-striped'>
<thead className='thead-dark'>
<tr><th>글번호</th><th>글제목</th><th>글쓴이</th><th>작성일</th></tr>
</thead>
<tbody >
{
this.state.boardList.map((item,index)=>{
if(item.parentNo===0){
return <tr key={index}><td>{item.articleNo}</td>
<td>
<Link to = {{pathname:'/BDetail', state:{...item}}}>
<font size="2" title={item.content}>{item.title}</font>
</Link></td>
<td>{item.id}</td><td>{item.writeDate}</td></tr>
}else{
let icon='↪️';
for(let i=2;i<item.level;i++){
icon += icon;
}
return <tr key={index}>
<td>{item.articleNo}</td>
<td>
<Link to = {{pathname:'/BDetail', state:{...item}}}>
<font size="2" title={item.content}>
{icon}{item.title}</font>
</Link>
</td>
<td>{item.id}</td>
<td>{item.writeDate}</td>
</tr>
}
})
}
</tbody>
</table>
<div className="pagebtn">
<div className="prebtn"><Link to='/board' onClick={this.prePage} > {'<< 이전 글'}</Link></div>
<div className="nextbtn"><Link to='/board' onClick={this.nextPage} > {'다음 글 >>'}</Link></div>
<br/><br/>
<Link to={{pathname:'/board-write'}}>
<button className="btn btn-info new__btn">새글쓰기</button></Link>
<Link to={ {pathname:'/' } } >
<button className="btn home__btn">홈으로</button>
</Link>
</div>
</div>
);
}
}
export default Board;import React from "react";
import './Board.css'
import axios from "axios";
import { Link } from "react-router-dom";
class BoardWrite extends React.Component{
// boardWriteHandler = async()=>{
// const title_ele=document.getElementById("title");
// const content_ele=document.getElementById("content");
// console.log(title_ele.value, content_ele.value);
// const axios2 = axios.create({
// withCredentials: ture
// })
// };
boardAnsHandler= async () => {
const title_ele=document.getElementById("title");
const content_ele=document.getElementById("content");
console.log(title_ele.value, content_ele.value);
const axios2 = axios.create({
withCredentials: true
});
const returnData=await axios2.post('http://localhost:9999/boardWrite',
null,
{params:{title:title_ele.value, content:content_ele.value, articleNO:this.props.location.state.articleNo}}, );
alert("답글 등록 완료");
}
boardWriteHandler= async () => {
const title_ele=document.getElementById("title");
const content_ele=document.getElementById("content");
console.log(title_ele.value, content_ele.value);
const axios2 = axios.create({
withCredentials: true
});
const returnData=await axios2.post('http://localhost:9999/boardWrite',
null,
{params:{title:title_ele.value, content:content_ele.value}}, );
alert("새글 등록 완료");
}
render(){
return (
<div className="about__container">
<div className="row">
<table className="table" style={{textAlign: 'center' }} >
<thead>
<tr className="table-active">
<th scope="col" style={{width: '50%' }} > 글제목 : <input id="title" /> </th>
</tr>
</thead>
<tbody>
<tr><td colSpan="2"><textarea rows="10" cols="50" id="content"></textarea></td></tr>
<tr >
<td colSpan="2">
<button className="btn btn-info" onClick={()=>{
if(this.props.location.state==null){
this.boardWriteHandler();
}else{
this.boardAnsHandler();
console.log(this.props.location.state)
}
}} >등록</button>
<Link to="/board"><button className="btn btn-info">취소</button></Link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
)
}
}
export default BoardWrite;
DataEngineer Lee.