✨ React 정리 - 3) Component, Fragment, Props ✨

✔️ Component

재사용이 가능한 각각의 독립된 모듈을 뜻한다.

1. Component 만들기

1. function 구현
2. return () 안에 html 삽입
3. <함수명></함수명> 사용

function App() { // 함수명의 첫글자가 대문자로 작명하는 것이 관습 , App도 마찬가지
  return (
     <div className="main">
    	<Modal></Modal> // Component // 3번 <함수명></함수명> 사용
     </div>
    );
}

function Modal() { // 1번 function 구현
  return ( // 2번 retunr () 안에 html 삽입
      <div className="modal1">
      </div>
    );
}

2. Component 장점

1. 반복적인 html 축약할 때
2. 큰 페이지
3. 데이터가 자주 변경될 때

3. Component 단점

1. state 사용할 때 문제 생김

4. Component 만들 때 주의점

1. component 작명할 때 영어 대문자로 작명하는 것이 관습
2. return () 안에 한개의 최상위 태그만 존재 가능
3. function App() {} 내부에서 만들면 오류
4. <Component></Component> or <Component/> 둘다 사용 가능

5. 변수로 선언 후 component 만들기

function App() {
  return (
     <div className="main">
    	<Modal></Modal> // Component
     </div>
    );
}

const Modal = () => {
  return (
      <div className="modal1">
      </div>
    );
}

장점:

1. 변수 선언 시 const로 선언하면 실수로 수정했을 때 에러 메시지로 오류 캐치 가능

다양한 컴포넌트에 쓰이는 state는 최상단 부모 컴포넌트에 만들어놔야 한다
state는 부모 ->자식에게만 전송 가능하기 때문에

if문을 사용하려면?

if문을 컴포넌트화 시켜서 컴포넌트를 삽입하여 사용

---

✔️ Fragments: return () 안에 html 병렬 기입

사용하는 이유

React는 JSX를 사용할 때 하나의 component만 리턴하기 때문에, return () 안에는 반드시 하나의 최상위 태그만 존재해야 한다.

태그를 병렬로 구현하기 위해 Fragments를 사용한다.
<></> 또는 <Fragment></Fragment>로 사용한다.

function App() {
  return (
     <> // Fragments
       <div className="modal1">
       </div>
       <div className="modal2">
       </div>
     </> // Fragments
    );
}

---

✔️ Props: 부모의 state를 자식에서 사용할 때 사용하는 파라미터 문법

Props로 부모에서 자식에게 state 전송하는 법

1. 자식 컴포넌트 사용하는 곳에 <자식컴포넌트 속성명={state이름} />
2. 자식 컴포넌트 만든 function에서 props라는 파라미터 등록
3. props.작명 사용
4. {props내에 사용한 변수명}을 사용하면 props.작명을 사용하지 않고 {중괄호} 내에 있는 변수를 바로 사용할 수 도있다.

let App = () => {
  const title = ["title1"]
  return (
    <Modal title={title} color="yellow" /> //1번 자식 컴포넌트 사용하고 속성 부여
  );
};

let Modal = (props) => { // 2번 props 파라미터 등록
  return (
    <>
      <div className="modal" style={{background: props.color}}>
        <h4>{props.title[0]}</h4> // 3. props.부모에서 선언한 속성명 사용해서 부모의 state 사용
        <p>12월 19일 발행</p>
      </div>
    </>
  );
};