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

PARK·2021년 1월 18일
0

REACT 파헤치기

목록 보기
1/7
post-thumbnail

리액트를 처음 접하면서 컴포넌트가 어떤 방법으로 정의되는지 참 헷갈렸습니다. 시간이 흘러가면서 컴포넌트 문법도 많이 바뀌었습니다. 리액트는 컴포넌트 작성 법이 크게 두 가지이고 세부적으로 가면 참 다양합니다. 이런 상황에서 는 '모두 다 잘 알고 있어야 개발하는 입장에서 유리하지 않을까?'하는 생각으로 정리를 해봤습니다.

컴포넌트 작성법은 크게 클래스 vs 함수로 나누어집니다.
다음을 통해서 어떻게 간단하게 파악합시다.

1. Construcor

class App extends Component {
        constructor(props) {
        super(props);
        this.state = { ~~ };
    	render(){
		return(
       		 //
        )
    };
};

맨처음에는 constructor과 super을 통해 state를 관리했다.

2. 클래스필드

class App extends Component {
        state = { ~~ };
    	render(){
		return(
      	   	 //
        )
    };
};

2015년 리액트 버전 0.13부터 클래스필드 문법을 지원하면서 constructor과 super을 사용하지 않고도 state를 관리하게 되었습니다.

3. 함수형 컴포넌트

function App(props){
	return(
 		~~
	)
}

동시대에 함수형 컴포넌트는 위와 같이 사용되었습니다.
함수형 컴포넌트는 render()을 사용하지 않아도 되는 등 보다시피 작성하기 좀 더 편리했습니다. 또 메모리 자원을 덜 사용한다는 장점도 있었지만 함수형 컴포넌트는 state와 LifeCycle api를 사용할 수 없었습니다. 그렇기 때문에 클래스형 컴포넌트를 많이 사용했습니다.

4. Hook 도입

2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원했습니다.

Hook??

hook은 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다.

클래스 컴포넌트에서만 가능했던 LifeCycle api를 함수형 컴포넌트에서 사용할 수 있게 된 겁니다. 완벽하게 똑같은 것은 아니고 LifeCycle api을 흉내낼수 있다고 말하는게 맞습니다.

이제 React는 클래스보다 함수형 컴포넌트를 지향합니다. 앞으로 작성하는 컴포넌트는 함수형으로 작성하는 것이 좋지만,
오래된 코드들은 클래스 컴포넌트가 많습니다. 그리고 리액트 팀도 클래스 컴포넌트와 함수형 컴포넌트가 공존함을 알고 있기 때문에 우리는 클래스, 함수 컴포넌트 둘 다 이해하고 있어야합니다.

<Hook에 대해 자세한 정보는 다음을 내용을 참고해주세요>

profile
익숙한 것에 작별을 고해야한다

0개의 댓글