🎈map으로 렌더링하기

🎐map 함수란?

const renderedItems = items.map((item) => (
    <li>
      <Pokemon item={item} />
    </li>
  ));

어떤 배열이나 객체에 .map 함수를 실행하면 파라미터로 그 배열, 객체 안의 요소들을 받는다. 그리고 return 값들을 모아 새로운 배열로 return한다.

🎐JS 리스트 안에 배열 넣는 법 & key prop

function App() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <Pokemon item={item} />
        </li>
      ))}
    </ul>
  );
}

//배열만 { }안에 담으면 되니 이렇게 줄 수도 있음.
function App() {
  const renderedItems = items.map((item) => (
    <li key={item.id}>
      <Pokemon item={item} />
    </li>
  ));

  return (
    <ul>
      {renderedItems}
    </ul>
  );
}

unordered list 태그 안에 배열을 { } 중괄호 안에 담기만 해도 리스트에 담을 수 있다.

그리고 리스트의 요소마다 key prop을 주면 좋다. 가끔 로딩을 하는 동안 리스트를 삭제를 하거나 추가를 하는 상황이 발생하는데 이때 key prop이 있으면 구분하기 쉽다!

🎈정렬하기

function App() {
  const [direction, setDirection] = useState(1);

  const handleAscClick = () => setDirection(1);

  const handleDescClick = () => setDirection(-1);

  const sortedItems = items.sort((a, b) => direction * (a.id - b.id));

  return (
    <div>
      <div>
        <button onClick={handleAscClick}>도감번호 순서대로</button>
        <button onClick={handleDescClick}>도감번호 반대로</button>

items.sort((a, b) => direction * (a.id - b.id)) a[ ] -b[ ]이면 작은 숫자 순으로, b[ ] - a[ ]이면 큰 숫자 순으로 정렬된다. 그래서 앞에 direction으로 1,-1을 곱해서 쉽게 순서를 바꿀 수 있다.

🎈fetch함수 실행하는 파일 생성

위 코드처럼 fetch함수를 사용해 json을 담고있는 promise 객체를 부르고 이것을 우리가 쉽게 사용할 수 있게 JS 객체로 만들어 리턴하는 코드다.

import getReviews from './api'

파일을 import한다.

그리고 위 async await을 사용해서 만든 파일이어도 사용할 때, 또 async await을 붙여준다. 위 코드로 인해 web에서 받아온 객체의 reviews 프로퍼티가 items state로 들어간다.

🎐useEffect

import { useEffect} from 'react';	

useEffect(() => {
// 실행할 코드
}, [dep1, dep2, dep3, ...]);

컴포넌트가 처음 렌더링될 때, useEffect의 콜백함수가 한번 실행된다. 그 이후로는 dependency에 있는 value에 변화가 있을 때만 실행된다.
만약 [ ] 빈 배열이라면 처음 한번만 실행되고, 실행되지 않는다. 그래서 초기화할 때 좋음.

🎈페이지네이션(Pagination)

-> 책의 페이지처럼 데이터를 나눠서 제공하는 것을 뜻한다.

query에 무슨 값을 넣는냐에 따라 내가 원하는 데이터 종류, 데이터 갯수를 선택할 수 있다.
위 코드는 데이터의 어느 종류를 어디부터 몇개까지 불러올 것인가를 정하는 파일.
현재 default로는 저런 값들이 설정되어있다.
getReviews라는 컴포넌트의 파라미터가 {order,offset,limit}이니 기본적으로 이 컴포넌트를 불러올 때 저 아규먼트들을 넣어서 부르자.

offset이란 state를 선언한다.
그리고 offset이 초기에 0일때만 그대로 items state에 값들을 집어 넣는다. 그 후 offset의 크기를 방금 넣었던 데이터의 크기만큼 늘린다.

🎐조건부 연산자

 {show && <p>보인다 👀</p>}
  
 {hide || <p>보인다 👀</p>}
  
 {toggle ? <p>✅</p> : <p>❎</p>}
 
 <p>{zero}</p>
 <p>{one}</p>

html내 저렇게 { }안에 연산자 기호를 넣으면 그대로 적용이 된다.
1. show가 true면 오른쪽을 리턴
2. hide가 ture면 오른쪽을 리턴
3. 삼항연산자로 toggle이 true면 왼쪽 꺼 리턴
4. {0}은 여기서 falsy값으로 처리가 안되어서 그대로 0이 리턴된다.

하지만 null,unidentified 등등 같이 falsy한 값들은 html내에서 리턴 안 됨.

🎈useState

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

function ReviewForm() {
  const [values, setValues] = useState(() => {
    const savedValues = getSavedValues();// 처음 렌더링할 때만 실행됨return savedValues
  });

위에 방식은 기본적인 state 선언하는 방법이다. 하지만 initialState에 계산값을 주기 원한다면, 밑에처럼 초기값에 콜백함수를 통해 리턴된 값을 넣어주는 방법도 있다.
초기값에 아무것도 안 넣으면, state에 unidentified가 할당된다.

단, 이때 주의할 점은 이 콜백 함수가 리턴할 때까지 리액트가 렌더링하지 않고 기다린다는 점인데요.콜백 함수의 실행이 오래 걸릴 수록 초기 렌더링이 늦어진다는 점에 주의하자.

const [count, setCount] = useState(0);

const handleAddClick = async () => {
  await addCount();
  setCount((prevCount) => prevCount + 1);

비동기 함수에서 state를 참조하게 되면, 최신 값이 아닌 state를 참조하는 경우가 있다.그래서 밑에처럼 setter함수의 파라미터에는 항상 당시 state가 들어가기에 저렇게 콜백 형태로 사용하는 것이 좋다.

🎈로딩할 때 버튼 없애기

isLoading이라는 state를 만들고 response받을 때 true값으로 바꾸고 response가 도착해서 finally문 들어갈 때 false로 바꾸면, button의 disabled prop을 통해 로딩되는 동안은 버튼을 못 누르게 할 수 있다.

TIP. fetch함수로부터 response가 오면 response.ok가 false면 오류가 있는 거고 response.ok가 true면 오류가 없는 것이다.