[react] 컴포넌트

young-gue Park·2023년 2월 15일

JavaScript React 컴포넌트

React

목록 보기

2/17

⚡ 컴포넌트

📌 컴포넌트란?

🔷 HTML이나 스타일 정보와 로직을 담을 수 있으며 상태와 이벤트를 가질 수 있다.

🔷 트리 구조로 이루어져 있으며 데이터가 상위에서 하위로 향하는 단방향이다.

데이터를 JSX로 받는다면 확장성있게 사용할 수 있다.
UI를 추상적으로 바라보며 공통점을 찾아 재사용하는 것이 가장 바람직하다.

🔷 리액트의 컴포넌트 = 함수

Props라는 매개변수를 받아 JSX로 반환한다.
만들 수 있는 최선으로 컴포넌트를 만들고 자주 리팩터링하자.

💡 리팩터링(refactoring)
소프트웨어 공학에서 '결과의 변경 없이 코드의 구조를 재조정함'을 뜻한다. 주로 가독성을 높이고 유지보수를 편하게 한다. 버그를 없애거나 새로운 기능을 추가하는 행위는 아니다.

📌 컴포넌트 사용 실습

⭐ 기본 양식에서 Logo를 컴포넌트로 분리하기

기존의 Logo를 따로 컴포넌트로 분리한다.
component 폴더 안에 Logo 폴더와 그 안에 index.js 파일을 새로 만들고 logo.svg를 넣는다.

🖥 App.js

import './App.css';
import Logo from './components/Logo';

function App() {

  return (
    <div className="App">
      <header className="App-header">
        <Logo size={300}/> // 컴포넌트에 따로 값을 지정
        <Logo /> // 디폴트 값으로 생성한 컴포넌트
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
              <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
            </a>
      </header>
    </div>
  );
}

export default App;

🖥 components/Logo/index.js

props에 들어오는 값의 디폴트를 컴포넌트 외부에 지정하는 방식이다.

import logo from './logo.svg';
import propTypes from 'prop-types';

// props로 들어오는 값을 이용하여 컴포넌트에 유동적인 변화를 줄 수 있다.
function Logo(props) {
   return (
   <img src={logo} 
   className="App-logo"
    alt="logo" 
    style={{width: props.size, height: props.size}}
   />
   )
}

// props에 들어오는 값의 디폴트 값을 지정할 수 있다.
Logo.defaultProps = {
    size: 200
}

// props에 들어오는 값의 타입을 제한할 수 있다.
Logo.propTypes = {
    size: propTypes.number
}

export default Logo;

🖥 components/Logo/index.js

props에 들어오는 값의 디폴트를 컴포넌트 매개변수에 비구조화 할당을 이용하여 넣은 방식이다.

// defaultProps없이 간단하게 디폴트 값을 넣기 위해 비구조화 할당을 이용할 수 있다.
function Logo({size = 10}) {
   return (
   <img src={logo} 
   className="App-logo"
    alt="logo" 
    style={{width: size, height: size}}
   />
   )
}

Logo.propTypes = {
    size: propTypes.number
}

export default Logo;

🖨 출력 결과

위: 사이즈가 300으로 값을 지정한 로고
아래: 사이즈가 디폴트 값인 200으로 지정된 로고

⭐ 기본 양식에서 <p> 태그를 컴포넌트로 분리하기

기존의 <p>를 따로 컴포넌트로 분리한다.
component 폴더 안에 paragraph 폴더와 그 안에 index.js 파일을 새로 만든다.

🖥 App.js

import './App.css';
import Logo from './components/Logo';
import Paragraph from './components/paragraph';

function App() {

  return (
    <div className="App">
      <header className="App-header">
        <Logo size="100px"/>
        <Logo />
        // 디폴트 값으로 생성한 컴포넌트
        <Paragraph>
          Edit <code>src/App.js</code> and save to reload.
        </Paragraph>
        // 따로 값을 지정하여 생성한 컴포넌트
        <Paragraph size={14} color="blue">
          Edit <code>src/App.js</code> and save to reload.
        </Paragraph>
              <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
            </a>
      </header>
    </div>
  );
}

export default App;

🖥 components/paragraph/index.js

디폴트 값을 매개변수에 넣었다.
검증과 사이즈 자료형 제한, 색깔 적용 제한을 두었다.

import PropTypes from 'prop-types';

// 디폴트 사이즈는 10, 색은 하얀색
function Paragraph({children, size = 10, color = "white"}) {
    return (
        <p style={{fontSize: size, color}}>{children}</p>
    )
}

// paragraph 검증을 통해 안에 값이 없으면 돌아가지 않는다. (isRequired)
// 글씨에만 색깔이 적용되게 한다. (string)
Paragraph.propTypes = {
    children: PropTypes.node.isRequired,
    size: PropTypes.number,
    color: PropTypes.string
}

export default Paragraph;