라벨이 Hook인 게시물 표시

React.js Hook 학습

React.js의 Hook에 대해서 학습 및 사용 학습의 경우 공식 홈페이지를 참고하여 진행( 공식홈페이지 ). React 버전 16.8.0이상, React Native 0.59이상에서 지원 등장 배경 기존 React에서 state를 사용하기 위해서는 class형태에서 React.component를 상속하여 사용 상속 없이 import 방식으로 Function이나 const같은 함수에서 state 사용할 수 있도록 지원하는 개념 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수. 개념 state를 사용하기 위해 class를 사용하는데 이를 대체하여 class가 아니여도 state관리 및 rife-cycle사용이 가능하게 해주는 API 좀 더 재사용 가능한 컴포넌트를 작성하는데 도움을 주기 위해 나옴 class안에서는 동작하지 않음 문법 중복하여 사용 가능(state, effect 동일) State Hook state를 대체하는 개념으로 useState를 react로 부터 import하여 사용 useState는 2개의 항목을 가지는 배열을 반환. 인자로 주는 값의 경우 초기 변수 값을 나타낸다. 💡 return [현재 변수값, 변수를 바꾸는 setter 함수]; 사용 예시 import React, { useState } from 'react'; //useState가 hook function Example() { // "count"라는 새 상태 변수를 선언합니다 const [count, setCount] = useState(0); //useState는 중복하여 호출가능(각자 독립된 state를 가짐) const [fruit, setFruit] = useState('banana'); const [todos, setTodo...