React Native 함수 컴포넌트 vs 클래스 컴포넌트

React Native 프로젝트 할 때, 난 함수 컴포넌트만 쓰는데 다른 회사는 어떤지 모르겠네? 검색하다보면 스택오버플로우에도 Class 컴포넌트로 되어 있는 코드가 많던데 난 그놈에 this가 너무 꼴보기 싫어서 함수 컴포넌트만 사용해. 1인 기업이라 누가 뭐라할 사람도 없고 ㅎㅎㅎ

그래도 궁금해서 조금 찾아보니 함수 컴포넌트와 클래스 컴포넌트 차이가 없다고 그러네. 둘 다 몇 가지 추가 기능이 있다고는 하는데 크게 문제 없는 것 같아.

https://ko.reactjs.org/docs/components-and-props.html

그런데 Hook 에서 이유를 좀 찾을 수 있겠더라구. reactjs.org에서 Hook 문서보면 첫줄에 나와. Class 없이 리액트 사용하고 싶다고 ㅋㅋ

https://ko.reactjs.org/docs/hooks-intro.html

 

좀 더 읽다 보면 hook 만든 동기가 나오는데 요약하자면 class가 많은 문제를 만든다 그래서 별로다~ 결국은 class 없이 리액트가 가능하도록 hook을 만들었다 이거지.

https://ko.reactjs.org/docs/hooks-intro.html

 

그렇다고 Class를 없앨 생각은 없다고 하니까 계속 써도 된데 ㅋㅋㅋㅋ 천천히 고민하고 바꾸려면 바꾸시던지~ 라고 문서에 나와 있으니 선택은 자유! 하지만 도태는 숙명이겠지.

 

암튼 난 어줍잖게 함수 컴포넌트로 신나게 연습하고 있었으니 럭키! 재쑤!

 

부록! 내가 함수 컴포넌트 작성하는 루틴!

(무조건 typescript만 사용!)

React native에서 함수 컴포넌트 만들 때 항상 시작은 똑같이 해.

 

1. 우선 새로운 함수 컴포넌트.tsx  파일을 하나 만들고

2. React 하고 styled-component를 import하지.

3. 컴포넌트 전체를 감싸는 View를 ContainerView이라는 이름으로 만들지. (이 때 styled component 사용하는데 styled component는 할 이야기가 많으니까 나중에 좀 더 하기로 하고...)

4. 그리고 함수 컴포넌트에 사용할 prop interface를 만들어

5. 만든 interface로 함수 컴포넌트를 선언해주고 비어있는 ContainerView를 리턴.

6. 마지막은 export default로 마무리~~~

 

그러면 대강 아래와 같은 모양이 되는데.. 난 이거 항상 다 타이핑해. 복붙해도 되는데 걍 타이핑해. 내가 뭐 리액트 고인물이 아니기도 하고 뭐 굳이 비유하자면 망치질 숙련도 올리는 느낌으로 ㅋㅋㅋ. 심리적으로도 상당한 도움이 돼 ㅋㅋㅋ 뭔가 일 열심히 한 거 같고 좋아 ㅋ

import React from "react";
import styled from "styled-components/native";

const ContainerView = styled.View`
  background-color: ${(props) => props.theme.colors.mainBgColor};
`;

interface EventTimelineHeaderProps {
  lastEvent: string;
  date: Date;
}
const EventTimelineHeader: React.FC<EventTimelineHeaderProps> = ({
  lastEvent,
  date,
}) => {
  return (
    <ContainerView></ContainerView>
  );
};

export default EventTimelineHeader;

이거 타이핑하고 이제 함수 작성하기 시작하는거지 ㅋㅋㅋ 이렇게 하면 좀 할 맛이 나 ㅋ 적어도 난 그렇더라고 ㅋㅋㅋㅋㅋㅋ

 

암튼 다들 화이팅하고 리액트 클래스 좀 그만 쓰고 ㅋㅋㅋ 스택오버플로우에 답변 좀 함수 컴포넌트로 하자 ㅋㅋㅋㅋ