| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- dunklow
- jQuery
- 주식공부
- dunk high
- 자바스크립트
- GIT
- Github
- Linux
- 오라클
- 파이썬
- 덩크 하이
- draw
- 발매예정
- 리눅스
- 코로나19
- sacai
- react
- 나이키
- 드로우
- JavaScript
- 주식
- Nike
- 제이쿼리
- 덩크 로우
- oracle
- stockx.com
- Dunk Low
- 덩크로우
- 리액트
- Python
- Today
- Total
Life goes slowly...
[React] React.js의 Hooks란 무엇인가 본문
React.js의 Hooks
React에서 Hooks은 React의 새로운 기능으로써 React 16.8 버전에서 새로 추가된 기능입니다. state, component에 대한 모든 것을 바꿔놓은 기능입니다. Hooks을 이용하여 기존의 함수형 Compontent에서도 클래스형 Compontent 작업을 할 수 있게 되었습니다. 기존의 클래스형 Compontent가 가지고 있었던 복잡성, 재사용성의 단점들까지 모두 해결하기도 했습니다.
함수형 Compontent에서 사용되는 Hook 기능중에서는 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정할 수 있는 useEffect의 함수가 있습니다.
React.js의 Hooks 사용하며 없어진 문제점
1. Compontent 사이에서 상태와 관련된 로직을 재사용하기 어려웠습니다. Hook은 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와주게 되었습니다.
2. 생명주기 Compontent로 인하여 복잡한 Compontent는 이해하기 어려웠지만 상태관련 로직이 모두 같은 공간에 함께 있기 때문에 Hook을 통하여 로직에 기반을 둔 작은 함수로 Compontent로 나눌수 있게 되었습니다.
Custom Hook
Custom Hook은 Compontent 트리에 새로운 Compontent 를 추가하지 않고도 상태 관련 로직을 Compontent 간에 재사용할 수 있게 해주는 기능입니다. Custom Hook을 만들어서 여러 Compontent에서 사용하더라도, 각 Compontent에서 사용하는 state는 독립적입니다. Custom Hook은 기능이라기보다는 Convention에 가깝다고 볼 수 있습니다.
'프로그래밍 > React.js' 카테고리의 다른 글
| [React] React.js 의 popup창에서 부모창의 함수 호출 (0) | 2022.04.19 |
|---|---|
| [React] React.js 의 debounce 함수 (0) | 2022.02.23 |
| [React] React.js 의 JSX 문법 (0) | 2022.02.22 |
| [React] Each child in a list should have a unique "key" 에러 (0) | 2022.02.17 |
| [React] <input> cannot appear as a child of <table>. 에러 (0) | 2022.02.15 |
| [React] React.js 조건문 - IF 문 (0) | 2022.02.14 |
| [React] React.js의 useEffect() 함수 (0) | 2022.01.06 |
| [React] error command failed with exit code 1 [React start 에러] (0) | 2022.01.05 |
