1. 리액트 Hook이란?
드림 코딩 리액트 강의를 들으면서 컴포넌트로 쓸 수 있는 두 가지 방식을 배웠는데 첫 번째는 class 두 번째는 함수형이다.
그중에서 리액트 Hook은 class의 this개념이 사라지기 때문에 코드가 더 간결해질 뿐더러 가독성도 더 좋아서 class보단 많이 쓰이기 떄문에 리액트 Hook에 대해서 남기기로 했으며 아래는 리액트 Hook이 나온 배경이다.
"React Hooks은 리액트의 새로운 기능으로 React 16.8 버전에 새로 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다.
예를 들면 function component에서 state을 가질 수 있게 된 것
만일 앱을 react hook을 사용하여 만든다면 class component, render 등을 안 해도 된다는 뜻이다.
모든 것은 하나의 function이 되는 것 함수형 프로그래밍이 가능해지는 것"
2. 리액트 Hook의 실사용
2-1. UseState
위와 같은 장점 때문에 리액트 Hook을 더 많이 사용하고 실제로 class형보단 코딩이 더 간결하며 리액트 Hook에서 상태를 관리하는 법은 아래와 같다.
use함수를 보통 사용하는데 class에서 state를 관리할 때는 state를 따로 선언 후 this.setState로 state를 리셋시킨 후 rendering을 거쳐서 화면에 출력했다면 리액트 Hook에서는 useState(x) 함수를 선언하면 x라는 값을 초기값으로 설정 후 count와 setCount를 둘 다 선언하는데 위의 함수에서는 handleIncrement가 실행될 때 count를 1씩 증가한다.
위의 class에서 state가 새로 업데이트 될 때마다 화면을 리셋시켜주기 위해서는 state를 새로 또 선언해주고 이제 밑에 rendering부분에서도 this.hadnleIncrement, this.count등등 this를 게속 붙여줘야한다는 단점이 명확히 보인다.
하지만 reactHook은 내용이 업데이트 될떄마다 함수속에 있는 내용이 모두선언되고 이떄 useState(0)의 초깃값으로 게속 선언된다고 생각할수도 있지만 useState가 업데이트 될떄마다 아무리 많이 호출되도 component의 state는 따로 저장소에 저장하고 있기 떄문에 걱정할필요 없다.
2-2. useEffect
useEffect란 리액트 컴포넌트가 렌더링 될떄마다 특정 작업을 실행할 수 있는 Hook이다.
이게 함수형에서는 useEffect가 처음 mount됐을떄 한번 업데이트될떄마다 unmount될떄 update 되기 직전에 이럴 때 호출되는데 자세한 건 아래의 블로그가 정말 잘 나와있다.
https://xiubindev.tistory.com/100
React Hooks : useEffect() 함수
useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정..
xiubindev.tistory.com
3. 마지막으로
이전에 Vegopa프로젝트를 할 때 usestate가 뭔지 use함수에 대해서 전혀 몰랐었는데 이제 이걸 배우고 나선 확실히 알겠다.
이전 Vegopa프로젝트 할떄 signin과 login을 할떄 인풋 값을 받아서 안에 component가 바뀌었기 때문에 이걸 사용했었구나 하고 생각이 들었다.