[React] #2. 🍎React 리액트 기초부터 쇼핑몰 프로젝트까지 Part.1

* 코딩애플 React 강의를 듣고 정리한 글입니다.

- Component

1) fragment 문법

return () 안에는 루트 태그가 1개만 존재해야 한다.
가장 상위에 감싸고 있는 (의미 없는) <div> 태그를 <> 로 바꿀 수 있다.

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

 

2) component

function을 사용하여 컴포넌트를 만들 수 있다.

⭐규칙⭐
1. 컴포넌트의 이름은 대문자로 시작
2. <컴포넌트명></컴포넌트명> 또는 <컴포넌트명/> 으로 컴포넌트 사용
3. function App(){} 외부에서 생성.
(App도 하나의 컴포넌트. 컴포넌트 안에 컴포넌트를 만들지 않는다.)

function App (){
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}
// arrow 펑션 가능
let Modal = () => {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}​

 

다른 함수에서 선언한 state를 사용하려면 props 속성을 이용해야 한다.

따라서 자주 반복되거나 큰 페이지 단위, 내용 변경이 잦은 경우에만 컴포넌트를 사용하자.