[React] component에 대하여

ouneno·2023년 2월 16일
0

React

목록 보기
4/7
post-thumbnail

Component

1. 언제 사용하는지?

  1. 반복적인 HTML 사용시 긴 코드들을 한 줄로 축약할 수 있다.
  2. 큰 페이지 한 덩어리
  3. 자주변경되는 부분들 (예. HTML UI)

2. 컴포넌트 문법 - function 사용

  1. function 함수명() {} 생성
  2. return() 안에 HTML 담기
  3. 사용할 위치에 컴포넌트 명명 <함수명></함수명>
function Modal() { // 대문자로 시작하는 function 생성
    return (
      <div className='modal'>
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    ); 
}

3. 컴포넌트 문법 - let 사용

  1. let 함수명 = () => {} 생성
  2. return() 안에 HTML 담기
  3. 사용할 위치에 컴포넌트 명명 <함수명></함수명>
let Modal = () => {
  return (
    <div></div>
  );
}

4. Fragment 문법

의미없는 div태그 대신 <>,</> 만 기재하여 사용이 가능하다.


5. <함수명></함수명> == <함수명/>

기존에 사용했던 <함수명></함수명> 대신 <함수명/> 만으로 컴포넌트 호출이 가능하다.

profile
지속적인 성장을 추구하는 새싹 개발자입니다🌱

0개의 댓글