React, Hook란

Hook ?

 

https://ko.reactjs.org/docs/hooks-state.html

 

 

Hook은 React 16.8버전에 새로 추가되었습니다.

Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다.

 

Hook

 

함수형 컴포넌트는 렌더링할때마다 내부의 것들을 기억하지 못한다.

다시 생성, 초기화 해야한다. (변수, 함수 등)

 

내부의 것들을 유지하기 위해서 hook이 등장했다 - useXXX

 

 

* 웹 스토어에서 React Developer Tools (Chrome에 추가)

 

 

 

값을 확인 할 수 있다.

 

 

---

useState

 

값이 유동으로 변할 때

const [상태데이터, 상태데이터의 값을 변경해주는 함수] = React.useState(초기값);

 

 

useRef

 

리액트에서 제공하는 대표적인 훅 중 하나이다.

 

JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.

 

리액트에서는 직접 DOM 요소에 접근해야 할 때, useRef 훅을 사용하여 DOM 요소에 직접 접근이 가능하다.

 

useRef 훅이 반환하는 ref 객체를 이용해서 자식 요소에 접근이 가능하다.

 

input태그와 같이 사용자가 값을 직접 입력하는 html태그에 직접적으로 접근하여 값을 가져오는 것을 가능하게 한다.

 

 

리액트 컴포넌트는 State가 변할 때마다 다시 렌더링이 되면서 컴포넌트 내부 변수들이 초기화 된다.

하지만 Ref안에 있는 값은 아무리 변경해도 컴포넌트는 다시 렌더링 되지 않는다.

 

즉, State 대신 Ref를 사용한다면 불필요한 렌더링을 막을 수 있다.

 

또한 컴포넌트가 아무리 렌더링이 되어도 Ref안에 저장되어 있는 값은 변화되지 않고 그대로 유지 된다.

그래서 렌더링을 발생시키지 말아야 하는 값을 다룰 때 정말 편리하다.

 

Ref 객체 만들기

const nameRef = useRef();

 

선택하고 싶은 DOM에 속성으로 ref 값을 설정

<input ref = { nameRef } />

 

Ref 객체의 current 값은 우리가 선택하고자 하는 DOM을 가리킨다.

그리고 포커싱을 해주는 DOM API focus()를 호출한다.

 

 

useEffect

 

useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수

 

useEffect는 콜백 함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작시킬 수 있다.

 

렌더링 후 useEffect는 무조건 한번은 실행된다.

 

[형식]

① 컴포넌트가 나타날 때 딱 1번만 함수가 호출

useEffect( () => {

}, [ ]);

 

② 특정 props가 바뀔 때마다 함수가 호출

useEffect( () => {

}, [ props ]);

 

useEffect 라는 Hook을 사용하여 할 수 있는 3가지 동작

1. 컴포넌트가 마운트 됐을 때 (처음 나타났을 때)

2. 언 마운트 됐을 때 (사라질 때)

3. 업데이트될 때 (특정 props가 바뀔 때)

 

[ ]로 설정하면 컴포넌트가 처음 나타날 때만 useEffect에 등록한 함수가 호출 한다.

 

useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부른다.

cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하면 되는데,

[ ] 안에 내용이 비어 있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다.

 

 

실행하면 콘솔창에 UseEffect는 왜 두번 실행되는걸까?

 

[해결 방법]

index.jsp

=> <React.StrictMode> 부분을 주석으로 처리