React Hook 내용 정리

React?

• f(data) = View
• React Element : type과 props를 가지는 객체

react element는 단일 태그로 감싸져있어야 함
<React.Fragment>로 감싸는 방식을 많이 사용한다
<>를 사용해도 됨

React Element는 immutable 하다

ReactDOM.render(
    reactElement,
    containerDOM,
    [callback]
)

ReactDOM.hydrate(
    reactElement,
    containerDOM,
    [callback]
)

hydrate는 render()와 동일하지만 SSR일 때 사용함

React Component의 이해

• 재사용성을 높여주고 기능별 단위를 만들 수 있게 해준다
• f(props) => reactElement

Component 구현 2가지 방법

1. Function Component
2. Class Component: Extends React.Component

props

• props는 read-only
• Array로 React element를 반환하는 경우 key prop을 꼭 추가해야한다
• 태그 내부의 값은 props.children으로 전달

falsy 값중 0은 화면에 render될 수 있으니 Boolean 타입으로 변환이 필요하다

React event handling

• 실제 DOM element의 event handling과 비슷함
• event callback 함수에 전달되는 event 객체는 React에서 합성한 event 객체
• 실제 event 객체 접근하려면 e.nativeEvent 사용
• default 동작을 막기위한 return false 사용 불가
  대안으로 e.preventDefault() 사용
• React의 syntheticEvent
  • event pooling 방식 사용
  • event 유지하고 싶으면 event.persist() 호출

React Hooks

Hooks ?

• functional Component에서 stateful logic을 사용할 수 있게 해주는 함수 모음.
• Component에서 stateful logic을 분리하여 Component는 view render에만 집중할 수 있게 함.

useState

const [state, setState] = useState(initialState);

setState(newState)

• setState(newState) 호출되면 state가 update되고 component가 re-render 된다.

• state : number, string, array, object 등

• setState에 함수를 지정하면 이전값을 받아와서 처리할 수 있음

  • 함수에서 리턴하는 값이 새로운 state 값으로 지정됨
  • 한번에 여러번 setState를 하는 경우에는 함수형으로 처리해야함

    setState(prevState => {
    return newState;
    });

• 초기화에 비용이 많이드는 초기값을 설정하는 경우 함수형으로 초기값을 지정하는 방법을 사용하면 좋음

  const [state, useState] = useState(() => {
    const initialState = someExpensiveComputation(props);
    return initialState;
  })

• state 값의 변경 여부는 Object.js로 비교함

  • 새로운 객체/배열은 다른 reference를 갖기 때문에 다른 state로 인식함
  • 동일 state로 업데이트되면 변경된 것으로 보지 않음

re-render가 발생하는 세가지 경우

• 부모로부터 전달받은 props에 변화가 생길 때
• state가 변경될 때
• context가 변경될 때

Custom Hook도 만들어서 사용할 수 있음

useEffect

• Effect? side effect

useEffect(didUpdate, [dependency]);

• 최초 render 후에 didUpdate 함수 실행되고 dependency에 변경이 발생할 때 didUpdate 함수가 실행된다.

• dependency에 빈 배열을 지정하면 최초 render 후에 한번만 실행되고 그 이후에는 실행되지 않음

• dependency가 없는 경우 render 발생 후에 항상 didUpdate가 실행된다

• 사용처

  • 데이터 가져오기
  • DOM 변경 처리하기
  • 타이머, 로깅

• 컴포넌트 안에서 호출되는 이유

  • props, state 접근성이 좋기 때문

• useEffect는 conditional 하게 호출되게하면 안됨

• 초기화 코드(clear function)는 didUpdate 함수의 리턴값으로 지정하면 됨

  • 다음 didUpdate 함수 실행 전에 초기화 코드가 실행됨

    useEffect(() => {
    const timer = setInterval(updateTime, 1000)
    
    return () => {
        clearInterval(timer)
    }
    })

useMemo

• render 간에 값을 memoize할 때 사용

  const memoizedValue = useMemo(() => {
    // some computation...
    return value;
  }, [dependency])

• dependency에 변경이 발생했을 때만 함수를 실행하여 값을 계산함

useCallback

• render 간에 함수를 memoize할 때 사용

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

• 다음 두 코드는 동일한 기능을 하는 코드임

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

useRef

• DOM 접근에 사용
• render에 영향을 주지 않는 mutable data 관리에 편리

chrome react Profiler에서 실행 시간 확인하여 병목 구간 확인할 수 있음