React : 복잡한 html을 한 단어로 치환하는 Component 문법

어떨 때 Component를 쓸까?

• 반복적인 html 축약할 때
• 큰 페이지들
• 자주 변경되는 것들

---

Component 만들기

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

주의점

• function을 function App() {} 바깥에 만든다
  
• function명은 첫글자를 대문자로 작성한다.
• function안에는 div를 병렬기입하면 안된다

중요 주의점

• state 가져다 쓸 때 문제가 생긴다.
  -> A 함수에 있던 변수는 B 함수에서 맘대로 가져다 쓸 수 없다.

---

function 하나 안에 div 병렬기입하기

return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야 한다. 그래서 굳이 <div> 두개를 나란히 적고 싶으면 하나의 div로 또 감싸거나 해야 한다.

return (
<>
<div className="App">
  <Modal></Modal>
</div>
<div className='btn-wrap'>
  <button className='btn-center' onClick={ handleSortTitle }>가나다순 정렬</button>
</div>
</>
);

+ 의미없는 div 쓰기 싫으면 <> </> 이걸로 감싸도 된다. (fragment 문법)

---

출처 : 코딩애플 https://codingapple.com/