리액트 컴포넌트 정리

버건디·2022년 8월 11일

목록 보기

6/58

리액트를 공부하며 컴포넌트라는 말이 항상 나왔었는데 컴포넌트라는 것이 정확하게 어떤 것을 의미하는 것이며, 이 컴포넌트는 어떨 때 왜 써야하는지 궁금했다. 정리가 필요하다고 느꼈다!

❓ 컴포넌트란 ❓

컴포넌트의 원래 뜻은 독립적인 단위 모듈이라는 뜻인데, 재사용성과 유지보수의 효율성을 높일 수 있다.
리액트로 만들진 앱을 이루는 최소한의 단위다.
컴포넌트는 개념적으로 props를 받아서 UI가 어떻게 보여야 하는지 정의하는 리액트의 요소들을 반환하는 함수다.
메인으로 작성하고 있었던 App.js 도 컴포넌트중에 하나인 것이다.

❗️ 실질적인 용도를 생각해보자면 ❗️
1. 사이트에서 반복적으로 나타나는 페이지들
2. 내용이 매우 자주 변경될 것 같은 HTML
3. 한 사이트의 다른 페이지
4. 팀으로 협업할때, 컴포넌트 단위로 나누어서 작업하기도 함

이정도로 정리해볼 수 있다.

예를 들어서 게시글을 클릭하면 나타나는 모달창을 하나 구현해본다고 가정해보자.

/* eslint-disable*/
import "./App.css";

function App() {

  return (
    <div className="App">

      <div className="modal">
        <h4> 제목 </h4>
        <p> 날짜 </p>
        <p> 상세내용 </p>
      </div>
      
    </div>
  );
}

export default App;

예시를 드느라 지금의 코드는 짧지만, 만약에 사이트의 규모가 커져서 저런 div 덩어리가 여러개 있다고 가정했을 때

한곳에 모든 div들을 넣어주는것은 효율적이지 못하다

이럴때 저 모달창을 컴포넌트화 해서 간단하게 만들어 줄 수있다.

❗️ 컴포넌트 만드는 3단계 방법 ❗️

fucntion 화 해서 만들어주기
return ( ) 안에 컴포넌트 안에 들어갈 HTML 내용들 담기
메인 페이지에서 <컴포넌트명></컴포넌트명> 써주기

❗️ 컴포넌트 만들때 주의점 ❗️

컴포넌트를 만들어 줄때는 기존에 있던 함수 바깥에다가 따로 만들어주어야 한다. ex) function App
컴포넌트명을 작성할때는 꼭 앞 글자를 대문자로 표기해주어야 한다.
❓ Why ❓
리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다.

<div></div> // html태그로 처리
<Div></Div> // 컴포넌트로 처리

- 예시

// 컴포넌트 만드는 섹션

function Modal () { // 1. function 화
  return (         //  2. return ( ) 안에 HTML 내용 작성
    <div className="modal">
        <h4> 제목 </h4>
        <p> 날짜 </p>
        <p> 상세내용 </p>
      </div>
  )
  
  // 메인 function App () { } 부분
  
function App() {
 
  return (
    <div className="App">

     {<Modal></Modal>} // 컴포넌트로 만들어준 모달창
    // </Modal> 이렇게 하나만 작성해주어도 상관없음

    </div>
  );
}

❗️ 참고사항 ❗️

원래 function 안에 들어가는 내용은 하나의 div 태그 안에 감싸져야한다.
여러개의 div창이 필요하다면 모든걸 감싸주는 div 창을 하나 만들고 그 안에 여러개의 div를 작성해주거나 fragments 문법인 <> 를 사용해주어야한다.


// 1. 큰 <div></div> 태그로 내용 감싸주기

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

// 2. fragments 문법 사용 

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

❓ 그럼 컴포넌트를 많이 만들어주면 좋은거 아닌가 ❓

그럼 컴포넌트를 최대한 많이 만들어서 따로 다 관리해주는게 좋은거 아닌가? 라는 생각이 들지만, 그렇게 하면 부작용이 발생한다.


//메인 페이지


function App() {
  let [글제목, 글제목변경] = useState(["글제목1", "글제목2", "글제목3"]);
  let [좋아요갯수, 좋아요갯수변경] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
      <div className="list">
        <h4>
          <span
            onClick={() => {
              let copy = [...글제목];
              copy[0] = "글제목1 변경";
              글제목변경(copy);
            }}
          >
            {글제목[0]}
          </span>{" "}
          <span
            onClick={() => {
              좋아요갯수변경(좋아요갯수 + 1);
            }}
          >
            {" "}
            👍{" "}
          </span>
          {좋아요갯수}
        </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      b
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
	{<Modal></Modal>}
    </div>
  );
}


// 컴포넌트


function Modal() {
  return (
    <>
      <div className="modal">
        <h4> 글제목[0] </h4> // 다른 함수에 있는 변수이기 때문에 에러가 남
        <p> 날짜 </p>
        <p> 상세내용 </p>
      </div>
      <div className="modal">
        <h4> 제목 </h4>
        <p> 날짜 </p>
        <p> 상세내용 </p>
      </div>
    </>
  );
}