[이노베이션 캠프 WIL Week04] 라이프사이클(클래스형 vs 함수형), react hooks

매번 복붙으로 공부중이긴한데, 이렇게 해도 되는건지 모르겠다.

프로젝트 만들라고 하는데... 만들 자신이 없다. 이미 만들기도 전에 포기를 해버리게 된다. 그래도 해봐야지... 일단 뷰부터 만들어보려고한다. 

클래스형 컴포넌트

클래스형 컴포넌트는 함수형 컴포넌트와 달리 상태(state)와 라이프사이클(생명 주기 메서드)을 갖습니다.
클래스형 컴포넌트에서는 render() 함수가 반드시 있어야 하고, render() 함수는 JSX를 반환해야 합니다.

함수형 컴포넌트

함수형 컴포넌트는 상태(state)와 라이프사이클을 갖지 않기 때문에 메모리 클래스형 컴포넌트에 비해 자원을 덜 사용하고, 선언하기 편합니다.

Hook은 리액트 v16.8 업데이트에서 새로 추가된 기능입니다.
Hook은 class를 작성하지 않고도 상태(state)와 라이프사이클 기능을 사용할 수 있게 해주는 함수입니다.

 

출처: https://intrepidgeeks.com/tutorial/react-function-components-and-class-components

[React] 함수형 컴포넌트 vs 클래스형 컴포넌트

리액트 훅이란?

 

기존에는 Class형 컴포넌트에서만 상태를 관리 할 수 있었고, 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, Hook이 등장하면서 더 이상 상태를 관리하기 위해 Class를 쓸 필요가 없어졌다.또한 훅은 상태 관리 뿐만 아니라 기존 클래스형 컴포넌트에서만 가능하던 여러 기능을 사용할 수 있게 하였다.

 

Hook의 규칙

✌️ Rules of Hooks

✅ 훅은 오직 리액트 함수 내에서만 사용되어야 한다. 일반적인 JavaScript 함수에서는 호출하면 안된다.

✅ 리액트 함수 최상위에서 호출해야 한다. -> 반복문, 조건문, 중첩된 함수 내에서 hook을 호출하면 안된다.

useState 나 useEffect 같은 훅들이 여러 번 사용될 수 있는데, 리액트는 이 훅들을 호출되는 순서대로 저장해 놓는다.(=LinkedList) 그래서 매 렌더링마다 순서대로 훅을 호출할 수 있는것이다. 근데 만약 조건문이나 반복문안에서 훅을 썻다고 해보자, 그럼 훅이 어떤 조건에따라 실행되지 않을 수 있다.

그럼 렌더링 때마다 맨처음 함수가 실행될때 리액트가 기억해놓은 훅의 호출 순서가 꼬여서 실행될 것이고 결국 버그를 초래할 것이다. 이게 항상 리액트 함수 최상위 레벨에서만 훅을 호출해야하는 이유이다.

 

출처: https://intrepidgeeks.com/tutorial/lifecycle-class-to-function-2-what-is-response-hooks

라이프 사이클 (클래스형 vs 함수형)-2 : React Hooks 란?