React, Component 많은 div를 한 단어로 줄이기

fragment 문법

Html 코드짤 때 유의점이 있음. return ( ) 안에 두개의 html 태그 나란히 적기가 안됨

return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야함

그래서 <div>를 나란히 적고 싶다면 필요없는 <div>로 감싸야함

이렇게 의미없는(필요없는) <div>가 싫다면 <> 이걸로 감싸도 됨

 

복잡한 Html을 한 단어로 치환할 수 있는 Component 문법

리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공함

이것을 바로 Component라고 함

Component를 이용하면 함수 또는 변수 만들 듯 HTML을 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있음

function App (){
  return (
    <div>
      <함수명></함수명>
    </div>
  )
}

function 함수명(){
  return ( <div></div> )
}

//또는

let 함수명 = () => {
  return ( <div></div>) 
}

 

Component 문법을 사용하려면

1. function을 이용해서 함수를 하나 만들어주고 작명
2. 함수 안에 return () 안에 축약을 원하는 HTML을 담으면 됨
3. 원하는 곳에서 <함수명></함수명> 사용
4. 원하는 곳에 축약한 HTML 등장

축약한 HTML 덩어리를 Component 라고 부름

Html을 깔끔하게 축약해서 쓰고 싶으면 Component를 사용하면 되는 것

레이아웃을 바로 파악이 가능하니 관리에도 편함

 

Component 만들때 주의점

• component 작명할 땐 영어대문자로 보통 작명
• return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없음
• function App(){} 내부에서 만들면 안됨
  • function App(){}도 컴포넌트 생성문법이기 때문에 component안에 component를 만들지 않는 것
• <컴포넌트></컴포넌트>라고 쓰거나 <컴포넌트/>로 사용

 

어떤 Html 덩어리들을 Component로 바꿀지

기준은 없지만 관습적으로 

• 사이트에 반복해서 출현하는 HTML 덩어리들
• 내용이 자주 변경될 것 같은 HTML 부분
• 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로
• 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배

컴포넌트는 함수 문법이랑 똑같아서 용도도 똑같음

 

Component의 단점

Component를 많이 만들면 관리가 힘듬

이유는 unction Modal 안에서 글제목 state를 쓰고싶어서 {글제목} 이렇게 쓰면 잘 안되는데 한 function 안에 있는 변수를 다른 function에서 맘대로 쓸 수 없기 때문

props라는 문법을 이용해 state를 까지 전해줘야 비로소 사용 가능해짐

그러니 온갖 모든것을 쪼개 Component로 만들지 말고 꼭 필요한 곳만 Component로 만듬