6강 컴포넌트 사용 방법

#

html 덩어리를 한 단어로 축약할 수 있는 기능을 제공한다. -> component문법

컴포넌트 만드는법

1. function 만들고
2. return()안에 html담기
3. <함수명>

   쓰기

• 영어 대문자로 시작해야함 (Calmelcase)
• App과 똑같이 하나의 div로 시작해서 끝내야함

Fragment 문법

하나로 묶을때 의미없는 div의 경우 <></>로 표현가능

어떨때 컴포넌트로 만들면 좋은가?

1. 반복적으로 출현하는 요소
2. 큰 페이지들 (페이지 전환 같은거 쓸때 좋다.)
3. 자주변경되는 것들 (자주 변경될것같은 ui들; 성능에도 도움이 될 수 있다.)

컴포넌트의 단점

1. 다른함수의 State를 쓸때 문제가 생김

컴포넌트 만드는 방법 2가지

function Modal() { return( ) }

OR

let Modal = () => { return( ) } 해도 가능하다

• 특히 아래 방식은 const로 정의 하는 경우가 있는데 이점이있다.
  • 뭔가 실수 했을때 에러메세지가 출력된다.
  • funtion이 깔끔하긴하다

funtion App() 도 결국 하나의 컴포넌트이다.

• index.js가면 이 있다.