리액트에서 fetch 사용하기

---

useEffect 살펴보기

처음 한 번만 실행하기

• 컴포넌트가 처음 렌더링 되고 나면 리액트가 콜백 함수를 기억해뒀다가 실행하며 그 이후로는 콜백 함수를 실행하지 않음

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

값이 바뀔 때마다 실행하기

• 컴포넌트가 처음 렌더링 되고 나면 리액트가 콜백 함수를 기억해뒀다가 실행함
• 그 이후로 렌더링 할 때는 디펜던시 리스트에 있는 값들을 확인해서

하나라도 바뀌면 콜백 함수를 기억해뒀다가 실행합니다.

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

---

페이지네이션이란?

• 데이터를 조금씩 나눠서 가져오는 것
• 책의 페이지처럼 데이터를 나눠서 제공하는 것
• 많은 양의 데이터를 제공할 때 사용하는 방법
  • 오프셋 기반 페이지네이션
    • 오프셋: 상쇄하다 / 지금까지 받아온 데이터의 개수
    • 개수를 기준으로 데이터를 나눔
    • 중간에 데이터를 빼먹을 수 있음
  • 커서 기반 페이지네이션
    • 커서: 데이터를 가리키는 값 / 지금까지 받은 데이터를 표시한 책갈피
    • 데이터를 가리키는 커서 기준
    • 데이터의 중복이나 빠짐없이 가져올 수 있는 장점이 있음
    • 오프셋 기반보다 만들기 까다로움

---

조건부 렌더링 꿀팁

논리 연산자 활용하기

// AND 연산자
import { useState } from 'react';

function App() {
  const [show, setShow] = useState(false);

  const handleClick = () => setShow(!show);

  return (
    <div>
      <button onClick={handleClick}>토글</button>
      {show && <p>보인다 👀</p>}
    </div>
  );
}

export default App;

// OR 연산자
import { useState } from 'react';

function App() {
  const [hide, setHide] = useState(true);

  const handleClick = () => setHide(!hide);

  return (
    <div>
      <button onClick={handleClick}>토글</button>
      {hide || <p>보인다 👀</p>}
    </div>
  );
}

export default App;

삼항 연산자 활용하기

import { useState } from 'react';

function App() {
  const [toggle, setToggle] = useState(false);

  const handleClick = () => setToggle(!toggle);

  return (
    <div>
      <button onClick={handleClick}>토글</button>
      {toggle ? <p>✅</p> : <p>❎</p>}
    </div>
  );
}

export default App;

렌더링되지 않는 값들

• 아래 컴포넌트에서 중괄호 안에 있는 값들은 모두 아무것도 렌더링하지 않음

function App() {
  const nullValue = null;
  const undefinedValue = undefined;
  const trueValue = true;
  const falseValue = false;
  const emptyString = '';
  const emptyArray = [];

  return (
    <div>
      <p>{nullValue}</p>
      <p>{undefinedValue}</p>
      <p>{trueValue}</p>
      <p>{falseValue}</p>
      <p>{emptyString}</p>
      <p>{emptyArray}</p>
    </div>
  );
}

export default App;

• 반면에 이 값들은 각각 숫자 0과 1을 렌더링 함

function App() {
  const zero = 0;
  const one = 1;

  return (
    <div>
      <p>{zero}</p>
      <p>{one}</p>
    </div>
  );
}

export default App;

조건부 렌더링을 사용할 때 주의할 점

• 아래 코드는 num 값이 0일 때는 false 로 계산되니까 뒤의 값을 계산하지 않기 때문에 아무것도 렌더링 하지 않는 코드 같지만 숫자 0은 0으로 렌더링 됨
• 그래서 처음 실행했을 때 숫자 0이 렌더링 되고 '더하기' 버튼을 눌러서 num 값이 증가하면 num이 0 보다 크다! 가 렌더링 됨

import { useState } from 'react';

function App() {
  const [num, setNum] = useState(0);

  const handleClick = () => setNum(num + 1);

  return (
    <div>
      <button onClick={handleClick}>더하기</button>
      {num && <p>num이 0 보다 크다!</p>}
    </div>
  );
}

export default App;

• 따라서 보다 명확한 논리식을 써주는 게 안전함
• true 나 false 값은 리액트에서 렌더링 하지 않는다는 사실을 기억하기

import { useState } from 'react';

function App() {
  const [num, setNum] = useState(0);

  const handleClick = () => setNum(num + 1);

  return (
    <div>
      <button onClick={handleClick}>더하기</button>
      {(num > 0) && <p>num이 0 보다 크다!</p>}
    </div>
  );
}

export default App;

---

useState 뽀개기

초깃값 지정하기

• useState 함수에 값을 전달하면 초깃값으로 지정할 수 있음

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

콜백으로 초깃값 지정하기

• 초깃값을 계산해서 넣는 경우 이렇게 콜백을 사용하면 좋음

const [state, setState] = useState(() => {
  // 초기값을 계산
  return initialState;
});

// 잘못된 예시
function ReviewForm() {
  const savedValues = getSavedValues(); // ReviewForm을 렌더링할 때마다 실행됨
  const [values, setValues] = useState(savedValues);
  // ...
}

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

• 콜백 형태로 초깃값을 지정해주면 처음 렌더링 할 때 한 번만 콜백을 실행해서 초깃값을 만들고, 그 이후로는 콜백을 실행하지 않기 때문에 getSavedValues 를 불필요하게 실행하지 않음
• 주의할 점은 이 콜백 함수가 리턴할 때까지 리액트가 렌더링하지 않고 기다려서 콜백 함수의 실행이 오래 걸릴 수록 초기 렌더링이 늦어짐

Setter 함수 사용하기

기본

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

const handleAddClick = () => {
  setState(state + 1);
}

• 배열이나 객체 같은 참조형은 반드시 새로운 값을 만들어서 전달해야 함

// 잘못된 예
const [state, setState] = useState({ count: 0 });

const handleAddClick = () => {
  state.count += 1; // 참조형 변수의 프로퍼티를 수정
  setState(state); // 참조형이기 때문에 변수의 값(레퍼런스)는 변하지 않음
}

// 올바른 예
const [state, setState] = useState({ count: 0 });

const handleAddClick = () => {
  state.count += 1; // 참조형 변수의 프로퍼티를 수정
  setState(state); // 참조형이기 때문에 변수의 값(레퍼런스)는 변하지 않음
}

콜백으로 State 변경

setState((prevState) => {
  // 다음 State 값을 계산
  return nextState;
});

• 만약 이전 State 값을 참조하면서 State를 변경하는 경우, 비동기 함수에서 State를 변경하게 되면 최신 값이 아닌 State 값을 참조하는 문제가 있었음
• 이럴 때는 콜백을 사용해서 처리할 수 있으며 파라미터로 올바른 State 값을 가져와서 사용할 수 있음
• 이전 State 값으로 새로운 State를 만드는 경우엔 항상 콜백 형태를 사용해야함