| React | 복잡한 html을 component로~!!

component 란?

이렇게 복잡한 html을 한 단어로 치환할 수 있는게 컴포넌트이다.

👋 어떤걸 보통 컴포넌트로 만들까요 ?

1. 반복적인 html 축약할때
2. 자주변경되는 ui 들
3. 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용
4. 또는 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배하기도 한다.

컴포넌트는 그냥 함수 문법이랑 똑같아서 용도도 똑같다고 보면 된다.

하지만 아무거나 컴포넌트를 만들면 안된다.

컴포넌트를 만드는 것은 항상 책임이 따른다

 

< component 만드는법 >

1. function 만들기

• function 만들때 다른 function 바깥에 만들기
• 영어 대문자로 보통 작명
• arrow function 써도 된다.

function Modal(){
  return ( <div></div> )
}

// let const 맘대로 
let Modal = () => {
  return ( <div></div>) 
}

2.  return 안에 html 담기

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

 

 

< component 단점 >

state 가져다 쓸 경우 문제가 생긴다. ?

당연히 자바스크립트에선

A함수에 있던 변수는 B함수에서 맘대로 가져다 쓸 수 없다.

(하지만.나중에 배울 props라는 문법을 이용해 state를 <Modal>까지 전해줘야 비로소 사용가능)

 

[참고]

코딩애플