React Hook

React Hook 이란

Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

 

 Hook의 특징

• 선택적 사용 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 그러나 당장 Hook이 필요 없다면, Hook을 사용할 필요는 없다.
• 100% 이전 버전과의 호환성 Hook은 호환성을 깨뜨리는 변화가 없다.
• 현재 사용 가능 Hook은 배포 v16.8.0에서 사용할 수 있다.

 

 

대표적인 React Hook 
 

1. useState

useState는 Component에서 상태(state)값을 추가 할 때 사용되며, 클래스형 컴포넌트(Class Component)에서만 사용 가능하던 State를 함수형 컴포넌트(Functional Component)에서도 사용 가능 하도록 한 대표적인 기능이다.선언은 const [변수명, 상태를 업데이트 할 함수명] = useState(초기값) 을 통해 할 수 있으며, useState로 선언된 변수는 상태(state)가 변할 때 마다 페이지를 리렌더링 시키게 된다. 이 때 (상태를 업데이트 할 함수명)은 비동기로 처리 되는데, 이는 함수가 호출 될 때 마다 화면을 다시 렌더링 하기 때문에 성능이슈가 발생 할 수 있기 때문이다.
 
2. useEffect
 
useEffect는 화면이 렌더링 될 때마다, 특정 작업을 실행 할 수 있도록 하는 Hook이다. 이를 통해 함수형 컴포넌트(Functional Component)에서 Side Effect를 사용 할 수 있게 됐을 뿐만 아니라, 클래스형 컴포넌트(Class Component)의 Life Cycle Method에서 사용되는 componentDidMount(최초 렌더링) 와 componentDidUpdate(렌더링 후 업데이트)를 합친 형태로, 페이지가 렌더링 될 때 변화된 값으로 인해 바뀌어야 할 화면의 데이터들을 처리해준다.선언은 useEffect( () => {익명함수}, []) 이며 매개변수는 보이는것과 같이 익명함수와 빈 배열이다. 뒤의 빈 배열의 종류에 따라 렌더링의 횟수를 조절 할 수 있다.1. [] = 최초 렌더링(마운트) 될 때 한번만 실행2. [상태값1, 상태값 2..] = 선언한 상태값들이 업데이트 될 때만 실행3. 생략 = 리렌더링시마다 반드시 실행
 
3. useReducer
 
useReducer는 이 전 상태(state)와 Action을 결합하여, 새로운 상태값(state)를 만든다. 일반적으로 React에서 상태관리를 위해 사용하는 Hook은 useState이지만, 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용 할 수 있다.선언은 const [변수명, dispatch] = useReducer[reducer, 초기값, 초기함수) 이다.1. dispatch = reducer 함수를 실행시키며, action 객체(=어떠한 행동인지를 나타내는 type 속성과 관련 데이터로 구성)를 인자로 받으며, action 객체를 통해 컴포넌트 내에서 상태 값(state)의 업데이트를 일으킨다.2. reducer = dispatch를 통해 실행되며, 컴포넌트 외부에서 상태 값(state) 를 업데이트 한다. 함수의 인자로는 state와 action을 받으며 이를 통해 새로운 state를 반환한다.

 

 

 

 

 

 

 

*참조

https://well-made-codestory.tistory.com/44