{React} Hooks

hooks는 기존 함수형 컴포넌트에서 할수 없었던 다양한 작업을 할 수 있게 도와준다.

 

1.useState = 상태 관리에 사용

*import* React, { useState } *from* "react";

const Counter = () => {

const [number, setNumber] = useState(0);

*return* (

<div>

<p>

현재 카운터 값은 <b>{number}</b>입니다.{" "}

</p>

<button *onClick*={() => setNumber(number + 1)}>+1</button>

<button *onClick*={() => setNumber(number - 1)}>-1</button>

</div>

);

};

*export* *default* Counter;

useState 파라미터에는 상태의 기본값을 정해준다

위의 경우 0

이 함수가 호출 되면 배열을 반환을 해주고 배열의 첫번째 원소는 상태 값 두번째 원소는 상태를 설정하는 함수를 반환한다.

 

2. UseEffect

클래스형 컴포넌트의 componentDidMount 와 ComponentDidUpdate를 합친 형태

즉 컴포넌트가 렌더링 될때마다 특정 작업을 수행하도록 설정해준다.

userEffect는 기본적으로 렌더링 된 직후마다 실행되며 두번재 파라미터에 따라 실행 조건이 달라진다.

만약 컴포넌트가 언마운트 되거나 실행직전에 무언가 설정을 해주고 싶다면 항상 cleanup함수를 반환해주어야 한다.

 

3.UseReducer

useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 할 때 사용한다.

리듀서는 현재 상태 그리고 업데이트를 위해 필요한 action값을 전달받아 새로운 상태를 반환한다.

function reducer(state,action){

return {};

}

 

*useReducer를 이용한 counter 구현

*import* React, { useReducer } *from* "react";

function reducer(state, action) {

*switch* (action.type) {

*case* "INCREMENT":

*return* { value: state.value + 1 };

*case* "DECREMENT":

*return* { value: state.value - 1 };

*default*:

*return* state;

}

}

const CounterHook = () => {

const [state, dispatch] = useReducer(reducer, { value: 0 });

*return* (

<div>

<p>

현재 카운터 값은 <b>{state.value}</b>입니다.{" "}

</p>

<button *onClick*={() => dispatch({ type: "INCREMENT" })}>-1</button>

<button *onClick*={() => dispatch({ type: "DECREMENT" })}>+1</button>

</div>

);

};

*export* *default* CounterHook;

useReducer의 첫번째 파라미터로는 리듀서 함수, 두번째에는 해당 리듀서의 기본값을 넣어준다.

이 hook을 사용시 state값과 dispatch 함수를 받아오고

state : 현재 상태 값

dispatch : 액션을 발생시키는 함수 를 넣어준다

 

4. UseMemo

함수형 컴포넌트 내부에서 발생하는 연산을 최적화가 가능하다

렌더링 과정에서 특정 갑싱 바뀌었을 때만 연산을 실행하고 원하느느 값이 안바뀌면 이전에 연산한 결과를 다시 사용하는 방식

 

*import* React, { useMemo, useState } *from* "react";

const getAverage = (numbers) => {

console.log("평균값 계산중...");

*if* (numbers.length === 0) *return* 0;

const sum = numbers.reduce((a, b) => a + b);

*return* sum / numbers.length;

};

const Average = () => {

const [list, setList] = useState([]);

const [number, setNumber] = useState("");

const onChange = (e) => {

setNumber(e.target.value);

};

const onInsert = () => {

const nextList = list.concat(parseInt(number));

setList(nextList);

setNumber("");

};

const avg = useMemo(() => getAverage(list), [list]);

*return* (

<div>

<input *value*={number} *onChange*={onChange} />

<button *onClick*={onInsert}>등록</button>

<ul>

{list.map((value, index) => (

<li *key*={index}>{value}</li>

))}

</ul>

<div>

<b>평균값:</b> {avg}

</div>

</div>

);

};

*export* *default* Average;

 

UseCallback

useMemo와 비슷한 함수

주로 렌더링 성능을 최적화 해야할 때 사용한다.

이 hook을 사용하면 이벤트 헨들러 함수를 필요할 때만 생성가능하다

 

const onChange = useCallback(e => {

setNumber(e.target.value);

},[]) //컴포넌트가 처음 렌더링 될때만 함수 생성

const onInsert = useCallback(() => {

const nextList = list.concat(parseInt(number));

setList(nextList);

setNumber("");

}, [number, list]); //number와 list가 바뀔때만 함수 생성

useCallback은 첫번째 파라미터에는 생성하고 싶은 함수 두번재 파라미터에는 배열을 넣는다

이때 배열에는 생성 조건을 명시해준다.