리액트(React)-html 덩어리로 만들기: 컴포넌트(component)

return 안에는

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

이렇게 평행한? 연속하는? 같은 위치의 div 태그를 만들 수 없다.

여러개를 만들어주고싶다면

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

이렇게
하나의 큰 div에 감싸주는거 같은 방식을 사용해야 한다.

HTML요소 많은걸 묶어서 한 단어로 쓸 수있는 리액트 문법:

컴포넌트(Component)

사용법

1. function으로 원하는 함수 하나 만든다.

2. 함수 안에 return() 안에 원하는 HTML 넣는다.

3. 원하는 위치에 아까 만든 축약HTML 덩어리를 입력한다.

4. HTML덩어리를 컴포넌트(component)라 한다.

 return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <Modal></Modal>		// 원하는 위치에 Modal 이라는 컴포넌트 삽입
       				// <Modal /> 으로도 작성 가능
	  </div>
      
function Modal() {
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

주의점:

• 이름은 대문자로 쓰기
• return() 안에 있는건 태그 하나로 묶어줘야 함
  : 내부 묶기위해 의미없는 <div></div> 쓰기 싫으면 <></> 써도됨

상단의 function App() 도 하나의 컴포넌트임

관리가 편하다는 장점. 꼭 필요한거만 만들기.

만드는 기준 - 뭘 컴포넌트로 만드는게 좋을까?

1. 반복적으로 출현하는 HTML덩어리들(예: 목록들)

2. 자주 바뀌는 UI들 : 재렌더링이 많이 일어나니까 해당하는 UI만 재렌더링하기 때문에 효율적

3. 하나의 페이지를 구성할때도 컴포넌트로 만드는게 좋음

단점:
state쓸때 복잡해진다 - 기존에 만들었던 변수(예:글제목)는 function App() 안에 선언했던 것.
그렇기에 컴포넌트 함수 내부에서 사용이 불가능

-> props 라는 문법 사용해서 해결해야한다. 아직 안배웠다.