[React] Component

• 웹 페이지가 길어지면 위와 같이 div의 수가 너무 많아진다.
• React에서는 여러 div를 하나로 합쳐주는 Component가 존재

 

A. Component 만드는 법

 

1. function 만들기

• 주의 !
  
  • 다른 function 바깥에 만들어 주어야 한다.
  • 작명시 영어 대문자
• return () 작성
• function APP() 외부에 작성 밑 영어 대문자로 시작

2. return 안에 html 담기

3. <함수명></함수명> 쓰기

• App 함수 내부에 내가 사용할 공간에 작성
• <함수명/>으로 작성해도 상관 xx

 

병렬 div를 사용하고 싶다면

1. div 2개를 큰 div로 묶는다

2. react에서는 div를 삭제하고 fragment 문법을 사용 가능

• 의미없는 div를 사용하는 경우 

---

B. 언제 쓰면 좋을까?

 

만들었을 때 좋은 상황

1. 반복적인 HTML 축약할 때

2. 큰 페이지들

3. 자주 변경되는 것들

 

단점

• state를 가져다 쓸 때 문제생김
• 즉, 다른 함수에 있는 변수를 가져다 쓸 수 없다.

 

 

C. 표현식으로 만들기

 

• JS의 경우 표현식으로 함수를 생성 가능

let Modal = () => {}

 

• let 대신 const 사용 가능
  • const로 만드는 경우 실수로 수정하는 경우 방지 -> 에러 메시지 띄워준다.