[React]Component

리액트에서 html코드를 짤 때 유의점이 있는데

return()안에 두개의 html태그 나란히 적기 이런거 안됩니다.

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

 

위와같은 것은 안된다는 것이죠.

 

 

그래서 굳이 <div> 두개를 나란히 적고 싶으면 저렇게 하나의 div로 또 감싸거나 해야합니다.

 

 

 

 

의미없는 div 쓰기 싫으면 <> </> 이걸로 감싸도 됩니다. fragment 문법이라고 합니다. 

 

 

 

 

 

 

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

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

Component라고 합니다.

이걸 이용하면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있습니다.

 

 

위와 같이 함수 App의 return에 100줄의 html코드가 있다고 해봅시다. 

App.js는 가장 main이 되는 파일인데 모든 html태그와 클릭이벤트 등을 App.js의 return에 다 때려박으면 프로젝트가 커지면 유지보수측면에서 엄청 힘들것입니다.

 

 

 

위와 같이 하시면 원하는 html을 한 단어로 줄일 수 있습니다.

 

 

줄이는 법은

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

2. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담으면 됩니다.

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

 

이렇게 축약한 HTML 덩어리를 Component 라고 부릅니다. 

앞으로 HTML 깔끔하게 축약해서 쓰고싶으면 Component 이런 식으로 많이 만들어 쓰십시오.

<div> 뭉텅이보다 깔끔하게 <Modal> 이렇게 되어있으니

남이 봤을 때 & 미래의 내가 봤을 때 레이아웃을 바로 파악이 가능하니 나중에 관리하기도 좋겠죠?

 

셀프클로징을 해줘도 똑같은역할을 합니다.

 

 

 

 

 

 

Component 만들 때 주의점

 

1. component 작명할 땐 영어대문자로 보통 작명합니다.
2. return ()안엔 html태그들이 평행하게 여러개 들어갈 수 없습니다.
3. function App{}내부에서 만들면 안됩니다. 왜냐면 function App(){}도 다시보니 컴포넌트 생성문법이죠? component안에 component를 만들진 않습니다.
4. <컴포넌트></컴포넌트>이렇게 써도 되고 <컴포넌트/> 이렇게 써도 됩니다.
5. arrow function 써도 됩니다.

 

 

 

 

 

어떤 HTML들을 Component로 만드는게 좋을까

기준은 없습니다만 관습적으로 어떤 부분을 주로 Component화 하냐면

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

 

 

여러분들 함수문법 언제씁니까

1. 긴 코드 축약할 때 2. 다른 곳에서 코드 재사용할 때 3. 복잡한 코드를 작은 기능으로 나눌 때 쓰지 않습니까 

컴포넌트는 그냥 함수 문법이랑 똑같아서 용도도 똑같습니다. 

 

 

 

 

 

 

 

Component의 단점

일단 HTML 깔끔하게 쓰려고 Component를 수백개 만들면 그것 만으로도 관리가 힘듭니다.

예를 들어서 function Modal 안에서 글제목 state를 쓰고싶어서 {글제목} 이렇게 쓰면 잘 안되는데 

 

왜냐면 당연히 자바스크립트에선 한 function 안에 있는 변수를 다른 function에서 맘대로 쓸 수 없어서 그렇습니다. 

props라는 문법을 이용해 state를 <Modal>까지 전해줘야 비로소 사용가능합니다.

 

그러니까 리액트 갓 배운 초보처럼 막 온갖 잡다한걸 Component로 쪼개지 말고 꼭 필요한 곳만 Component로 쪼개시길 바랍니다.

 

 

 

 

 

 

 

<출처 : 코딩애플 : React 리액트 기초부터 쇼핑몰 프로젝트까지!>