[React] Component 사용법

Component란 무엇인가?

• html을 한 단어로 줄여서 쓸 수 있는 문법이다

function App() {
return(
   <Modal />
);
}

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

Component 사용법

• 대문자로 시작하는 이름을 가진 함수를 만든다
• 축약을 원하는 html 태그 전체를 넣는다
• 원하는 곳에서 <함수명 />
  
  

Component로 만드는 기준

component부분만 재랜더링 일어나게 할 수 있으니 효율적임

• 반복으로 사용되는 html 덩어리(ex.리스트)
• 자주 변경되는 html UI
• 하나의 페이지를 만들 때
  
  

Component 사용 시의 단점

• state 사용할 때 복잡해진다. (props를 사용해야한다)
  
  

React 참고사항

• return(괄호) 안에 작성할 것
• 동일선상의 태그를 여러 개 작성할 때는 하나의 또 다른 태그로 묶어줄 것

react 코드를 작성할 때는 return(<어쩌구>)라는 형식으로 return의 () 안에 html 태그를 작성한다. 이때 주의사항이 있는데 태그를 평행하게 연속으로 쓸 수 없다는 점이다. 예를 들어, div를 3개 쓰고 싶다면 html에서는 아래와 같이 쓸 것이다.

// 이것은 html

<div></div>
<div></div>
<div></div>

하지만 이는 react에서는 허용되지 않는다. 따라서 하나의 태그로 또 다시 묶어줘야 한다. 이때 아무런 의미가 없는 <></>로 묶어주어도 된다.

// 이것은 react

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

출처: https://www.youtube.com/watch?v=bq2SjODrhJQ&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=7