3. React Hook

• React Hook 이란

• Hooks

  • useState

  • useEffect

  • useContext

  • useRef

  • useLayoutEffect

• React StrictMode란

React Hooks

기존 클래스 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있음

이전 방식의 문제점

• 컴포넌트 사이에서 상태 로직을 재사용하기 어려움

  • 컴포넌트 간에 재사용 가능한 로직을 붙이는 법을 제공하지 않아 render props나 HOC, Higher Order Component(고차 컴포넌트) 같은 패턴을 사용했음

  • 이런 방법은 Wrapper Hell을 만들 가능성이 높으며 코드의 추적을 어렵게 만듦

  • Hook은 컴포넌트로부터 상태 관련 로직을 추상화할 수 있게 해줌

• 컴포넌트가 복잡해짐

  • 상태관련 로직들과 사이드이펙트가 있는 컴포넌트들은 분리하기가 어렵고 컴포넌트의 재사용을 어렵게 만듦

  • Hook을 통해 서로 비슷한 것을 하는 함수들로 컴포넌트를 나눌 수 있음

• Class는 혼란스러움

  • 리액트에서 Class를 사용하는 것은 자바스크립트의 this에 대한 이해가 필요

  • Class 사용을 위해 이벤트 핸들러가 등록되는 방법도 이해해야함

  • Hook은 Class 없이 리액트 기능을 사용하는 방법을 제시

render props : 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 테크닉

고차 컴포넌트 : 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수

Hook이 가져온 변화

• 과거에는 상태를 가진 컴포넌트는 class 컴포넌트로 만들고 나머지 컴포넌트만 함수 컴포넌트로 만들었으나 이제는 모두 함수 컴포넌트로 만들 수 있음

• 컴포넌트가 상태를 관리하고 있는지 신경쓸 필요가 없고 복잡한 요소는 전부 Hook으로 격리, 재사용 가능

useState

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

• 상태값과 그 값을 갱신하는 함수 반환

• 최초 상태값은 함수의 인자 값

• setState 함수는 상태를 갱신하는데 사용

  • 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록

  • 다음 리렌더링 시에 useState를 통해 반환받은 첫번째 값은 항상 갱신된 최신 state

• setState는 현재 state을 바꾸지 않음. 다음 렌더링에서 state 값이 바뀌어 있음

useEffect

• 렌더링 이후 해야할 일(=React의 외부와 관련된 일) 지정

• 의존성 배열을 통해 언제 실행할지 지정가능(의존성이 변경될때마다 실행)

• 렌더링마다 실행

• 리턴값으로 종료시(컴포넌트 언마운트시) 실행할 작업을 지정 가능(clean-up method)

• 의존성 배열이 비어있으면 최초 한번만 실행됨

Strict Mode

Side effect 검사를 위해 effect를 두 번씩 실행