react 학습노트 | 3.Hooks

Hooks

• react의 life cycle을 알려면 Hooks를 알 필요가 있다.
• Hooks에 대해 알아보자.

---

Hooks의 종류

• useState
• useEffect
• useCallback
• useMemeo, useContext, useRef, useLayoutEffect
• 위와 같이 10개 정도가 있는데, 그중 상위 3개정도가 주로 사용된다. 나머지는 필요할때 찾아서 쓰면된다.

---

useState

• component의 State를 생성하는 Hook

  const [value, setValue] = useState(0) //인자는 초기값
  // 첫번째 요소(value) => state 값
  // 두번째 요소(setValue) => state를 set 해주는 setter 함수

useEffect

• component가 랜더링 될때 현재 상태 변화에 따라 조건적으로 특정 작업을 실행하기 위한 Hook
  • 처음 랜더링 될때
  • 컴포넌트가 언마운트 될때
    • cleanup 함수를 이용해서 component unmount시 자원, 이벤트 등을 정리해준다.

      useEffect(() => {
      ...
      return () => {
      ... // cleanup 함수. component 가 unmount될때 실행됨
      }
      },[])

• 상태가 변할때
  • useEffect()함수에 인자로 상태 변화를 감지할 state를 배열로 전달한다.
  • 이 경우 클린업 함수는 상태 변화를 감지하고 useEffect를 재실행하기 직전에 실행됨.

    const [value, setValue] = useState(0) 
    useEffect(() => {
    ...
    return () => {
    ... // cleanup 함수. component 가 unmount될때 실행됨
    }
    }, [value])

useCallback

• 리 랜더링 시 기존에 만든 함수를 재생성 하지 않고 재활 용 하기 위해 사용하는 Hooks
• memoization

const fooFun =useCallback(()=>{
  console.log("bar");
})

---

Hooks 사용시 주의사항

• 조건적으로 사용하면 안된다.
• Hooks 는 React Component에서만 사용 가능하다.

---

React의 렌더링 과정

Rerendering

• Component의 상태(state, props)가 변경 되면서 해당 컴포넌트를 다시 실행하여 화면에 그린다는 의미.
• Rerendering시 매번 다른 동작을 하게되고 이를 우리는 life cycle이라고함

React의 Life Cycle

• Class형 과 Function형이 약간 다름
• Class
  1. constructor 실행
     • 최초 실행
       1. getDerivedStateFromProps() 실행 : props로 넘어온 값을 state와 동기화하는 메소드
       2. render method 실행 : 화면에 그릴 JSX를 반환
       3. componentDidMount() 실
     • 업데이트 시
       1. getDerivedStateFromProps()
       2. shouldComponentUpdate() 실행 : 현재 일어난 상태변화를 확인하여 컴포넌트를 다시 랜더링 할지 말지를 결정
       3. componentDidUpdate()
     • 컴포넌트 삭제시
       1. 제거
       2. componentWillUnmount()실행
• function형
  • 최초 실행
    1. 자기자신을 실행하여 JSX를 리턴하고 DOM에 반영
    2. useEffect Hook 실행: componentDidMount, componentDidUnMount, componentDidUpdate()를 커버해줌.
  • 업데이트시
    1. 자기 자신 실행 후 JSX반한
    2. useEffect 실행
  • unmount 시
    1. useEffect만 실행