[리액트] 컴포넌트란? 리액트 컴포넌트 간단 예제

리액트 컴포넌트

컴포넌트란 무엇인가

w3school에 따르면 컴포넌트는 독립적이고 재사용 가능한 코드 조각이다.
JavaScript의 함수(input, ouput)와 동일한 목적을 수행하지만 독립적으로 작동하고 HTML을 반환한다.
컴포넌트는 Props를 인풋으로, react엘리먼트를 아웃풋으로 반환한다.

컴포넌트 명칭은 반드시 대문자로 시작한다.

클래스형 컴포넌트 VS 함수형 컴포넌트

1. 클래스형 컴포넌트

   class Car extends React.Component {
   render() {
    return <h2>Hi, I am a Car! I was made by {this.props.company}</h2>;
   }
   }

   1. extends React.Component 구문과 rander 함수를 포함한다.
   2. 상태관리와 라이프사이클 기능을 사용할 수 있다.
   3. 임의 메서드를 정의할 수 있다
      

2. 함수형 컴포넌트

   function Car(props) {
   return <h2>Hi, I am a Car! I was made by {props.company} </h2>;
   }

   1. Fuction을 통해 생성한다.
   2. 상태관리와 라이프사이클 API를 사용할 수 없다.
      (리액트 v16.8 이후 Hooks으로 상태관리와 라이프사이클관리가 가능해짐)
      

클래스형과 함수형은 동일한 기능을 제공하지만 코드의 간결성 및 가독성이 함수형이 더 좋으며, React 공식 사이트에서도 함수형 컴포넌트와 Hooks을 조합해서 사용할 것을 장한다.

최초 생성된 프로젝트에서 컴포넌트 살펴보기

프로젝트가 성공적으로 생성되고 구동된 모습

프로젝트가 성공적으로 생성되고 시작되면 프로젝트 디렉토리에서 App.js 파일을 볼 수있다. 코드를 살펴보자.

// App.js파일
import logo from './logo.svg';
import './App.css';

function App() {
  /**
   * 리턴문과 Function 사이의 영역이 자바스크립트 코드 영역입니다.
   */
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="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"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

여기서 function App(){...} 전체가 하나의 컴포넌트이다. App컴포넌트는 자바스크립트 로직 작성부와 리턴부로 나뉜다.
리턴부분은 소괄호 '()'로 감싸져 있는데 리턴부분이 한줄일땐 소괄호를 생략 가능하다. 리턴부에 쓰여있는 코드를 살펴보자. HTML과 유사해보이는 해당 내용은 HTML이 아니라 JSX문서이다. 일반 자바스크립트 코드로만 리액트앨리먼트를 생성하면 복잡하고 보기도 어려운데 JSX를 이용하면 한결 보기 편하게 사용 가능하다. HTML과 거의 유사하지만 약간의 문법적 차이를 가진다.

부모-자식 컴포넌트

프로젝트 생성 시 함께 생성된 App.js의 function App(){...}는 App이라는 이름을 가진 컴포넌트이다.

컴포넌트 안에 또다른 컴포넌트를 넣을 수 있다. 이때 다른 컴포넌트를 품은 컴포넌트를 부모 컴포넌트, 그 안에 들어가있는 컴포넌트를 자식 컴포넌트라고 한다.

실습 1 - 간단한 버튼 컴포넌트와 클릭 이벤트

실습 1 - 간단한 버튼 컴포넌트와 클릭 이벤트

버튼 컴포넌트를 만들고 클릭 이벤트를 부여해보는 실습.

// App.js 파일
import React from 'react';
function ButtonComponent() {
  function clickEventHandle() {
    alert('클릭!!!')
  }
  return (
    <div style={
        {
          height: '80vh',
          display: ' flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }
      }
    >
      <p>이것은 내가 만든 App 컴포넌트입니다.</p>
      <div>
        <button /**style={{ margin: 'auto' }}*/ onClick={clickEventHandle}>클릭</button>
      </div>
    </div>
  );
}

function App() {
  return (
    <ButtonComponent/>
  )
}
export default App;

함수형 컴포넌트로 ButtonComponent를 생성하고 내부에 clickEventHandle() 함수를 만들어 주었다. 그리고 return 부에 inline으로 onClick를 clickEventHandle 함수로 연결해주었다. 이때 자바스크립트 요소를 사용하기 위해 중괄호 '{}'를 사용하였다.

실습 2 - 부모-자식 컴포넌트 이해

실습 2 - 부모자식 컴포넌트 이해

할아버지, 부모, 자식 컴포넌트를 만들어서 연결하고 호출하는 실습.

// App.js 파일
import React from 'react';
function Grandparents(){
  return(
    <div style={{margin:'5px'}}>
        <div>나는 할배요</div>
        <Parent/>
    </div>
  )
}

function Parent(){
  return(
    <>
        <div>나는 엄맙니다</div>
        <Child/>
    </>
  )

}

function Child(){
  return <div>나는 자식입니다</div>
}

function App() {
  return (
    <>
        <Grandparents/>      
    </>
  )
}

export default App;

함수형 컴포넌트로 Grandparents, Parent, Child를 생성하고 App 컴포넌트에서 호출하였다.