[React] Hook, Function Component vs Class Component

1 .  Hook 이란?

 1) 한마디로 하자면

• 리액트의 훅은 16.8 버전부터 추가된 새로운 기능, 함수형 컴포넌트에서 React state와 생명주기 기능을 연동(hook into)할 수 있게 해주는 함수
  • 기존 클래스의 생명주기 메서드를 함수형 방식에서 함수로 사용할 수 있도록 한것이 훅인 것과 같다. 상태 값을 초기화 하거나, 변경이 발생했을 때 등의 상황에서 리액트의 훅함수가 호출되는 방식인듯 하다.

 2)리액트 훅의 규칙

• 반복문, 조건문, 중첩된 함수 내에서 호출하면 안됨
  • 이 규칙을 지키면 컴포넌트가 렌더링 될 때 마다 동일한 순서로 훅이 호출되는 것을 보장
• 일반적인 javascript함수 내에서 호출하면 안됨
  • 이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있음
• 한 컴포넌트 내에서 여러번 사용 가능.
  • 다만 조건문 등을 통해 함수가 호출될수도 아닐수도 있는 구조를 하면 동일 순서는 보장이 안되어 버그 발생할 가능성이 생김
• 이러한 규칙들을 강제하는 것이 eslint 플러그인!

 3)useState

• 리액트 훅 중 하나, 현재의 state값과 state값을 업데이트하는 함수를 반환하는 함수
• 일반적으로 함수내 변수는 함수 종료와 사라지지만, useState를 사용해 변수 상태를 초기화 하면 리액트에 의해 계속 관리됨

 3-1) 작동방식

• 배열을 반환하며, 첫번째 요소는 useState 함수의 인자로 넘겼던 초기 state값이 반한되며 두번째 요소는 해당 state 값을 변경하는 함수가 반환된다.
• 배열로 반환되기 때문에 보통 배열 구조 분해 할당 문법을 활용한다.
• 배열로 반환하는 이유는 개발자가 구조 분해 할당을 통해 상태값 변수명과 상태를 변경하는 함수명을 쉽게 지정할 수 있기 때문에

 4)useEffect

• DOM이 렌더링된 이후에 어떤 일ㅇ르 수행해야 하는지를 명시할 때 사용하는 훅
• 컴포너느 함수 내에서 호출하면 함수내에 정의된 변수를 감지하는 것이 가능
• 화면이 렌더링 된 이후 최초 한번 실행 이후 상태가 변경될 때 마다 계속 실행
  • React는 effect가 수행되는 시점에 이미 DOM이 없데이트 되었음을 보장

 4-1)작동 방식

• useEffect 함수에 첫번째 인자로 전달하는 함수를 Effect 라고 함
• 두번째 인자에 전달하는 값을 상택를 감지할 대상인 변구사 나열된 배열이며
• 해당 값을 전달하지 않으면 모든 상태가 변화될 때 마다 effect가 실행되고
• 해당 값을 전달하면 해당 상태 값들이 변경되었을 때만 effect가 실행되게 할 수 있다.
• 컴포넌트가 마운트 될 때, 마운트 해제 시에만 호출되게 하고 싶다면 두번째 인자에 빈 배열을 넘겨주면 된다.

 

 5)Custom hook

• 리액트에 내장된 다양한 훅 함수들을 활용해 필요한 훅을 만들 수 있다.
• 커스텀 훅을 활용해 중복 코드를 줄이고, 이전 클래스형 React 컴포넌트에서 불가능했던 로직 공유의 유연성을 제공

2 .  function conponenet vs class componenet

 1)한마디 설명

• 클래스형 컴포넌트는 상태값과 생명 주기 함수를 작성할 수 있다.
• 하지만 함수형 컴포넌트는 없다.

 2) 표 비교

 

function component	class component
props를 인자로 받아서 React element(JSX)를 리턴해주는 순수 자바스크립트 함수	리액트로 부터 확장되었고 렌더 함수와 함께 React element를 리턴한다.
render method가 필요없다.	render() 메소드가 반드시 필요하다.
위에서 아래로 수행하며 계속 살아 있지 않다.	인스턴스화 되어, 생명 주기 메서드가 유지되고 클래스 컴포넌트의 상태에 따라 실행 및 호출된다.
Stateless 컴포넌트로 상태를 가지지 않고, 단순히 데이터를 받아와 UI를 렌더링 하는 역할을 수행한다.	Stateful 컴포넌트로 로직 구현하고 상태를 관리
리액트 라이프 사이클이 사용될 수 없다.	리액트 라이프사이클 메서드가 클래스 컴포넌트 안에서 사용 된다.
훅이 쉽게 사용되고 stateful하게 된다.	hook을 수행하기 위해선 다른 문법이 필요하다.
생성자가 필요없다.	상태를 저장하기 위해선 생성자가 필요하다.

 

 

 

3 .  References

1) hook 이란 : https://funveloper.tistory.com/34#:~:text=%EB%A6%AC%EC%95%A1%ED%8A%B8%20%ED%9B%85%20(react%20hook)%20%EC%9D%B4%EB%9E%80%3F&text=%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98%20%ED%9B%85%EC%9D%80,%EC%9E%88%EA%B2%8C%20%ED%95%B4%EC%A3%BC%EB%8A%94%20%ED%95%A8%EC%88%98%EB%9D%BC%EA%B3%A0%20%ED%95%A9%EB%8B%88%EB%8B%A4. 

리액트 훅(react hook)에 대해

2)함수형 클래스형 비교 : https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react/

Differences between Functional Components and Class Components in React - GeeksforGeeks