{/* */} : jsx문법 내부에서의 주석( {} : js요소 )
▶ JSX문법
js문법 내부에 html코드를 작성할 수 있는 문법을 jsx문법이라고 한다.
리액트에서 UI를 구성할 때 보편적으로 사용되는 방법으로 복잡한 코드 필요없이
동적으로 추가되는 dom요소를 단순 코드선언으로 생성할 수 있게 도와준다.
※브라우저 콘솔창에서는 jsx문법을 해석하지 못한다.
** 제목 변경 해보기(랜더링) **
function App() {
let 제목 = "ABC A CLASS";
// state문법
let [제목2, 제목변경함수] = useState(); // 보기 쉽게 한글로 작성함
// let [title, setTitle] = useState("ABC B CLASS"); // => 일반적인 작성관례
// useState : 리액트에서 제공하는 함수 => ["ABC B CLASS", function]
function 제목2변경() {
// 제목2 = "ABC C CLASS";
// => 단순 대입연산자를 활용하는 경우 state값의 변경점을 reactDom이 알지못함(랜더링X)
제목변경함수("ABC C CLASS");
//useState의 두번째 매개변수로 전달받은 함수를 통해 변경시 화면이 재랜더링된다.
}
<div className="App">
<div className='header'>
<h3 style={{ fontWeight: "bolder" }}>{제목2}</h3>
/* jsx는 js와 다르게 스타일 지정해줄때 {}로 지정해야 한다.
{제목2}는 아래 onClick 함수로 인해 제목변경함수의 값이 입력되며 랜더링된다. */
</div>
<div className='nav'>
<button onClick={제목2변경}>제목변경 테스트</button>
<button>게시판</button>
<button>등록</button>
</div>
}
export default App;클릭만으로 새로고침 없이 바로 랜더링된다.
** 배열 게시글 데이터 출력하기 **
function App() {
let [게시글배열, 게시글배열변경함수] = useState([
{ 글번호: 1, 글제목: '초기게시글 1', 글내용: '다이어트3주차 힘드네요', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 2, 글제목: '다이어터 식단표 공유', 글내용: '아침 : 삼각김밥, 점심 : 김밥반줄, 저녁 : 삼각김밥', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 3, 글제목: '다이어트끝나면(1)', 글내용: '편백찜 먹고싶다', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 4, 글제목: '다이어트끝나면(2)', 글내용: '스키야끼 먹고싶다', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 5, 글제목: '다이어트끝나면(3)', 글내용: '타코 먹고싶다', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 6, 글제목: '대충만든 제목', 글내용: '대충만든 글내용', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 7, 글제목: '다이어트끝나면(4)', 글내용: '치킨 피자 먹고싶다', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 8, 글제목: '다이어트끝나면(5)', 글내용: '초밥 먹고싶다', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 9, 글제목: '다이어트끝나면(6)', 글내용: '햄버거 먹고싶다', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 10, 글제목: '오늘은 무슨날?', 글내용: '치팅데이', 작성자: 'admin', 작성일: '2023/12/29' },
]);
return (
<div className='outer'>
<br />
<h2>일반게시판</h2>
<table className='list-table'>
<thead>
/* 번호, 제목, 작성자, 작성일, 삭제에 각각
크기 10% 40% 20% 20% 10% 인라인으로 스타일 부여하기 */
<tr>
<th style={{ width: "10%" }}>번호</th>
<th style={{ width: "40%" }}>제목</th>
<th style={{ width: "20%" }}>작성자</th>
<th style={{ width: "20%" }}>작성일</th>
<th style={{ width: "10%" }}>삭제</th>
</tr>
</thead>
<tbody>
{게시글배열.map(function (게시글, 인덱스) {
return (
<tr>
<td>{게시글.글번호}</td>
<td>{게시글.글제목}</td>
<td>{게시글.작성자}</td>
<td>2023/01/15</td>
<td><button>삭제</button></td>
</tr>
)
})
}
</tbody>
</table>
</div>
}
export default App;
// data.js
let data = [
{ 글번호: 1, 글제목: '초기게시글 1', 글내용: '다이어트3주차 힘드네요', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 2, 글제목: '다이어터 식단표 공유', 글내용: '아침 : 삼각김밥, 점심 : 김밥반줄, 저녁 : 삼각김밥', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 3, 글제목: '다이어트끝나면(1)', 글내용: '편백찜 먹고싶다', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 4, 글제목: '다이어트끝나면(2)', 글내용: '스키야끼 먹고싶다', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 5, 글제목: '다이어트끝나면(3)', 글내용: '타코 먹고싶다', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 6, 글제목: '대충만든 제목', 글내용: '대충만든 글내용', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 7, 글제목: '다이어트끝나면(4)', 글내용: '치킨 피자 먹고싶다', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 8, 글제목: '다이어트끝나면(5)', 글내용: '초밥 먹고싶다', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 9, 글제목: '다이어트끝나면(6)', 글내용: '햄버거 먹고싶다', 작성자: 'admin', 작성일: '2023/12/27' },
{ 글번호: 10, 글제목: '오늘은 무슨날?', 글내용: '치팅데이', 작성자: 'admin', 작성일: '2023/12/29' },
]
export default data;
/*
내보내기 하고 싶은 변수 혹은 함수 앞에 export default를 추가
단, default옵션은 파일당 한 번만 사용가능.
*/** 게시글 삭제하기 **
import './App.css';
import { useState } from 'react';
import data from './data'; // data.js import하여 data 가져옴
function App() {
let [게시글배열, 게시글배열변경함수] = useState(data);
function 게시글삭제(삭제할글번호) {
let 필터링배열 = 게시글배열.filter((게시글) => 게시글.글번호 !== 삭제할글번호);
console.log(필터링배열);
게시글배열변경함수(필터링배열);
}
return (
<div className="App">
<h2>일반게시판</h2>
<table className='list-table'>
<thead>
<tr>
<th style={{ width: "10%" }}>번호</th>
<th style={{ width: "40%" }}>제목</th>
<th style={{ width: "20%" }}>작성자</th>
<th style={{ width: "20%" }}>작성일</th>
<th style={{ width: "10%" }}>삭제</th>
</tr>
</thead>
<tbody>
{게시글배열.map(function (게시글, 인덱스) {
return (
<tr key={인덱스}>
<td>{게시글.글번호}</td>
<td>{게시글.글제목}</td>
<td>{게시글.작성자}</td>
<td>2023/01/15</td>
<td><button onClick={() => 게시글삭제(게시글.글번호)}>삭제</button></td>
</tr>
)
})
}
</tbody>
</table>
</div>
</div>
);
}
export default App;
