[React] - 컴포넌트 (함수형 / 클래스형)

컴포넌트?

컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다.

• 선언체란 컴포넌트를 생성하고 보이고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이것을 React가 화면에서 그려주는데, 이를 통해 React 컴포넌트가 선언체라는 것을 알 수 있다.

props라고props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

컴포넌트 파일은 `App.jsx` 처럼 `.js `확장자가 아닌 `.jsx` 확장자를 쓰는 것이 직관적으로 좋다.

 

하지만 별다른 차이점은 없다. (협업 시 편함)

1. 리액트 컴포넌트를 표현하는 두 가지 방법

함수형 컴포넌트 (권장)

// props라는 입력을 받음 
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) 
function Welcome(props) { 
    return(
    <h1>Hello, {props.name}</h1> 
    ); 
} 

// 훨씬 쉬운 표현을 해보면 아래와 같다. 
function App() { return <div>hello</div> }

클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

리액트에서 컴포넌트는 쉽게 말해 '함수' 이다. '컴포넌트를 만들어 보세요' 라는건 html에서 return 하는 함수를 만들면 된다.

주의

• 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 한다.
• 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 지어야 한다.

2. 컴포넌트 예제

import React from 'react';
import PropTypes from 'prop-types';

const Btn = ({ text, event }) => {
  return (
    <div>
      <button onClick={event}>{text}</button>
    </div>
  );
};

const Child = () => {
  return (
    <div>
      <h1>가족</h1>
    </div>
  );
};

const Mother = () => <Child />;
const Grandfather = () => <Mother />;

Btn.propTypes = {
  text: PropTypes.string.isRequired,
};

function App() {
  // <---- 자바스크립트 영역 ---->
  const clickEvents = () => {
    alert('클릭!');
  };
  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <p>이것은 내가 만든 App컴포넌트 입니다.</p>
      <Btn event={clickEvents} text={'클릭'} />

      <Grandfather />
    </div>
  );
}

export default App;

---

React관련 파일 Github로 보기

GitHub - Seogun95/React_Note: 👨🏼‍💻 리액트 자료 정리 with 옵시디언