리액트 공부2 React Hooks

React Hooks

Hook API

기본 Hook

• useState (화면에 값이 있고 그 값을 갱신하는 함수형 컴포넌트 코드)

• useEffect

  useEffect의 첫번째 인자는 함수

  해당 함수 내에서 side effect를 실행

  컴포넌트 생성 후 처음 화면에 렌더링(표시)
  컴포넌트에 새로운 props가 전달되며 렌더링
  컴포넌트에 상태(state)가 바뀌며 렌더링
  이와 같이 매 번 새롭게 컴포넌트가 렌더링될 때 Effect Hook이 실행

  조건부 effect 발생

  ---

  useEffect의 두번째 인자는 배열 ← 이 배열은 조건을 담고 있다. 조건? 어떤 값의 변경이 일어날 때 의미

  해당 배열엔 어떤 값의 목록이 들어간다. 종속성 배열

  useEffect(함수, [종속성1, 종속성2, ...])

  useEffect의 두번째 인자는 종속성 배열입니다. 배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫번째 인자의 함수가 실행

  배열 내의 어떤 값이 변할 때에만, (effect가 발생하는) 함수가 실행

• useContext

추가 Hooks

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

Hook을 쓸 때 주의할 점

• 최상위에서만 Hook을 호출합니다.
• React 함수 내에서 Hook을 호출합니다.

컴포넌트 내에서 AJAX 요청

목록 내 필터링 구현?

1. 컴포넌트 내에서 필터링: 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법
2. 컴포넌트 외부에서 필터링: 컴포넌트 외부로 API 요청을 할 때에, 필터링한 결과를 받아오는 방법 (보통, 서버에 매번 검색어와 함께 요청하는 경우가 이에 해당)