React Hook (중요)

리액트 훅에 대해서 알아보면 앞에서 한 것들을 간단하게 리액트 훅으로 변경하려고 한다.

먼저 simpleHabit.jsx라는 파일을 만들어 놓고 간단하게 이름과 count만 할 수 있게 만든다.

 

index.js에 App 대신에 SimpleHabit을 추가했다.

index.js에 App대신 SimpleHabit을 넣음 

SimpleHabit 완성본

이름과 카운트만 할 수 있게 리액트 훅으로 만듬

리액트 훅이라는 것은 기존의 함수형 컴포넌트에서 state와 라이프사이클 메소드를 잘 이용할 수 있게 만들어진 것이다.

최신버전에서 추가가 되었고 클래스 컴포넌트를 리액트 훅으로 변경하면 rsi를 이용해서 함수형으로 컴포넌트를 만들 수 있다.

rsi를 이용해서 골격만듬

코드가 많을 때 JSX르 리턴 못하기 때문에 코드블럭을 추가해준다. 리턴한거 복사해서 가져온다.

그리고 리액트 훅에서 state를 쓴다는 것은 useState라는 API를 이용하면 된다. 변수를 선언하는데 count와 count를 업데이트 할 수 있는 setCount를 정의한 다음에 리액트에서 제공하는 useState를 이용하면 된다. 그러면 리액트에서 useState가 import가 된다. 초기값도 작성해준다.

 

클래스에서 쓰는거랑은 다르지만 변수를 선언할 때 count와 setCount 두 개를 선언해 놓으면 useState를 호출 하게 되면 리액트에서 두 가지를 리턴 해준다. 바로 실제의 state값과 카운트를 업데이트 할 수 있는 함수 setCount 두 개를 리턴해준다.

count와 setCount 두 개를 선언

이렇게 리액트에서 제공하는 useState라는 함수 API를 통해서 state를 설정하고 또 state를 업데이트할 수 있는 이러한 함수를 받아올 수 있다.

 

state를 설정하고(보통 state는 제일 위에다가 선언한다.) 로컬변수인 handleIncrement라는 지역변수를 arrow function으로 나타낸다. 그리고 setCount를 이용하여 this를 다 지워주고 코드를 작성한다.

setCount를 이용하여 this 다 지우고 간단하게 작성

클래스가 만들어지면 클래스 안에있는 멤버변수들은 한 번만 만들어진다. state가 변경되거나 props이 업데이트 되면 render 함수만 계속 반복해서 호출이 된다.

멤버변수인 handleIncrement, handleDecrement, handleDelete

props가 호출되면 render 함수만 반복해서 호출이 된다.

만들어진 멤버변수는 한번만 할당이 되어진다. 클래스에서 멤버변수는 클래스가 만들어질 때 한번만 만들어지고 render 함수만 반복적으로 호출되는가 하면, simpleHabit.jsx의 함수는 컴포넌트가 변경이 되면 코드블럭 전체가 반복해서 호출이 된다. function 컴포넌트는 props나 state가 변경이 되면 코드블럭 안에 전체가 반복이 되어지고 지역 변수들 const로 지정된 것들도 계속해서 반복된다. 

 

사용자가 버튼에 onClick에 전달한 콜백함수는 첫 번째 불릴 때 새로운 함수(함수도 오브젝트 중 하나)가 만들어지고

state가 변경이 되어 다시 함수가 호출되면 새로운 오브젝트가 만들어진다. 즉 컴포넌트가 업데이트 될 때마다 반복해서 호출되어진다. 즉, 계속 새로운 것들을 만들고 새롭게 값을 계산하고 사용자가 행하는 모든 비즈니스 로직들이 수행된다.

{  } 안에 있는 코드블럭 전체가 반복해서 호출

useState라는 것은 리액트 훅에서 제공하는 API중에 하나로써 리액트가 알아서 자동으로 기억하고 있다. useState를 계속 많이 호출해도 컴포넌트에 연결된 state는 따로 저장이 되어져 있어서 동일한 값을 받아 오는 것이다.

즉, 리액트 훅은 이러한 API가 많이 있어서 반복해서 코드 블록이 실행 되어져도 동일한 값을 메모리에 저장해놓기 때문에 안전하다.

 

Ref를 사용해서(spanRef를 지정하여 리액트에 있는 createRef를 이용) 알고 싶은 컴포넌트에 연결 할 수 있는데,

spanRef를 이용해서 span에 접근 할 수가 있다. 사용자가 state가 변경이 될 때마다 코드블럭이 계속해서 반복해서 실행될 거고 createRef는 호출 되면서 새로운 레퍼런스를 만들어서 새로운 것을 할당하게 된다.

그래서 반복적으로 만들지 않기 위해서 리액트 훅에서 제공하는게 있는데 useRef라는 것이 있다. createRef처럼 매번 호출할 때마다 새로운 레퍼런스를 만드는 것이 아니고 한 번만 만들고 메모리에 저장해 놓고 다시 그것을 사용한다.

react에서의 useRef

handleIncrement는 함수가 호출 될 때마다 새로운 것이 만들어 지니까 onClick에 계속 새로운 것이 할당된다. 만약에 자식 컴포넌트라면 onClick의 prop에 새로운 콜백이 전달되면 memo를 써도 props 자체가 함수 자체가 변경이 되기 때문에 계속 업데이트 되는 악영향이 있다.

그것을 방지하고자 쓸 수 있는 useCallback라는 것이 있는데, 이것을 하면 리액트가 자동적으로 캐시를 해서 동일한 콜백함수를 전달하는 효과가 있다.

리액트 공식사이트에 가서 리액트 Hooks에 대한 챕터를 한번 살펴보도록 하자. 기본적인 예제인 useState 쓰는 거와

영상도 시간나면 시청하자.  

react hook에 대한 설명 (function에 state를 쓸 수 있고 제공되는 API를 써서 함수 안에서 간단하게 쓸 수 있음) this, binding 안 써도 되고, 코드 중복 줄일 수 있고 

 

react훅에서의 useEffect => componentDidMount와 componentDidUpdate를 결합한 것이다.

마지막으로 리액트 사이트에서 MAIN CONCEPTS 위주로 살펴보고 공부해보자...

 

 

 

 

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)

https://reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React