[react] Component 컴포넌트와 Props 속성

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다.

우분투 환경에서 진행함

---

컴포넌트란 화면 UI를 처리하는 클래스를 의미한다.

리액트 컴포넌트(리액트 프레임워크가 제공, ex. h1, div)와 사용자 정의 컴포넌트로 나뉜다.

 

그리고 리액트에서 컴포넌트는 클래스 기반 컴포넌트와 함수형 컴포넌트가 있다.

 

1. 클래스 컴포넌트

1-1. 속성 Props

2. 함수 컴포넌트

 

클래스 컴포넌트

src/App.tsx

클래스 컴포넌트는 react 패키지가 제공하는 Component 클래스를 상속받아야 하며, render 메서드를 포함해야 한다.

render 메서드는 null / React.createElement 호출의 반환값 / JSX 등으로 가상 DOM 객체를 반환해야 한다.

- render 메서드의 return값: DOM 객체

 

null은 반환할 가상 DOM 객체가 없다는 뜻

 

//클래스 컴포넌트는 react 패키지가 제공하는 Component 클래스 상속받음
import {Component} from 'react'

//Component를 상속한 클래스 컴포넌트는 render 메서드를 포함해야 한다.
export default class App extends Component{
  render() {
  	//타입스크립트 코드도 같이 사용 가능
    const isLoading = true
    if(isLoading) return <p>loading...</p>
    
    return(
      <ul>
        <li>
          <a href="http://www.google.com">
            <p> go to Google </p>
          </a>
        </li>
      </ul>
    )
  }
}

클래스 컴포넌트를 사용자 컴포넌트로 만들어 옮겨 보자.

ClassComponent.tsx 파일 생성해서 클래스 컴포넌트로 분리!

 

src/ClassComponent.tsx

import {Component} from 'react'

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

 

src/App.tsx

//클래스 컴포넌트는 react 패키지가 제공하는 Component 클래스 상속받음
import {Component} from 'react'
import ClassComponent from './ClassComponent'

//Component를 상속한 클래스 컴포넌트는 render 메서드를 포함해야 한다.
export default class App extends Component{
  render(){
    return(
      <ul>
        <ClassComponent />
        <ClassComponent />
      </ul>
    )
  }
}

결과화면

 

 

속성 Property

리액트 프레임워크에서의 속성은 부모 컴포넌트가 자식 컴포넌트 쪽에 정보를 전달하는 객체 타입의 데이터를 의미.

*객체지향 프로그래밍에서 속성: 클래스의 멤버 변수였음(not 객체). 컴포넌트 또한 화면 UI를 담당하는 클래스이므로 속성을 가질 수 있다.

 

리액트에서의 속성은 값이 변하면 해당 컴포넌트를 다시 렌더링하여 수정된 속성을 화면에 반영한다.

즉, 리액트 컴포넌트 관점에서의 속성은 객체지향 프로그래밍의 속성 + 재렌더링 을 의미하는 객체 타입 변수이다.

 

Props 사용해보기

ClassComponent에 속성 구현하기

① Props으로 클래스 컴포넌트에서 사용할 속성 : 타입 정의

② 컴포넌트 내부에서 this.props 형태로 외부에서 넘어온 속성 사용 가능

③ 속성을 클래스 내부에서 사용

④ 클래스 외부에서, 즉 부모 컴포넌트인 App에서 Classcomponent로 href와 text 속성 값 전달

 

 

 

---

함수 컴포넌트

클래스 컴포넌트와 같이, 함수 컴포넌트도 자신의 반환값으로 가상 DOM 객체를 생성해서 전달한다.

 

타입스크립트에서 두 가지 방법으로 함수를 만들 수 있다.

1) function 키워드

2) 화살표 기호 (=>)

 

 

function 키워드 방식을 사용한 App.tsx

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

 

화살표 방식 함수 컴포넌트 만들기

//변수에 익명 함수() 설정
const App = () => {
    return <h1>Hello function-keyword component!</h1>
}
export default App

타입스크립트에서 화살표 함수는 이름을 가질 수 없는 익명 함수이다. 따라서 App이라는 변수에 익명 함수를 설정하는 방식으로 구현 & export!

children 속성

export default function App(){
  const texts = ['hello', 'world'].map((text, index) => <p key={index} children={text} />)
  return <div children={texts} />
}