[리액트] Hooks 정리!

리액트 훅?

리액트 훅은 리액트 버전 16.8에 추가되었다. 훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능이다. 훅을 통해서 함수형 컴포넌트에서도 컴포넌트 상태값을 관리할 수도, 컴포넌트 생명 주기 함수 또한 이용할 수 있게 된다. 

리액트 훅 장점

 - 훅을 사용하게 되면 재사용 가능한 로직을 쉽게 만들 수 있다. 훅은 단순한 함수이므로 함수 안에서 또다른 함수를 호출하게 되어 새로운 훅을 만들 수 있기 때문이다. -> 리액트 내장 훅 + 다른 사람들의 커스텀 훅 = 새로운 훅 탄생

 - 훅을 사용하면 코드 가독성이 더 좋아진다. 훅을 사용하게 되면 같은 로직은 한곳으로 모아 가독성이 좋다. 하지만 기존의 클래스형 컴포넌트의 생명 주기 메소드는 서로 다른 로직이 하나의 메소드에 섞여 있어 가독성이 떨어진다. 같은 로직이 componentDidMount와 componentDidUpdate 메소드에 중복으로 들어가기도 한다.

 

useState를 사용하여 함수형 컴포넌트에 상탯값 추가

const [user, setUser] = useState('user 기본값')

배열의 첫 번째 원소(User)는 상탯값이다. 함수 호출 시 입력한 인수가 초기값으로 사용된다. 배열의 두 번째 원소(setUser)는 상태값을 변경할 수 있는 함수이다.

state는 원시타입 뿐만 아니라 객체로 사용할 수도 있다. 여러개의 useState를 사용할 수도 있지만, 하나의 state에 여러 프로퍼티를 추가해서 두 가지 이상의 상태를 관리할 수도 있다.

  const [state, setState] = useState({
    name: "hyemi",
    nickname: "amy",
  });

 

작성중...