React Hooks

React Hooks

• ReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기능

 

React Hooks의 필요성

• Class Component로 사용되어 온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해서 개발됨

 

React Component

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

 

리액트의 생명주기

• 리액트의 생명주기를 함수형 컴포넌트에서는 사용을 못했기 때문에 함수형 컴포넌트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 사용함
• React 16.8 Hooks 업데이트로 함수형 컴포넌트에서도 생명주기를 사용할 수 있기 때문에 데이터를 가져오고, 컴포넌트를 시작하자마자 API도 호출하는 등 많은 부분을 할 수 있게 됨
• 생명주기를 위해 componentDidMount, componentDidUpdate, componentWillUnmount 모두를 Hooks에서는 useEffect를 이용해서 처리해줌

 

HOC(Higher Order Component)

• 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수
• React Hooks에서는 HOC 대신에 따로 Custom Hooks를 이용해서 컴포넌트를 만들어서 처리를 해주기 때문에 Wrapper가 많아지는 일을 방지할 수 있음

 

Hooks에서 state를 업데이트 하기

• setName을 이용해서 할 수 있음

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