2020-12-03 :: 컴포넌트와 Props

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

컴포넌트를 선언하는 방식은 두 가지이다. 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트이다. 클래스형 컴포넌트와 함수형 컴포넌트의 가장 큰 차이점은 클래스형 컴포넌트의 경우 state와 라이프사이클 기능을 사용할 수 있다는 것과 임의 매서드를 정의할 수 있다는 것이다.

함수형 컴포넌트의 장점은 클래스형 컴포넌트보다 훨씬 선언하기가 편하다. 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다. 또한, 프로젝트를 완성하여 빌드를 한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다.

함수형 컴포넌트의 주요 단점은 state와 라이프사이클 기능을 사용할 수 없다는 것인데 리액트 v16.8이후 Hooks이 도입되면서 이러한 단점이 해결되었다. 리액트 공식 메뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks을 사용하도록 권장하고 있다.

ES6의 화살표 함수

es6에 화살표 함수라는 새로운 형태의 함수가 도입되었다. 그렇다고 해서 기존 function을 이용한 함수 선언 방식이 대체된 것이 아니다. 둘의 작동 방식은 조금 다른데 다음 예시를 통해 그 차이를 알아보자.

function BlackDog() { this.name = 'white'; return { name: 'black', bark: function() { console.log(this.name + ': 멍멍'); } } } const blackDog = new BlackDog(); blackDog.bark(); //blakc: 멍멍 function WhiteDog() { this.name = 'white'; return { name: 'black', bark: () => { console.log(this.name + ': 멍멍'); } } } const whiteDog = new WhiteDog(); whiteDog.bark(); //blakc: 멍멍

위 코드에서 알 수 있듯이, 일반 함수는 자신이 종속된 객체를 this로 가르키며, 화살표 함수는 자신이 종속된 인스턴스를 this로 가르킨다.

Props

props는 컴포넌트의 속성을 설정할 때 사용하는 요소이다. props 값은 컴포넌트 함수의 파라미터로 받아와 사용할 수 있다.

props의 기본값 설정: defaultProps

defaultProps을 통해 props값을 따로 지정하지 않은 경우 보여줄 기본값을 설정할 수 있다.

MyComponent.defaultProps = { name: 'Default Name' };

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

children은 컴포넌트 태그 사이의 내용을 보여주는 props이다. props.children을 통해 접근할 수 있다.

비구조화 할당 문법을 통해 Props 내부 값 추출하기

props값에 접근할 때 마다 props.asdf처럼 props.이라는 키워드를 붙여줘야 한다. 이러한 작업을 더욱 편하게 하는 비구조화 할당 문법에 대해 알아보자.

{/* 아래 구문은 함수형 컴포넌트에서만 사용된다. */} const { asdf, qwer } = props; {/* 클래스형 컴포넌트는 아래와 같이 */} const {asdf, qwer} = this.props;

위와 같은 선언을 한 후에는 props.키워드를 사용하지 않고 asdf, qwer을 직접 사용할 수 있다. 함수형 컴포넌트에서는 아래 코드와 같이 파라미터 부분에서 바로 비구조화 할당 문법을 사용할 수 있다.

const MyComponent = ({asdf, qwer}) => { ... }

propTypes를 통한 props 검증

컴포넌트의 필수 props을 지정하거나 props의 타입을 지정할 때는 propTypes를 사용한다. 우선 propTypes를 사용하기 위해서는 해당 모듈을 import 해야한다.

import PropTypes from 'prop-types'; ... MyComponent.propTypes = { name: PropTypes.string, //props의 형태가 string인지 검사 favoriteNumber: propTypes.number.isRequired //props을 필수적 요소로 지정 };