리액트 에서는 html 의 div 가 너무 많아지면 코드의 가독성이 떨어지기 때문에 이를 위해 component 로 변경해주는 작업을 한다.
[정리]
1. 컴포넌트 만드는 방법
① function 만들고
② return() 안에 html 담기
③ <함수명></함수명> or <함수명/> 쓰기
1. 컴포넌트 만드는 방법
① function 만들기
- function 은 다른 function 바깥에 만들고, 영어 대문자로 시작해야 한다.
② return() 안에 html 만들기
- 기존의 html 문법에 따라 return 안에 html 코드를 작성한다.
③ <함수명></함수명> or <함수명/> 쓰기
- 만들어준 컴포넌트를 사용하고자 하는 곳에 작성한다.
2. 완성된 코드
App.js
/* eslint-disable */
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
/**ES6 destructuring 문법
* array, object 에 있던 자료를 변수에 쉽게 담고 싶을 때 사용
* ex) 10,100을 a,b에 넣어주세요!
* var [a,b] = [10, 100]
*
*/
let [글제목, 글제목변경] = useState(['남자 코트 추천', '여자 코트 추천', '여자 겨울 옷 추천']);
let posts = '강남 고기 맛집';
let [따봉, 따봉변경] = useState(0); // 따봉변경은 state 변경용 함수를 의미함
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<button onClick={() => {
let copy2 = [...글제목];
글제목변경(copy2.sort());
}}>가나다순정렬</button>
<button onClick={() => {
let copy = [...글제목];
copy[0] = '여자 코트 추천'
글제목변경(copy);
}}>글수정</button>
<div className="list" >
<h3> { 글제목[0] } <span onClick={ () => { 따봉변경( 따봉+1 ) } }>👍</span> { 따봉 } </h3>
<p>2월 17일 발행</p>
<hr/>
</div>
<div className="list" >
<h3> { 글제목[1] } </h3>
<p>2월 17일 발행</p>
<hr/>
</div>
<div className="list" >
<h3> { 글제목[2] } </h3>
<p>2월 17일 발행</p>
<hr/>
</div>
<Modal></Modal>
</div>
);
}
function Modal() {
return(
<div className="modal">
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
export default App;
App.css
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
body {
font-family: 'nanumsqare';
}
.modal {
margin-top: 20px;
padding: 20px;
background: #eee;
text-align: left;
}
.black-nav {
background-color: black;
width: 100%;
display: flex;
color: white;
padding: 20px;
font-weight: 600;
font-size: 20px;
}
.list {
margin-top: 30px;
text-align: left;
padding-left: 20px;
padding-right: 20px;
}
3. 컴포넌트 만들면 좋은 경우
① 반복적인 html 축약할 때
② 큰 페이지들 (페이지 전환시 사용)
③ 자주 변경되는 것들 (UI 등)
4. 컴포넌트 단점
state 가져다쓸 때 문제 발생! (A 함수에 있던 변수는 B 함수에서 맘대로 가져다 쓸 수 없음)