Section2 클라이언트 Ajax 요청

React Hook?

• React 16.8에 추가된 요소, 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.
• Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수
• ❌ class 안에서 동작하지 않는다(class 없이 React 사용 가능)

Hook 사용 규칙?

• 최상위에서만 Hook을 호출해야 한다. (반복문, 조건문, 중첩 함수 내에서 HOOK 실행 ❌)
• React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반 JS 함수에서는 Hook을 호출해서는 안된다.

---

Effect Hook

📖 사전 지식

✅ side effects란?
데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업(다른 컴포넌트에 영향을 줄 수 있고, 렌더링 과정에서는 구현할 수 없는 작업)

---

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다.

예시 코드

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

useEffect가 하는 일?

• React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말한다.
• React는 우리가 넘긴 함수를 기억했다가(effect) DOM 업데이트를 수행한 이후에 불러낸다.
• effect를 통해 문서 타이틀을 지정하고, 이 외에도 데이터를 가져오거나 명령형 API를 불러내는 일도한다.

useEffect를 컴포넌트 안에서 불러내는 이유?

• useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 state변수(prop)에 접근할 수 있게 된다.
• 함수 범위 안에 존재하여 특별한 API 없이도 값을 얻을 수 있다.

useEffect는 렌더링 이후에 매번 수행되는 걸까요?

• 기본적으로 첫번째 렌더링, 이후의 모든 업데이트(props 업데이트, state 업데이트)
• useEffect(함수, []) : 형태로 컴포넌트 처음 생성 시에만 수행 가능
• useEffect(함수, [any]) : any가 변경 시 리 렌더링

---

과제 코드 리뷰

• ✓ Main 컴포넌트 내 search 함수는 검색 조건을 담고 있는 상태 객체 condition을 업데이트해야 합니다
• setCondition({값}) : search 실행 시 값이 변경 되었다면 useState의 setCondition을 사용하여 값 변경
  
• ✓ Search 컴포넌트에는 상태 변경 함수 search가 onSearch props로 전달되어야 합니다

• ✓ 상태 변경 함수 search는 Search 컴포넌트의 검색 버튼 클릭 시 실행되어야 합니다