Component

---

코딩애플 리엑트 강의 듣고 혼자서 기록하는 것 입니다.

강의 내용 출처는

https://codingapple.com/course/react-basic/

모든 저작권은 코딩애플에게 있습니다.

---

JSX 주의사항

---

return(
  <div></div>
  <div></div>
)

이렇게 return() 안에 두개의 html태그 나란히 작성은 안된다.

return() 내부는 하나의 태그로 시작해 하나의 태그로 끝나야한다.

return(
  <div>
    <div></div>
    <div></div>
  </div>
)

그래서 굳이 태그 두개를 나란히 적고싶으면 저렇게 큰 div로 감싸주면 된다.
의미없는 div쓰기 싫으면 <> </>이걸로도 가능하다.
(fragment 문법)

Component

: 긴 HTML코드를 한 단어로 치환하는 문법

---

사용법은

function componentName(){
  return (
    // HTML 내용들
    )

1. function을 이용해서 함수를 하나 만들어주고 작명

2. 그 함수의 return () 안에 축약을 원하는 HTML을 담는다.

3. 그럼 원하는 곳에서 <함수명> </함수명> 사용하면 아까 축약한 HTML이 등장한다.

깔끔하고 이름이 직관적으로 되어있기 때문에
나중에 or 남이 봤을때 레이아웃을 바로 파악 가능하다

Component 생성 시 주의점

---

1. component 작명할 땐 영어대문자로 보통 작명

2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없다.
   (위에서 설명한 주의사항과 관련)

3. function App(){ } 내부에서 만들면 안된다.
   (function App 밑에 (외부에) 만들어둠)

왜냐면 function App(){ } 이것도 컴포넌트 생성문법이기 때문에
component 안에 component 를 만들 수 없다.

4. component 사용시 컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 된다.

arrow function도 가능하다.

---

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

let Modal = () => {
  return ( <div></div>) 
}

이렇게도 생성 가능하다.

어떤 요소들을 component로 사용해야 할까

---

기준은 없지만 보통

• 사이트에 반복해서 출현하는 HTML 요소들

• 내용이 매우 자주 변경될 것 같은 HTML

• 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로 만드는게 좋다.

• 또는 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배하기도 한다.

component 단점

---

HTML 깔끔하게 쓰려고 Component를 너무 많이 만들면 그것 만으로도 관리가 힘들다.

예를 들어서 function Modal 안에서 글제목 state를 쓰고싶어서 { 글제목 } 이렇게 쓰면 잘 안되는데 왜냐면 당연히 자바스크립트에서는

한 function 안에 있는 변수를 다른 function에서 맘대로 쓸 수 없어서 그러는데
(전역변수와 지역변수)

이때 props라는 문법을 이용해 state를 component까지 전해줘야 비로소 사용가능하다.