React 6. 많은 div들을 한 단어로 줄이고 싶은 충동이 들 때

Steve·2021년 5월 17일

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

return() 안엔 태그 하나만 들어갈 수 있습니다.
fragments라는 문법으로 <> </>로 묶어줘도 됨

 function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
    </div>
  )
}

위처럼 지저분하게 널부러져있는 코드가 함수로 정리해놓으면 아래처럼 단 1줄로 축약된다.

function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

이를 통해 얻을 수 있는 이득

이렇게 축약한 HTML 덩어리를 Component 라고 칭함
앞으로 HTML 깔끔하게 축약해서 쓰고싶으면 Component 이런 식으로 많이 만들어 쓰는게 좋음
Component 문법을 사용하면 <div>지옥보다는 깔끔하게 <Modal> 이렇게 되어있으니

1. 뭐가 뭔지 바로 파악 가능
1. 유지 보수 편함

Component특징 정리

1. Component 작명시 영어대문자 시작
1. return () 안엔 태그들이 평행하게 여러개 들어갈 수 없음
  1) 평행하게 여러개의 태그를 쓰고 싶으면 <div>로 묶거나
  2) <> </> 이걸로 묶음
1. component 위치는 function App(){} 과 보통 나란히 만들어줌

왜냐면 function App(){} 이것도 다시보니 컴포넌트 생성문법이다.
보통 컴포넌트안에다가 컴포넌트를 만들진 않음

1. component 안에 미리 만들어둔 component 삽입 가능

function Modal(){
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
      <다른컴포넌트></다른컴포넌트>
    </div>
  )
}
function 다른컴포넌트(){
  return ( <div> 안녕 </div> )
}

어떤 HTML들을, 관습적으로 어떤 부분을 주로 Component화 하는게 좋나?

– 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋음
– 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋습니다.
– 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 컴포넌트로 만드시는게 좋습니다. (그냥 좋을 뿐 필수는 아님)
– 또는 다른 팀원과 협업할 때 웹페이지를 컴포넌트 단위로 나눠서 작업을 분배하기도 합니다.