리액트 - 컴포넌트

본 글은 <Do it! 리액트 모던 웹 개발 with 타입스크립트>를 참고해 공부한 내용을 정리한 글입니다.

컴포넌트

 

일반적으로 컴포넌트는 자바의 AWT, Swing처럼 화면 UI를 처리하는 클래스를 의미한다. 

 

하지만 리액트에서는 리액트 프레임워크가 제공하는 컴포넌트와 사용자가 정의하는 컴포넌트 2가지를 포함하는 개념이다.

 

리액트 컴포넌트

리액트 컴포넌트는 리액트 프레임워크에서 제공하는 것으로 HTML5의 각 태그에 대응된다.

 

const h1 = <h1>Hello world!</h1>

HTML 태그처럼 보이지만 JSX문으로, h1 컴포넌트이다. 

 

h1 컴포넌트를 React.createElement로 생성하면

const h1 = React.createElement('h1', null,'Hello world!')

컴포넌트 타입을 위와 같이 입력해주어야 한다. 이는 컴포넌트를 일일이 임포트하지 않아도 사용할 수 있도록 하기 위함이다.

 

import {h1, h2, div, span} from 'react'	//번거롭다

 

사용자 컴포넌트

 

이미 리액트 프레임워크에 컴포넌트가 구현되어 있는데 사용자 컴포넌트는 또 무엇일까? 왜 존재하는 것일까?

 

index.tsx에 다음과 같은 코드가 있다 하자. 리액트 컴포넌트를 활용한 코드지만 index에 있을 필요는 없다. 

다른 파일에 함수를 구현한 다음 임포트하면 코드의 길이를 줄일 수 있을 것이다.

const rootVirtualDOM = (
  <ul>
    <li>
      <a href="http://google.com">
        <p>go to google</p>
      </a>
    </li>
  </ul>
)

 

• index.tsx

import App from "./App"

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)

 

• App.tsx

export default function App() {
  return (
    <ul>
      <li>
        <a href="http://google.com">
          <p>go to google</p>
        </a>
      </li>
    </ul>
  )
}

React.createElement 호출이나 JSX문을 사용자 컴포넌트쪽으로 이동하여 코드를 간결하게 만들 수 있다.

 

클래스 컴포넌트

 

컴포넌트는 클래스 기반 컴포넌트와 함수형 컴포넌트로도 구분할 수 있다.

 

클래스 기반 컴포넌트는 

1. Component 클래스를 상속해야 한다.
2. render 메서드를 포함해야 한다.
3. render 메서드는 가상 DOM 객체를 반환해야 한다.

import {Component} form 'react'

exprot default class ClassComponent extends Component {
	render() {return null}
}

 

속성

 

일반적인 객체지향 프로그래밍에서 속성은 클래스의 멤버 변수를 의미한다. 

하지만 리액트에서는 부모 컴포넌트가 자식 컴포넌트에 정보를 전달하는 목적으로 사용한다. 

 

export default class App extends Component {
  render() {
    return (
      <ul>
        <ClassComponent href="http://www.google.com" text="go to Google" />
      </ul>
    )
  }
}

href 속성으로 구글 링크를, text 속성으로 go to google을 주었다. 

이러한 속성은 값이 변경되었을 때 해당 컴포넌트를 다시 렌더링하여 변경된 값을 화면에 반영하는 기능을 한다.

 

하지만 리액트에서는 전달된 속성이 유효한 이름인지 확인할 방법이 없다. 그래서 컴포넌트 타입에 Props와 같은 속성 타입을 새로 만들어 넘겨줘야 한다.

export type ClassComponentProps = {
  href: string
  text: string
}

 

함수 컴포넌트, 화살표 컴포넌트

 

함수 컴포넌트는 클래스 컴포넌트처럼 반환값으로 가상 DOM 객체를 생성하여 전달하는데, 코드가 더 간결하다.

export default function App() {
  return <div>Hello finction-keyword component!</div>
}

 

화살표 함수도 가능하다.

 

const App = () => {
  return <h1>function component</h1>
}
export default App	//타입스크립트 문법은 1행에 export default를 붙일 수 없음