Archive

React.js Hooks (계속 업뎃 예정)

13 Mar 2021 | React

React.js Hooks

  1. useMemo

    • props가 바뀌지 않았다면, 리렌더링을 막아 성능을 최적화 해줄 수 있는 녀석
    • 리렌더링이 필요할 때만 되도록 설정할 수 있다
    • 이것을 남용하면 불필요한 props 비교만 하게 되므로 렌더링 최적화가 필요할 때만 사용하도록 한다
    import { useMemo } from 'react';
   
// 값을 받아서 바꾸는 함수가 있다고 하자
const changeValue = (value) => {
    return value + 1;
}
// a의 값이 바뀔때에만 changeValue가 호출된다
const xxx = useMemo(() => changeValue(a), [a]);


  1. useCallback

    • 이전에 만든 함수를 재사용할 때 쓴다
    • 두 번째 인자는 의존성으로 deps를 배열 [] 안에 넣어주는데 의존하는 상태값이 없다면 빈 배열을 넣어준다
    import { useCallback } from 'react';

const onChange = useCallback((value) => {
    setValue(value+1);
}, [value]);

/*
useCallback의 두번째 인자로 준 값이 바뀔때마다 callback 함수를 만들고
값이 같다면 기존에 있던 함수를 재사용한다
*/


  2. useReducer

    • 컴포넌트의 state 업데이트 로직을 컴포넌트에서 분리해서 바깥에서 관리할 수 있다
    • 여기에 action과 dispatch라는 개념이 등장한다
    • 이벤트 함수에서 action.type을 reducer에게 dispatch해준다
    • reducer는 state,action을 받아서 action.type에 맞는 로직(state 업데이트)을 실행한다
    const reducer = (state, action) => {
    switch(action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    };
};

export default reducer;

    // state 초기화
const init = {
    number: 0,
};

// useReducer의 첫 번째 인자로 reducer 함수를,
// 두 번째 인자로 default state를 넣어준다
const [state, dispatch] = useReducer(reducer,init);

// 이벤트 함수 실행시 dispatch에 의해 action type이 전달된다
const onChange = () => {
    dispatch({
        type: 'INCREMENT',
    });
};
// state의 사용
<input onChange={onChange} value={state.number} />


  3. Custom Hook

    • input태그의 onChange 등 자주 사용하는 기능들을 custom hook으로 만들어 재사용 할 수 있다
    import { useState, useCallback } from 'react';

const useInputs = (initialForm) => {
    const [form, setForm] = useState(initialForm);
    const onChange = useCallback((e) => {
        const {name, value} = e.target;
        setForm((form) => {
            ...form,
            [name]: value,
        });
    }, []); // 의존하는 상태값이 없으므로 빈 배열
    const reset = useCallback(() => {
        setForm(initialForm, [initialForm]);
        // initialForm에 의존하므로 적어야한다
    });
    return [form, onChange, reset]; // 배열 형태로 반환
};

export default useInputs;

    import useInputs from 'path/useInputs';

// useInputs의 initialForm에 초기 상태값 전달
const [form, onChange, reset] = useInputs({
    name: '',
    email: '',
});

// useInputs에서 만든 state에서 구조분해 할당
const { name, email } = form;


  4. Hooks로 Context API 사용하기

    import { createContext } from 'react';
   
// context를 생성한다 (함수형, 클래스형 동일)
const ctx = createContext({
    isLogined: false,
    id: '',
});
   
export default ctx;

    // 사용하고자 하는 컴포넌트에서 context를 사용한다
import { useContext } from 'react';
import ctx from 'path/ctx';
   
const Bottom = () => {
    // context의 사용
    const { isLogined, id } = useContext(ctx);
    // ...
}



    const Ctx = createContext();
   
// provider를 이용해서 값을 전달해도 된다
<Ctx.Provider value=>
</Ctx.Provider>


  5. useParams

    • <Route> 컴포넌트의 path 속성에서 URL을 파라미터로서 값을 받는 객체를 useParams()를 통해 접근 가능
    • 파라미터 개수는 여러개여도 상관없다. ex)<Route path="/:id/:name/:title" />
    import React from 'react';
import { Route, Switch } from 'react-router-dom';
   
function app() {
  return (
    <Switch>
      <Route exact path='/' component={PostIndex} />
      <Route exact path='/posts/:id' component={PostShow} />
    </Switch>
  );
}
export default app;



    import React from 'react';
import { useParams } from 'react-router-dom';
   
function postShow() {
  let { id } = useParams();
  return <div>{id}</div>;
}
   
export default postShow;
    • app 컴포넌트의 id 파라미터를 PostShow에서 비구조화 할당으로 id 로 받을 수 있다


  6. continue..


참고 자료

reactjs.org - 공식홈페이지

벨로퍼트와 함께하는 모던리액트

Related Posts