[React] 컴포넌트(Component) 에 대해

 

컴포넌트는 템플릿 이상의 기능을 수행합니다. 데이터를 UI로 만드는 가장 최소한의 단위 모듈을 의미합니다.

독립적이며, 재사용 가능하게 만든 부품 조각들을 의미하며 리액트로 만들어진 홈페이지는 즉 컴포넌트의 조합입니다.

 

근본적으로 컴포넌트는 데이터를 입력받아 DOM Node를 출력하는 함수를 뜻합니다. Props를 받아 Node를 랜더 하는 함수에 가까운 개념입니다.

 

props

React에서 props는 변하지 않는 데이터입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용합니다.

 

컴포넌트에 props로 전달하는 방식은 아래와 같이 사용합니다.

 

<컴포넌트 이름 props이름 = "값" />

 

// <ComponentName propsName="value" />

<Modal name="1234" color="red" />

const Modal = (props) => {
  return (
	<div style={ color: props.red }> { props.name } </div>
  );	
}

 

컴포넌트에 전달되는 props는 객체 형태로 전달되며 매개변수를 통해 조회할 수 있습니다.

props 객체의 값 만으로는 값을 정확히 모릅니다. 이에 비구조화 할당 문법을 사용하면 더 간결한 코드가 작성됩니다.

 

props.color, props.name 대신에 color, name과 같은 코드를 작성할 수 있으므로 더욱 간결해집니다.

 

const Modal = ({ color, name }) => {
  return (
	<div style={ color }> 
	  { name } 
	</div>
  );	
}

 

props 자체를 할당시켜 다른 컴포넌트에 할당할 수 있습니다.

const Modal = ({ ...props }) => {
  return (
	<div {...props}> 
	  { name } 
	</div>
  );	
}

반응형

props의 기본 값을 설정할 때는 defaultProps를 이용합니다.

Modal.defaultProps = {
  color: "black",
  name: "이름"
};

 

컴포넌트를 호출할 때 사용하는 태그 사이의 내용을 보여줄 때는 children을 사용합니다.

<Modal>
  <div></div>
</Modal>

const Modal = ({ children }) => {
  return (
	<div>{ children }</div>
  );	
}

 

function component 사용 방법

• function으로 정의하고 return 문에 JSX로 렌더링 합니다.
• 단 하나의 상위 태그를 담은 HTML를 담고 원하는 곳에 <함수명 />으로 사용합니다.

 

Component 유의사항

• 이름의 처음은 대문자로 시작해야 합니다.
• 컴포넌트는 재사용성이 있는 코드를 만들어야 합니다.
• return 바로 안에는 태그 하나로 묶어야 합니다.
• return 내부를 묶을 때 의미 없는 div 대신 <> </>를 사용할 수 있습니다.

 

Component 유의사항을 지켜 작성한 코드

import { useEffect, useState } from "react";

const Header = ({title}) => {
  return (
    <header>
      <h3> { title } </h3>
    </header>
  );
}

const Content = () => {
  return (
    <div>
      <h2>메인 페이지</h2>
      <List />
    </div>
  );
}

const List = () => {
  return (
    <div>
      <div>
        좋아요<span>0</span>
      </div>
      <div>
        싫어요 <span>0</span>
	  </div>
    </div>
  );
}

function App() {
  const [title, setTitle] = useState('Document');
	
  return (
    <div>
      <Header title={ title } />
      <Content />
    </div>
  );
}

export default App;