React Hooks

React Hooks란 무엇인가?

React Hooks는 ReactConf 2018에서 발표된 class없이 state를 사용할 수 있는 새로운 기능입니다.

 

React Hooks이 필요한 이유?

React Hooks는 주로 Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해서 개발되었습니다.

React Hooks는 Functional Component를 사용합니다.

Class Component	Functional Component
더 많은 기능 제공	적은 기능 제공
더 긴 코드 양	짧은 코드 양
더 복잡한 코드	더 심플한 코드
더딘 성능	더 빠른 성능

 

React 생명주기를 기존에 함수형 컴포넌트에서 사용을 못했었습니다.

React 16.8 Hooks 업데이트로 변경되어서 사용할 수 있게 되었습니다.

 

Hooks의 장점

1. 코드 간결
2. useEffect 안에서 기존의 생명주기 모두 처리할 수 있음
3. HOC컴포넌트를 Custom React Hooks로 대체함으로써 wrapper컴포넌트 줄임

HOC(Higher Order Component)란?

화면에서 재사용 가능한 로직만을 분리해서 component로 만들고, 재사용 불가능한 UI와 같은 다른 부분들을 parameter로 받아서 처리하는 방법입니다.

 

Hooks에서 state를 업데이트

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

state를 정의해줄 때 위와 같이 정의합니다.

setName을 이용해서 state를 업데이트 시켜줄 수 있습니다.