13. React (Re: act #2)

컴포넌트

컴포넌트를 선언하는 방식에는 두 가지 방식이 있다

하나는 클래스형 컴포넌트, 또 하나는 함수형 컴포넌트다

 

클래스형 컴포넌트의 구성은 아래와 같다

import React, { Component } from "react";

class App extends Component {
  render() {
    const name = "react";
    return <div className="react">{name}</div>;
  }
}

export default App

클래스형 컴포넌트는 render 함수가 꼭 필요하며, render() 안에서 출력할 JSX를 반환해야 한다

 

위 코드를 함수형 컴포넌트로 변환하면 아래와 같이 작성할 수 있다

import React, { Component } from "react";

const App = () => {
  const name = "react";
  return <div className="react">{name}</div>
}

export default App

function 대신 => 화살표 함수(Arrow function)를 사용하여 함수 컴포넌트를 만들 수 있다

 

 

 

모듈 불러오기 및 내보내기

export default 자바스크립트 파일명;

위와 같은 형태로 작성시 다른 파일에서 해당 파일을 import 할 수 있게 된다

export한 폴더를 import해서 사용하는 방법은 아래와 같다

import export 된 파일명 from "export 된 파일 저장경로"

위와 같이 작성 시 사용하려는 컴포넌트를 import해서 사용할 수 있다

 

아래와 같이 Component를 생성, 소멸 시키는 과정을 거치며 사용할 수 있게 된다

import React from "react";
import Test from "./Test";

const App = () => {
  return <div className="react">
    <Test />
  </div>
}

export default App

import React from "react";

const Test = () => {
  const name = "Component import & export Test";
  return <div className="react">{name}</div>
}

export default Test

리턴 된 자바스크립트 객체 name을 <Test />의 결과값으로 화면에 렌더링하게 된다

정상적으로 렌더링되어 출력되는 것을 확인할 수 있다

 

---

Props

컴포넌트 단위의 작업에 대해 고민하기 시작한 순간부터 반드시 알아야 할 필수 요소 중 하나다

properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소다

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다

 

JSX 내부에서 props 렌더링

아까 생성한 Test 컴포넌트에서 contents라는 props를 렌더링하는 과정을 살펴보자

props를 받아올 때는 컴포넌트 함수의 파라미터로 받아와 사용할 수 있다

const Test = (props) => { ··· }

props 렌더링 시에는 { }로 감싸주어야 한다

import React from "react";
import Test from "./Test";

const App = () => {
  return <div className="react">
    <Test contents="Hello, Props"/>
  </div>
}

export default App

import React from "react";

const Test = (props) => {
  return <div className="react">{props.contents}, nice to meet you</div>
}

export default Test

App 컴포넌트에서 Test 컴포넌트로 넘겨준 값을 잘 전달받은 것을 확인할 수 있다

 

이 상태에서 props로 전달될 내용을 지운다면 해당 부분은 삭제된 채로 재렌더링 될 것이다

깔끔하게 사라져버렸다

 

부모 컴포넌트에서 props 값을 따로 지정하지 않았을 때 기본값을 설정하는 방법도 있다

기본값 설정 키워드 : defaultProps

const App = () => {
  return <div className="react">
    <Test />
  </div>
}

import React from "react";

const Test = (props) => {
  return <div className="react">{props.contents}, nice to meet you</div>
}

Test.defaultProps ={
    contents: "Hello, defaultProps"
}

export default Test

 

 

 

태그 사이의 내용을 보여주는 children

컴포넌트 태그 사이의 내용을 보여주는 props가 children이다

import React from "react";
import Test from "./Test";

const App = () => {
  return <div className="react">
    <Test>React</Test>
  </div>
}

export default App

import React from "react";

const Test = (props) => {
  return <div className="react">
      App Component is {props.children}
  </div>
}

export default Test

 

 

 

비구조화 할당 문법을 이용한 props 내부 값 추출

Test에서 props 값을 조회할 때 마다 위와 같이 props.contents, props.children 등

props를 계속해서 붙여주는 것이 불편하게 느껴진다

 

작업의 편의를 위해 ES6의 비구조화 할당 문법을 사용해서 내부 값을 바로 가져와보자

import React from "react";
import Test from "./Test";

const App = () => {
  return <div className="react">
    <Test>Welcome to my Component</Test>
  </div>
}

export default App

import React from "react";

const Test = (props) => {
    const {children, name} = props;

    return <div className="react">
        Hello, {name} !! {children}~
    </div>
}

Test.defaultProps ={
    name: "App"
}

export default Test

이와 같은 형태로 사용시 더 간결한 코드로 name과 children을 props로 사용할 수 있다

이같이 객체에서 값을 추출하는 문법을 비구조화 할당(destructuring assignment)이라고 한다

 

비구조화 할당을 구조 분해 문법이라고도 하며, 함수의 파라미터 부분에서도 사용할 수 있다

파라미터가 객체라면 그 값을 비구조화해서 사용하는 것이다

import React from "react";

const Test = ({children, name}) => {
    return <div className="react">
        Hello, {name} !! {children}~
    </div>
}

Test.defaultProps ={
    name: "App"
}

export default Test

파라미터 부분에서 비구조화 할당을 사용시 더욱 편리하게 props를 사용할 수 있게 된다

(함수형 컴포넌트에서는 이렇게 props를 전달하게 된다)

 

 

 

▼ Modification. 3.9.21

propTypes

* 기존의 React.PropTypes는 React v15.5부터 다른 패키지로 이동

  대신 prop-types 라이브러리를 사용 (변환을 자동화하기 위해 codemod script를 제공)

 

PropTypes를 사용하는 이유는 전체 애플리케이션의 타입을 확인하기 위함이다

앱의 규모가 커질수록 타입 확인을 통해 버그(bug)를 잡아야 할 일이 많이 생기게 될 것이다

이때 Flow 또는 TypeScript 같은 JS Extensions을 사용할 수도 있다

 

하지만 React는 위와 같은 도구를 사용하지 않아도 내장된 타입 확인 기능들을 가지고 있는데,

그 중 하나가 컴포넌트의 props의 타입을 확인하는 propTypes이다

 

* TypeScript와 propTypes의 차이

이 둘은 타입을 체크한다는 것만 동일할 뿐, 완전히 다른 동작을 수행한다

 

1. TypeScript

- 컴파일 타임에 정적으로 타입을 검사, 코드 작성 시에 발생하는 타입 에러를 캐치

(TypeScript에 PropTypes를 자동으로 지정해주는 기능이 있다고 한다)

 

2. propTypes

- 동적으로 타입을 검사, 사용자의 동적인 입력에 따른 타입 체크가 가능

  외부 API로부터 데이터를 받아오거나 할 때 발생하는 타입 에러같은 것들을 체크할 수 있다

  즉, 런타임에서 발생하는 타입 에러를 체크할 수 있다

 

TestComponent.propTypes = {
	name: "PropTypes.string    //name의 type이 string(문자열)인지 검사
};

예시와 같은 방법으로 사용하며, props로 전달받게 될 name의 type을 검사하게 된다

아래 이어지는 내용을 통해 좀 더 자세히 알아보자

 

 

propTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 타입을 지정할 때 사용된다

propsTypes을 지정하는 방법은 defaultProp을 설정하는 것과 유사하다 

import React from "react";
import PropTypes from "prop-types";
const TestComponent = ({ name, children }) => {
	return (...);
};

TestComponent.defaultProps = {
	name: "testName"
};

TestComponent.propTypes = {
	name: PropTypes.string
};

export default TestComponent;

 

사용을 위해서는 먼저 import 구문을 통해 PropTypes를 불러와야 한다

 

PropTypes는 전달받은 데이터의 유효성을 검증하기 위해 다양한 유효성 검사기를 내보낸다(Validator)

해당 코드에서는 PropTypes.string을 사용하였으며, name이 문자열 데이터 타입인지 검사할 것이다

만약 prop에 유효하지 않은 값이 전달 된다면, JS console을 통해 경고문이 출력될 것이다

* propTypes은 성능상의 이유로 개발 모드(Development mode)에서만 확인된다

 

참고 : React, PropTypes

▲ Modification. 3.9.21