[기본 개념] #2. Hooks & Rendering

단골개념인 Hooks에 대해 정리해 보자

 

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

 

또한,  기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.

 

1. Hooks

1) useState

useState는 가장 기본적인 Hooks으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해 준다. 

 

 

2) useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hooks이다.

 

 

2. Rendering

렌더링이란 리액트가 컴포넌트에게 현재의 props와 state를 기반으로 UI가 어떻게 생겼으면 좋겠는지 설명하도록 요청하는 프로세스이다.

함수 컴포넌트에서 렌더링은 함수의 실행이다.

 

 

 

참고 :

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

Hook의 개요 – React

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고 :

https://velog.io/@velopert/react-hooks

리액트의 Hooks 완벽 정복하기