[React] 조건부 렌더링

조건부 랜더링 :

어떠한 조건을 주어서 '버튼'이 안보이게끔 만들어보자.

  return (
    <div>
      <div>
        <button onClick={handleNewClick}>최신순</button>
        <button onClick={handleBestClick}>베스트순</button>
      </div>
      <ReviewList items={sortedItems} onDelete={handleDelete} />
      {hasNext && <button onClick={handleLoadMore}>더 보기</button>}
    </div>
  );
};

조건을 줄 코드에 중괄호로 감 싼 다음 hasNext &&를 적어준다.

이렇게 적으면 hasNext의 값이 참 일 경우 뒤에 있는 값을 실행한다.

(hasNext가 있으면 더 보기를 보여줘~)  

만약에 hasNext 값이 거짓이면 뒤에 있는 값이 실행되지않고

앞에 적힌 hasNext 값을 사용하는데 이 값은 false이다.

(hasNext가 없으면 더 보기 false)

리액트에서 false값은 렌더링하지않기때문에 버튼이 보이지않게 된다.