[TIL] 211228

2021-12-28 화요일

🤍 회고

1. 오늘의 도전과 배움
   오늘은 react query를 배우고 cypress를 찍먹했다.

2. 학습하면서 궁금하거나 어려웠던 점
   영어 문서 읽기ㅜㅜ 항상 강의와 번역본에 의존해서 공부하다가 이제 영어에 익숙해지려고 오늘 react query랑 cypress 문서를 whale 브라우저로 번역본과 원문을 같이 보는데 번역이 이상해서 하나도 읽히지 않고 공부할 욕구가.. 항상 후회하면서 노력을 잘 안 하게 되는 영어 😂

3. 내일 해보고 싶은 것들
   효율적인 영어 공부법 찾기. 시간 분배 잘하기. 바로바로 정리하고 빠른 시일 내에 복습하기.

어제 늦게 자고 늦게 일어나서 일어나자마자 하드 트레이닝하고 조금 쉬고 공부하려고 했는데 졸려서 점심먹고 오후에 동물병원에 가야 해서 또 지체되고 늦게 공부를 해가지고 별로 못 했다. 내일은 오늘 못한 만큼 열시미 🔥

🖤 real world 하드트레이닝

react-query 도입!

https://react-query.tanstack.com/overview
하드트레이닝 끝나고 바로 읽으려고 했지만 쉬었다가 이제야 써서 많이 기억은 안 나지만

commit 기록 따라가며 뭘했는지 기억해보기

비동기로 가져온 데이터를 제대로 받아왔는지 확인하고 에러를 처리하려면 보통 useState를 여러 개 만드는 방법을 사용했음

const App = () => {
  const [articles, setArticles] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  /* state가 많으면 객체로 넣는 것이 괜찮은지,,
  const [articleState, setArticleState] = useState({
    articles: null,
    loading: true,
    error: null
  });
  */
  
  // 맞나 평소에 axios를 많이 사용해서 fetch 문법이 익숙하지 않네
  useEffect(() => {
    fetch('')
      .then(res => res.json())
      .then(res => setArticles(res.data))
      .catch(err => setError(err))
      // 난 then에 썼는데 토끼님이 finally에 넣는 게 좋다고 알려주심!
      .finally(() => setLoading(false));
  }, []);
  
  return ( ... );
}

react query를 이용하면 이 많은 코드를 아주 간단하게 작성할 수 있음.

import { useQuery } from 'react-query';

const App = () => {
  // https://react-query.tanstack.com/guides/query-keys
  const { isLoading, error, data } = useQuery('Articles', () =>
    fetch('url').then(res => res.json())
  );
  
  return ( ... );
}

react query는 server state를 관리하는 라이브러리로 서버 상태 가져오기 외에 캐싱, 동기화 및 업데이트 등을 쉽게 만들어줌.

todoMVC

첫? cypress 연습! .new-todo를 가져올 수 없다 에러가 계속 떠서 토끼님의 깃허브를 참고했는데 처음에 beforeEach로 내 로컬호스트 주소에 방문하지 않아서였다. 찾아보니 before()도 있던데 다 영어문서라 번역본으로는 둘의 차이점을 잘 모르겠담.. delete 부분을 만들기는 했는데 아직 uuid 부분부터 뭔가 꼬여서 내일 여쭤보고 만들어봐야지

-todo.spec.js

describe('todoMVC 테스트!', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000/');
  });

  it('할 일 추가하기.', () => {
    cy.get('.new-todo').type(`$hello!{enter}`);

    cy.get('.todo-list li').should('have.length', 2);
  });
});

💙 리액트를 다루는 기술 6장 컴포넌트 반복

6.1 자바스크립트 배열의 map() 함수

arr.map(callback, [thisArg])
arr.map((currentValue: 현재 처리하고 있는 요소, index, array: 원본 배열) => ...

// 반복되는 코드를 작성할 때 어떻게 효율적으로 보여주고 관리?
const App = () => {
  return (
    <ul>
      <li>하나</li>
      <li>두울</li>
      <li>세엣</li>
    </ul>
  );
}

// 자바스크립트 배열의 map() 함수로 데이터 배열을 컴포넌트 배열로 반환
const App = () => {
  const numbers = ['하나', '두울', '세엣'];
  return (
    <ul>
      {numbers?.map(number => <li>{number}</li>)}
    </ul>
  );
};

// 컴포넌트 사용 가능
const App = () => {
  return <Sample />
};

6.3 key

리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동(생성, 제거, 수정 등)이 있었는지 알아내려고 사용. key가 있어야 Virtual DOM이 어떤 변화가 일어났는지 더 빠르게 감지함

const IterationSample = () => {
  const numbers = ['하나', '두울', '세엣'];
  return (
    <ul>{numbers.map((num, i) => <li key={i}>{num}</li>)}</ul>
  );
}

// key는 고유한 값이어야만 효율적으로 리렌더링됨
const IterationSample = () => {
  const [seasons, seetSeasons] = useState([
    { id: 1, text: 'spring' },
    { id: 2, text: 'summer' },
    ...
  ]);
  return (
    <ul>
      {seasons.map(season => (
        <li key={season.id}>{season.text}</li>
      ))}
    </ul>
  );
}

6.4.2 데이터 추가 기능 구현하기

배열의 새 항목을 추가할 때 배열의 push를 사용하면 기존 배열 자체를 변경하지만, concat은 새로운 배열을 만들어 줌. 리액트에서 상태를 업데이트할 때는 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 하는데 이를 불변성 유지라고 함. 불변성 유지를 해야 나중에 리액트 컴포넌트의 성능을 최적화할 수 있음

정리