Hooks

오늘은 리액트 hooks에 대해 알아보자

Hooks 는 리액트 16.8버전부터 업데이트된 신기능이라고 할 수 있다.

이전 리액트의 함수형 컴포넌트는 사용할 수 있는 기능이 많지 않았다... 리액트 생명주기를 고려하지 못했다고 한다!!

여기서 리액트 생명주기란?

리액트 컴포넌트가 실행되고(mount / componentDidMount), 사용되고 업데이트되며(componentDidUpdate), 컴포턴트가 언마운트(componentWillUnmount) 되는 과정을 이야기한다. 다시 말해 컴포넌트가 실행되고, 사용되고, 제거되는 것을 의미한다.

다시 hooks로 돌아와보자. 업데이트 되기 전 함수형 컴포넌트는 이렇듯 실행, 사용, 업데이트, 제거가 사용 가능해졌다!
hooks를 사용하면 클래스 컴포넌트를 사용하는 것 보다, 훠얼씬 간결하게 상태관리가 가능하다..!
*hooks 에서는 useEffect를 활용하여 생명주기를 사용한다!

그럼 본격적으로 hooks를 사용해볼까?

1. 먼저 리액트에서 useState를 사용할 것임을 명시해준다

import {useState} from "react"; 

2. 그 다음 두 가지 상태를 설정해준다
   • setName 값이 변경되는 것을 확인하여 name 값이 바뀌도록 선언해준다
     name = 상태, setName = 변경될 상태 라고 이해하면 될 것 같다)
   • useState()안에 초기 값을 설정해준다. 초기값으로 빈문자열을 넣었다.

const [name, setName] = useState(""); 

3. 원래는 먼저 만들어주었어야 하는데.. 훅을 사용하기 위해 컴포넌트를 만들어보자.. 그리고 안에 넣어주자

   export default function App () { 
   const [userData, setUserData] = useState("바나나"); 
   return(){ 
   <div> 
     <p>안녕하세요{name}입니다!</p> 
   </div> } 
   }

이렇게 설정해주면 "안녕하세요 바나나입니다!"라고 렌더링된다 :) 신기하쥬?