[React] 3. 컴포넌트 (Component)

이전 글 ▼

0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object)

2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용)

1. Component 문법

html을 작성하다보면 반복적으로 사용하거나 블록 단위로 제작하고 싶은 부분이 있다.

 

React에서는 긴 HTML 블록을 하나의 단어로 치환하도록 하는 문법을 제공한다.

이것이 바로 Component이다.

 

이를 이용하여 HTML 덩어리를 깔끔하게 치환하고 원하는 곳에 넣어줄 수 있다.

 

장점

1. 다른 누군가가 코드를 참조할 때 어떤 기능을 하는 부분인지 한 눈에 알아볼 수 있다. (물론 자신이 다시 볼 때도 유용하다!)

2. 반복적인 html을 축약할 수 있다.

3. 큰 페이지 하나를 컴포넌트로 만들 수 있다. (상세 페이지 등)

4. 매우 자주 변경될 UI를 만들어 놓으면 성능상 이점을 취할 수도 있다.

5. 협업 시 컴포넌트 단위로 분배하면 편하다!

 

단점

state를 가져올 때 문제가 발생한다. (다른 함수에서 만든 local 변수를 마음대로 사용할 수 없기 때문!)

이때에는 props로 전달해주어야 한다.

 

컴포넌트는 꼭 필요한 경우에 만들어 주는 것이 좋다!

1) Component 제작

(1) 컴포넌트를 함수 형태로 정의

function 컴포넌트명(){
  return(
    ... //하나의 태그
  );
}

위와 같은 형태로 컴포넌트를 정의한다. (function, arrow function 무관!)

 

예시

function Modal(){
  return(
    <>  // fragment 문법
      ...
    </>
  );
}

 

 

(2) html 블록을 return값으로

하나의 태그로 감싸진 html 블록을 반환한다.

 

예시

function Modal(){
  return(
    <>
      <div className="modal-container">
          <div className="modal">

            <div className="modal-title-container modal-inner-container">
              <span>제목</span>
              <div className="modal-title">Title</div>
            </div>
            <div className="modal-singer-container modal-inner-container">
              <span>가수</span>
              <div className="modal-singer">Singer</div>
            </div>
            <div className="modal-detail-container modal-inner-container">
              <span>세부사항</span>
              <div className="modal-detail">Detail</div>
            </div>
          </div>
        </div>
    </>
  );
}

 

 

(3) 원하는 위치에 <컴포넌트명></컴포넌트명>

기존에 작성하던 App()의 return() 내부에서

원하는 위치에 <컴포넌트명></컴포넌트명>의 형태로 삽입한다.

 

예시

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

 

 

Component 제작 시 주의사항

- 작명은 대문자로 시작
- return() 안 하나의 태그로 감싸기
- App(){} 외부에서 정의  (App() 역시 컴포넌트임!)
- <컴포넌트></컴포넌트> & <컴포넌트/> 둘다 사용가능