라벨이 Functional Component인 게시물 표시

[React] Hooks 정리

이미지
React Hooks는 리액트에서 새로 도입된 기능으로 class형 컴포넌트가 아닌 함수형 컴포넌트에서도 상태를 관리할 수 있도록 업데이트 되었다. 뿐만아니라 렌더링 직후 작업을 하는 componentDidMount와 같은 기능을 함수형 컴포넌트에서도 사용할 수 있게 해주었다. 즉 기존에  클래스형 컴포넌트에서만 가능하던  생명주기를 hooks를 이용하여 함수형 컴포넌트에서도 사용할 수 있게 되었다. # useState useState을 사용하여 함수형 컴포넌트에서도 클래스형 컴포넌트처럼 상태를 지닐 수 있게 되었다. import React , { useState } from 'react' const Counter = () => { const [ value , setValue ] = useState ( 0 ); const onPlusHandler = () => { setValue ( value + 1 ); } const onMinusHandler = () => { setValue ( value - 1 ); } return ( < div > < p > 카운터 < b > { value } </ b ></ p > < button onClick = { onPlusHandler } > plus </ button > < button onClick = { onMinusHandler } > minus </ button > </ div > ) } export default Counter useState을 사용하기 위해서는 useState를 import 해야 한다. 그리고 state 역할을 대신하는 다음의 코드를 보자. const [ v