[React] Component

A. 컴포넌트가 뭐죠?

html덩어리들을 한 단어로 축약할 수 있는 리액트가 제공하는 문법

---

B. 컴포넌트 만드는 법

import './App.css';
import { useState } from 'react';

function App() {
  return (
    <div className="App"> 
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <Modal>

      </Modal>      
    </div>
  );
}

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

export default App;

B-1. function 만들고

• function은 다른 function 밖에서 만들기
• 네이밍은 영어 대문자로 시작

B-2. return 안에 html 담고

• return 안에 html 쓸때는 항상 하나의 큰 태그 안에서 다 해결하기
• 병렬 구성 x

B-3. <함수명></함수명> 쓰기

• 컴포넌트를 맘에드는 곳에서 html태그 형식으로 가져다 쓰기

 

---

C. 컴포넌트는 언제 사용하는가?

C-1. 반복적인 HTML 축약할 때

C-2. 큰페이지들

C-3. 자주변경되는 것들

 

---

D. 컴포넌트의 단점

D-1. state 가져다 쓸 때 문제 생김

• A 함수에 있던 변수는 B 함수에서 맘대로 가져다 쓸 수 없음

D-2. 그러니 모든 걸 컴포넌트로 만들지 말고 필요한 것만 만들기

 

---

E. 컴포넌트 만드는 문법들

// 1
let Modal = () => {
  return(
    <div></div>
  )
}
// const로 만들면 수정하면 안되는 걸
// 실수로 수정을 했을 때 에러메시지를 출력해주는 이점이 있음
const Modal = () => {
  return(
    <div></div>
  )
}

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