[REACT] HOOKS

 

 

Hooks : 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 하게 해 줌

- useState : 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줌

- useEffect : 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할 수 있게 해줌

  -> componentDidMount + componentDidUpdate 

- useConext : 함수형 컴포넌트에서 Context를 보다 쉽게 사용 가능

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

- useMemo : 함수형 컴포넌트 내부에서 발행하는 연산을 최적화 할 수 있게 해줌

- useCallback : 이벤트 핸들러 함수를 필요할 때만 생성

- useRef : 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해줌

 

---

 

 

useState

- 상단에서 import 구문을 통해 불러와서 사용

const [value, setValue] = useState(0);

-> useState(0) : 카운터의 기본 값을 0으로 설정하겠다

-> [value, setValue] : [상태 값, 상태를 설정하는 함수]

-> setValue(value + 1) : 전달받은 파라미터(value + 1)로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링됨

 

- Counter.js : useState 사용

import React, { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b> 입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

 

- info.js : useState를 여러번 사용

import React, { useState } from 'react';

const Info = () => {
  const [name, setName] = useState('');
  const [nickname, setNickname] = useState('');

  const onChangeName = e => {
    setName(e.target.value);
  };

  const onChangeNickname = e => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임: </b> {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

 

 

---

 

 

useEffect

- info.js : 위의 info.js에 useEffect 적용

import React, { useState, useEffect } from 'react';

const Info = () => {
  const [name, setName] = useState('');
  const [nickname, setNickname] = useState('');
  
  useEffect(() => {
    console.log('렌더링이 완료되었습니다!');
    console.log({
      name,
      nickname
    });
  });

  const onChangeName = e => {
    setName(e.target.value);
  };

  const onChangeNickname = e => {
    setNickname(e.target.value);
  };

  return (
    (...)
  );
};

export default Info;

 

- 마운트 될 때만 실행하고 싶을 때

-> 함수의 두 번째 파라미터를 비어있는 배열을 넣어주면 됨

useEffect(() => {
  console.log('마운트 될 때만 실행됩니다.');
}, []);

 

- 특정 값이 변경 될 때만 실행하고 싶을 때

// class형 컴포넌트
componentDidUpdate(prevProps, prevState) {
  if (prevProps.value !== this.props.value) {
    doSomething();  
  }
}

// 함수형 컴포넌트
useEffect(() => {
  console.log(name);
}, [name]);

- Info.js에 적용

import React, { useState, useEffect } from 'react';

const Info = () => {
  const [name, setName] = useState('');
  const [nickname, setNickname] = useState('');
  
  useEffect(() => {
    console.log('effect');
    console.log(name);
    return () => {
      console.log('cleanup');
      console.log(name);
    };
  });

  const onChangeName = e => {
    setName(e.target.value);
  };

  const onChangeNickname = e => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임: </b> {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

 

 

---

 

 

useContext

- ContextSample.js

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('black');
const ContextSample = () => {
  const theme = useContext(ThemeContext);
  const style = {
    width: '24px',
    height: '24px',
    background: theme
  };
  return <div style={style} />;
};

export default ContextSample;

 

 

---

 

 

useReducer

- 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있음

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

-> useReducer(reducer, { value: 0 }) : useReducer(리듀서 함수, 해당 리듀서의 기본 값)

-> state : 현재 가리키고 있는 상태

-> dispatch : 액션을 발생시키는 함수

 

- Counter.js : useReducer 적용

import React, { useReducer } from 'react';

function reducer(state, action) {
  // action.type 에 따라 다른 작업 수행
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      // 아무것도 해당되지 않을 때 기존 상태 반환
      return state;
  }
}

const Counter = () => {
  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 Counter;

 

- input 상태 관리

-> info.js

import React, { useReducer } from 'react';

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value
  };
}

// useState 여러번 사용
//const Info = () => {
//  const [name, setName] = useState('');
//  const [nickname, setNickname] = useState('');
//
//  const onChangeName = e => {
//    setName(e.target.value);
//  };
//
//  const onChangeNickname = e => {
//    setNickname(e.target.value);
//  };

// useReducer 사용
const Info = () => {
  const [state, dispatch] = useReducer(reducer, {
    name: '',
    nickname: ''
  });
  const { name, nickname } = state;
  const onChange = e => {
    dispatch(e.target);
  };

  return (
    ...
  );
};

export default Info;

 

 

---

 

 

useMemo

- average.js

-> input 내용이 수정 될 때도 getAverage 함수가 호출됨 - 낭비

import React, { 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 = e => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  };

  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> {getAverage(list)}
      </div>
    </div>
  );
};

export default Average;

 

- Average.js : useMemo 적용

-> 렌더링 하는 과정에서 특정한 값이 바뀌었을 때만 연산을 실행

-> 원하는 값이 바뀐 것이 아니라면, 이전에 연산했던 결과를 다시 사용

import React, { useState, useMemo } 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 = e => {
    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> {getAverage(list)} */}
        <b>평균 값:</b> {avg}
      </div>
    </div>
  );
};

export default Average;

 

 

---

 

 

useCallback

 const onChange = useCallback(e => {
    setNumber(e.target.value);
  }, []);

-> useCallback(( ) => { }, [ ]) : useCallback(생성해주고 싶은 함수, 배열)

    --> 배열 : 어떤 값이 바뀌었을 때 함수를 새로 생성하주어야 하는지 명시해줘야함

-> 함수 내부에서 기존의 상태값을 의존해야 할 때는 꼭 두번째 파라미터 안에 포함해줘야함

 

- Average.js

import React, { useState, useMemo, useCallback } 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 = useCallback(e => {
    setNumber(e.target.value);
  }, []); // 컴포넌트가 처음 렌더링 될 때만 함수 생성
  
  const onInsert = useCallback(e => {
      const nextList = list.concat(parseInt(number));
      setList(nextList);
      setNumber('');
    }, [number, list] ); // number 혹은 list 가 바뀌었을 때만 함수 생성

  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 VS useMemo

-> 숫자, 문자열, 객체처럼 일반 값을 재사용하기 위해서는 useMemo

-> 함수를 재사용하기 위해서는 useCallback

useCallback(() => {
  console.log('hello world!');
}, [])

useMemo(() => {
  const fn = () => {
    console.log('hello world!');
  };
  return fn;
}, [])

 

 

---

 

 

useRef

- Average.js

import React, { useState, useMemo, useRef } 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 inputEl = useRef(null);

  const onChange = useCallback(e => {
    setNumber(e.target.value);
  }, []); // 컴포넌트가 처음 렌더링 될 때만 함수 생성
  
  const onInsert = useCallback(e => {
      const nextList = list.concat(parseInt(number));
      setList(nextList);
      setNumber('');
      inputEl.current.focus();
    }, [number, list]); // number 혹은 list 가 바뀌었을 때만 함수 생성

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

  return (
    <div>
      <input value={number} onChange={onChange} ref={inputEl} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균 값:</b> {avg}
      </div>
    </div>
  );
};

export default Average;

 

- 로컬 변수 사용

-> 로컬 변수 : 렌더링이라는 관계 없이 바뀔 수 있는 값

-> ref 안의 값은 바뀌어도, 컴포넌트가 렌더링 되지 않음

-> 렌더링과 관련 되지 않은 값을 관리 할 때만 사용히는 방식

// class형 컴포넌트
import React, { Component } from 'react';

class MyComponent extends Component {
  id = 1
  setId = (n) => {
    this.id = n;
  }
  printId = () => {
    console.log(this.id);
  }
  render() {
    return (
      <div>
        MyComponent
      </div>
    );
  }
}

export default MyComponent;


// 함수형 컴포넌트
import React, { useRef } from 'react';

const RefSample = () => {
  const id = useRef(1);
  const setId = (n) => {
    id.current = n;
  }
  const printId = () => {
    console.log(id.current);
  }
  return (
    <div>
      refsample
    </div>
  );
};

export default RefSample;