React) component 만들기

oching·2022년 5월 17일

목록 보기

5/23

html구조가 복잡해짐 👉한 단어로 축약해서 태그처럼 쓰고싶어 component

1. function만들고

function Modal(){}

component함수명은 다른 함수들과 구별하기 좋게 대문자로 시작해야함.
다른 function 스코프를 벗어난 곳에서 생성해라(function app()도 나와서 생성하기)

2. return()안에 html구조짜고

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

return()안 바로 오는 div는 병렬적 구조 안됨. 하나의 div로만 모두 감싸져있어야한다는 뜻임.

구조상 꼭 병렬적으로 div 두개 이상 나란히 놓아야하는 경우라면,

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

<></> fragment로 감싸주기.
구조상 필요한, 감싸기만을 하는 div의 역할을 대행한답니다.

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

<Modal></Modal>

혹은

<Modal/>

로 쓰고 싶은 자리에 불러서 component사용하기

💡 근데 그럼 함수 표현식으로 만들어도 되겠네요?
const Modal = () => {
	 return(
       <div className='modal'>
       <h4>제목</h4>
       <p>날짜</p>
       <p>상세내용</p>
       </div>
  	)
}
팁을 주자면, 표현식으로 변수에 할당시킬때 변수선언을 const로 하면 만약 html구조가 바뀌려고 할 때 에러 메세지 띄워주니까 엄격히 검사가능.