component
어떨 때 컴포넌트를 사용하는지
- 반복적인 html을 축약 하고 싶을 때
- 큰 페이지들을 컴포넌트로 만듦
- 자주 변경되는 UI
컴포넌트 만드는 법
1번째 방법
function Modal() {
return (
<div className="modal">
<h4>제목</h4>
<p>상세내용</p>
<p>상세내용</p>
</div>
);
}
export default Modal;
2번째 방법
const Modal = () => {
return (
<div className="modal">
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
);
}
export default Modal;
3번째 방법
export default function Modal() {
return (
<div className="modal">
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
);
}
- function 만들기
- return 안에 html 작성
- default 해서 넘겨주기
- 만든 함수를 쓰고싶으면 import 해오기
import Modal from './components/Modal'
- <함수명></함수명>
- <함수명 />
둘중 하나 선택해서 입력
<Modal></Modal>
or
<Modal />
HTML 중간에 조건문 사용하려면 삼항연산자 사용하기.
map()
map() : array.length 만큼 함수안의 코드를 실행 한다.
기본 사용법
- 모든 array 자료에는 map 함수를 적용할 수 있다.
- return 값은 array로 담아준다.
[1, 2, 3].map(function (a) {
return '31231'
})
결과:
(3) ['31231', '31231', '31231']
0:"31231"
1:"31231"
2:"31231"
length:3
// array가 3개이니 3번 반복되는 것을 볼 수 있다.
배열에 map 함수를 쓰고싶으면
{
글제목.map(function (a, i) {
return (
<div className="list" key={i}>
<h4>{글제목[i]}</h4>
<p>2월 17일 발행</p>
</div>
);
})
}
- 여기서 i는 반복문 돌 때 마다 0부터 1씩 증가하는 정수이다. 그렇기에 배열의 index 로 사용한다.
- key 가 추가되는 이유 : 배열은 각각 key값이 존재하는데, 반복문을 사용해서 배열을 만들 때는 유니크한 key값을 지정해줘야 에러가 나지 않는다.
props
기본 사용법
- 전송 시 props를 사용
1. 부모 컴포넌트에 자식컴포넌트 작명
{
modal == true ? <Modal 작명={글제목} /> : null;
}
- 자식 컴포넌트에 props 파라미터 등록 후 보내고싶은 곳에 props.작명 사용