#component #리액트 컴포넌트 만드는법 # 컴포넌트 사용법

컴포넌트란 ?

공식문서 : React.Component – React (reactjs.org)

React.Component – React

 

빡대가리식 설명

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 는 문제가 발생함, 못씀