React_22_검색기능 만들어보기_

지원·2023년 10월 6일

목록 보기

23/71

useEffect() 디펜던시 리스트를 [order, search]와 같이 사용하면
order State가 변경될 때마다 콜백이 호출되도록 한다.

이렇게 하면 검색어가 바뀔 때마다 새 리퀘스트를 보낼 수 있다.
그리고 handleLoad 함수에 전달할 옵션 값으로 search를 추가해준다.

useEffect(() => {
  handleLoad({
    order,
    **search,**
  });
**}, [order, search])**

마찬가지로 더보기 버튼을 눌렀을 때도
검색어와 함께 요청할 수 있도록 handleLoadMore()함수도 수정한다.

const handleLoadMore = () => {
  handleLoad({
    order,
    cursor,
    **search,**
  });
};

function Taco() {
  const customers = ['Antonio', 'Juan', 'Rosa'];
  if (!customers) {
    return null;
  }
  return <p>🦦</p>;}

!customers의 값이 false이고,
if 조건문에 해당하지 않으니까 🦦출력된다.

function Taco() {
  const customers = ['Antonio', 'Juan', 'Rosa'];
  return <p>{customers.length ? '🦦' : 'Hola!'}</p>;
}

customers.length의 값이 3이므로
이 값이 true 이므로 삼항 연산자에서 첫 번째 조건인 '🦦' 가 렌더링된다

function Taco() {
  const customers = undefined;
  return <p> {customers || '🦦'} </p>;
}

customers의 값이 undefined이므로 false이다.
그래서 OR연산자의 두번째 조건을 계산해서 '🦦'가 랜더링된다.

function Taco() {
  const customers = [];
  return <p>{customers.length &&& '🦦'}</p>;
}

customers.length의 값이 0이므로 AND연산자의 두번째 조건을 계산하지 않고
첫 번쨰 조건인 0을 랜더링하게 된다.

정답은 4

React