반응형
컴포넌트란 ?
공식문서 : React.Component – React (reactjs.org)
빡대가리식 설명
더보기
HTML 특징 : 더러움 - div 같은 태그 너무 많아짐
react 는 html 덩어리를 한 단어로 축약 할 수 있는 기능을 제공함
= component
컴포넌트 만드는 법
1. function 만들기
-대문자 시작 작명 Component Rule
- function App() 외부에서 만들어야 함
2. return 안에 html 담기
- 하나의 태그 안에서 끝나야 함
- 그래도 병렬 해야 할때는.. ?
-- react 는 제공해줌 fragmaent 문법 : div 안쓰고 그냥 <> </> 쓰고 그 안에 담으면 댐
3. <함수명> </함수명> or <함수명/> 으로 쓰기
function App() {
// ... 생략
<Modal/>
}
function Modal(){
return(
<div className='modal'>
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
컴포넌트를 쓰면 좋은 경우
1. 반복적인 html 축약할 때
2. 큰 페이지들의 전환
3. 자주 변경되는 값들
컴포넌트를 쓰면 안되는 경우
1. state 를 가져다 쓸때
= component 는 문제가 발생함, 못씀
반응형
'JavaScript > React' 카테고리의 다른 글
리액트 반복 출력 # map (0) | 2023.02.14 |
---|---|
#동적인 UI 만들기 #state 이용 # onclick Modal (0) | 2023.02.13 |
#JSX 기본문법 #react style #state (0) | 2023.02.13 |
#react #html 태그 자동완성 (0) | 2023.02.13 |
React #설치 #사용방법 #리액트시작 (0) | 2023.02.12 |