[ReactNative]함수 컴포넌트 vs 클래스 컴포넌트? 차이점과 비교

리액트 네이티브의 코어 컴포넌트 중 이벤트를 다루지 않는 기본적인 코어 컴포넌트들을 지난 포스팅에서 알아보았다. View, Text, Image등의 기본적인 사용과 HTML 태그와의 비교는 이전 포스팅 (https://iworldt.tistory.com/35)을 참고하면 된다.

 

이번 포스팅에서는 리액트 네이티브의 사용자 컴포넌트에 대해 알아볼 것이다. 그 중에서도 사용자 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트 두 가지 방식으로 제작할 수 있는데, 그 둘의 차이점을 알아보도록 하겠다.

 

리액트 네이티브 컴포넌트, 리액트 컴포넌트, 함수 컴포넌트, 클래스 컴포넌트

 

사용자 컴포넌트

리액트에는 컴포넌트를 클래스 컴포넌트(class component)와 함수 컴포넌트(function component) 두 가지 방식으로 형성하여 사용할 수 있다.

이 중 원시적인 방법이 클래스형 컴포넌트이고, 리액트 훅의 도입에 따라 함수형 컴포넌트 방식으로 제작하는 추세이다. 리액트 훅은 함수형 컴포넌트 방식에서만 사용할 수 있기 때문이다. 그래서 예제를 참고할 때에도 함수형인지를 잘 보고 참고하자.

 

클래스형 컴포넌트

클래스형 컴포넌트느 함수형 컴포넌트에 비해 단점이 많다.

우선 클래스를 정의할 때 무조건 extends Component 를 추가해주어야 한다. 또한 render() 메소드가 요소로 꼭 포함되어야 한다. 게다가 리액트의 주요 기능인 리액트 훅(react hooks)조차 사용할 수 없다. 그러니 필요한 상황이 아니면 거의 사용하지 않는다. 

클래스형 컴포넌트에 대해 자세히 설명하진 않겠지만, 기본적인 형태는 다음과 같다.

import React, {Component} from 'react';

export default classComp extends Component{
	render() { return null }
}

 

컴포넌트명 : classComp

컴포넌트의 역할 : null을 반환

 

Component를 'react'를 통해 꼭 import 해주어야 하고, 그렇게 import한 것을 컴포넌트(classComp)를 정의할 때 무조건 extends Component를 해주어야한다.

또한 해당 컴포넌트가 실제 수행할 것을 render() 메소드 안에 담아주어야 한다.

 

 

함수형 컴포넌트, 화살표 방식 함수

리액트의 예제를 보다보면 일반적으로 알고 있는 함수와 모습이 달라 어색했던 사람들도 있을 것이다. 이를테면 다음과 같다.

const ArrowComp = ( props ) => {
	console.log("속성값", props);
    return null;
}

export default ArrowComp;

 

위는 분명 함수이다.  function이라는 키워드로 명시해주지 않고 => 를 사용하여 함수를 제작하기에 화살표 방식 함수이고, 이 또한 function 키워드 방식 함수보다 많이 사용하는 추세이기에 사용을 권장한다. 위의 함수를 간단히 해석해보겠다.

함수(컴포넌트)명 : ArrowComp

속성 : props

컴포넌트의 역할 : console.log를 출력한 뒤 null을 반환

 

화살표 함수 컴포넌트 속성 전달, props 주고받기

여기서 속성인 props를 어떻게 전달하고 전달받는지 궁금할 것이다. 그럼 해당 컴포넌트를 호출한 예를 보자.

export default function App(){
	return <ArrowComp msg="hellow Arrow"/>
}

 

App은 ArrowComp 컴포넌트를 호출하면서 속성으로 msg를 넣어주었다. 그럼 이때 ArrowComp는 props의 한 요소로 msg를 받게 된다. 그 msg의 값, "hello Arrow"만을 출력하고 싶다면 다음과 같이 수정해줄 수 있다.

const ArrowComp = ( props ) => {
	console.log("msg : ", props.msg);
    return null;
}

export default ArrowComp;

 

props는 속성을 모두 묶은 형태이기 때문에, props 중에서 msg를 . 을 통해 명시해주면 "hello Arrow"만 출력할 수 있게 된다. 속성의 타입은 기본적인 number부터 string, Json 까지 다양하게 사용 가능하기 때문에 함수형 컴포넌트가 더 많이 사용될 수 있는 것이다.

또한 리액트 훅의 사용이 가능하다고 말했었는데, 훅은 위에 설명한 속성(props)들의 상태 관리와 변경되었을 때의 반응 등 한 컴포넌트의 lifecycle을 관리해주는 역할을 한다. "속성"이라는 것 때문에 함수형 컴포넌트를 사용한다고 봐야 한다.

위에서 명시한 것 처럼 컴포넌트의 속성을 msg와 같이 만들어 줄 수도 있고, 기본적으로 내장되어 있는 속성도 있다. 그에 대해서도 알아보자.

 

컴포넌트의 기본 속성

key

한 컴포넌트를 제작하고, App에서는 그 컴포넌트를 여러번 호출하여 사용할 수 있다. 위의 hellow Arrow 문장을 10번이고 100번이고 호출할 수 있는 것이다. 이럴 경우 리액트 프레임워크는 렌더링(컴포넌트를 호출하여 화면에 보여주는 과정)을 최적화 하기 위해 각각의 key 값을 주기를 권장한다.

'Each child in a list should have a unique key' 라는 경고 메세지가 발생하는 이유이다. HTML의 태그에서 id를 주는 것과 비슷하다고 보면 되겠다.

 

children

부모 컴포넌트 안에 자식 컴포넌트를 넣고자 할 때 사용하는데, 이는 컴포넌트의 재사용성과 큰 관련이 있다.

이를테면 부모컴포넌트가 레이아웃(템플릿)이고 그 안의 자식 요소들만 계속 바뀌어주면 된다고 할 때, 부모는 자식을 받아와 레이아웃(템플릿)을 적용해줘야하기 때문에 props로 {children}을 받아와주어야 한다. 그리고 나의 레이아웃, 즉 나의 컴포넌트 태그의 자식 요소로 {children}을 넣어주어야 한다.

 

아까 적었던 ArrowComp 예제를 다시 활용해보자.

const ArrowComp = ( props ) => {
	console.log("msg : ", props.msg);
    return null;
}

export default ArrowComp;

msg를 출력하는 ArrowComp이다. 이 친구가 자식 요소가 될 것이다.

 

const Wrapper=({children})=>{
	
    return (
    	<Text>{children}</Text>
	);
    
}

export default function App(){

	return (
    	<Wrapper>
        	<ArrowComp msg="hi"/>
            <ArrowComp msg="hellow"/>
        </Wrapper>
    );
    
}

 

Wrapper는 자식요소를 받아서 Text로 출력해주는 부모 컴포넌트이다.

App에서 Wrapper가 자식요소 hi, hellow 두개를 가지고 있는 것을 확인할 수 있다.  자세하게 예제를 작성하진 않았으나 자식요소에 대한 속성값 변경, 스타일 적용 등 다양한 기능도 Wrapper 함수 내에서 가능하다.

 

ref

함수 컴포넌트에서는 사용할 수 없다. 그러나 forwardRef, useImperativeHandle 등을 이용하여 ref를 사용할 수 있다. ref는 쉽게말해 js의 getElementBy***이다. 컴포넌트 자체의 정보를 주고받는 것이다.

 

이번 포스팅은 여기까지 마치도록 하겠다. 다음 포스팅은 컴포넌트의 이벤트를 다루는 법, 컴포넌트의 이벤트 속성에 대해 알아보도록 하겠다.