🎁 Gift MBTI - 4. 토이 프로젝트 에러 모음zip

zaman·2022년 10월 29일

Toy Projects

목록 보기

5/6

사실 더 많았는데 기록하는걸 까먹어서ㅠ
아쉽지만 생각나는것만 적어봤다

1. Do not use Array index in keys

🤔 에러가 일어나는 이유

근본적으로 array에 key는 왜 지정하는걸까?

➡️ 렌더링을 최적화하기 위해서

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

리액트는 변경사항을 확인하고 업데이트가 필요할 때만 리렌더링
key가 존재하는 경우 배열에 추가된 요소 한가지만 리렌더링! 따라서 key를 사용하면 불필요한 리렌더링을 방지할 수 있다.

그럼 왜 Index를 사용하면 안되는걸까?

key가 존재하는 경우 배열에 추가된 요소 한가지만 리렌더링할 수 있었던 이유는 리액트가 기존 렌더링 했던 배열과 새로운 배열의 요소를 비교하기 때문

예를 들어 아래와 같은 배열이

[
  {id:0, title: 'title1', content: 'content1' },
  {id:1, title: 'title2', content: 'content2' },
  {id:2, title: 'title3', content: 'content3' },
]

이렇게 바뀌었다고 가정해보자

[
  {id:0, title: 'title1', content: 'content1' },
  {id:1, title: '2222', content: 'twotwotwo' },
  {id:2, title: 'title3', content: 'content3' },
]

리액트는 1번 배열의 id: 0과 2번 배열의 id: 0을,
리액트는 1번 배열의 id: 1과 2번 배열의 id: 1을,
리액트는 1번 배열의 id: 2과 2번 배열의 id: 2를 비교할 것이다.

2번 배열만 title과 content가 바뀌었으므로 이것만 리렌더링해주면 끝!

그런데 index를 key로 사용하면?

값이 바뀌지 않아도 배열 초중반에 추가 수정 삭제가 일어나면 key가 바뀌기 때문에 매번 값이 바뀌었다고 인식하고 비효율적인 리렌더링을 하게 된다.

따라서 index를 key로 사용하는것을 지양하자!

💡 해결 방법

그런데 이번 프로젝트의 경우 수정, 추가, 삭제와 같은 동작이 발생하지 않았다.
그냥 데이터를 보여주기만 하면 됐기 때문에 index를 key로 사용해도 괜찮다고 판단!

그래서 그냥 eslint를 수정했다

    // key값으로 index를 사용할수 있도록
    "react/no-array-index-key": "off",

2. 텍스트에서 줄바꿈하는 법

🤔 에러가 일어나는 이유

데이터를 로컬에 있는 result.json에서 가져다 사용했는데 jsx에서 줄바꿈 문자 \n 이 동작하지 않았다.

     "desc": [
        "한 달 동안 고민해서 산 가방을 친구들한테\n 자랑했는데 친구들 반응이 영 시큰둥하네요. 뭐,\n 나는 정말 마음에 들어서 상관없어요.", 
       ...
      ],

그래서 <br/>을 사용했는데 그것도 그냥 한 달 동안 고민해서 산 가방을 친구들한테<br/> 자랑했는데 친구들 반응이 영 시큰둥하네요. 이런식으로 그대로 나왔다.

💡 해결 방법

해결 방법은 진짜 간단했는데 찾는데 짱오래걸렸다.
바로 css에서 white-space:pre-wrap 설정하기!
그럼 줄바꿈 문자 \n를 인식하고 줄 바꿈한 결과를 출력해준다.

CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.

3. 스타일 props 에러

🤔 에러가 일어나는 이유

타입 지정을 안해줬기 때문!

💡 해결 방법

CSS에도 타입 지정을 해주면 됨!

4. useMemo 사용

🤔 에러가 일어나는 이유

사실 에러는 아니고 처음 사용해봐서 그냥 끼워뒀다.
성능 최적화를 위해 연산된 값을 재사용하는데 사용했다.

💡 해결 방법

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Returns a memoized value.

사용 방법
플젝에서 useMemo를 사용한 부분만 잘라왔다!

const quiz = ({ data }: any) => {
  const [steps, setStep] = useState<number>(0);
  // data라는 배열이 있고 우리는 그 배열에서 해당 step인 데이터만 보여주고 싶음 
  // 예를들어 step이 1이면 data 배열의 1번째 요소만 보여줌
  
  // memoization 할 값 step
  const currentData = useMemo(() => data[steps], [steps]);
  
  ... 생략

  const handleClickNextStep = (ans: AnswerProps) => {
  // step이 8까지 있기 때문에 8이 아니면 +1 을 해줌
    if (steps !== 8) {
      setStep((step) => step + 1);
      return;
    }
  };
  
  ... 생략
  
  );
};

5. do not add stylesheets using next/head

🤔 에러가 일어나는 이유

head에 스타일 시트를 추가하고 싶었는데 따로 만들기 귀찮아서 그냥 SEO를 위해 만들어둔 Head태그 내에 스타일 시트를 추가했더니 이런 워닝가 떴다.

We don't recommend this pattern because it will potentially break when used with Suspense and/or streaming. In these contexts, next/head tags aren't:
➡️ suspense 또는 스트리밍과 함께 사용시 깨질 수 있기 때문

guaranteed to be included in the initial SSR response, so loading could be delayed until client-side rendering, regressing performance.
➡️ 첫 SSR 응답에 포함되기 때문에 클라이언트 측 렌더링까지 로드가 지연되 성능이 저하될 수 있음

loaded in any particular order. The order that the app's Suspense boundaries resolve will determine the loading order of your stylesheets.
➡️ 특정 순서로 로드
앱의 Suspense 바운더리가 해결되는 순서가 당신의 Stylesheets의 로딩 순서를 결정함

넥스트 공식문서 참조하기

➕ suspense?

Suspense lets components “wait” for something before rendering.
➡️ suspense는 렌더링 전 어떤 것을 위해 컴포넌트가 기다리도록 해주는 것

아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능이라고 한다.

💡 해결 방법

친절하게 공문에 해결법도 나와있음

Add the stylesheet in a custom Document component.

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="stylesheet" href="..." />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

더 알아보기 ➡️ app과 document의 차이점

6. document is not defined

🤔 에러가 일어나는 이유

➡️ document가 클라이언트 사이드에서만 정의된 전역 변수기 때문이다.

Next는 리액트를 SSR 방식으로 구현할 수 있도록 도와주는 프레임워크로 첫 렌더링이 SSR 방식으로 이루어진다.
반면 document는 CSR이 동작할 때 즉, view 뿐만 아니라 웹 페이지를 동작하는 요소들이 모두 클라이언트에 로드되었을 때 정의된다.

따라서 SSR이 실행될 때 document에 접근할 수 없던 것이다.
참고로 window도 같은 이유로 에러가 발생함!

💡 해결 방법

가장 단순한 해결 방법!
window나 document가 undefined가 아닐 때 코드가 실행되도록 만들면 된다!

  if (typeof window !== 'undefined') {
      // Client-side-only code
   		 실행할 코드 입력!
    }

이미지 렌더링, 폰트는 SEO, 퍼포먼스 개선한 방법으로 ㄱㄱㄱ

zaman

개발자로 성장하기 위한 아카이브 😎

이전 포스트

🎁 Gift MBTI - 3. Result 페이지 아토믹 디자인 패턴 적용하기

다음 포스트

🎁 Gift MBTI - 4. 토이 프로젝트 에러 모음zip

Toy Projects

1. Do not use Array index in keys

🤔 에러가 일어나는 이유

근본적으로 array에 key는 왜 지정하는걸까?

그럼 왜 Index를 사용하면 안되는걸까?

그런데 index를 key로 사용하면?

💡 해결 방법

2. 텍스트에서 줄바꿈하는 법

🤔 에러가 일어나는 이유

💡 해결 방법

3. 스타일 props 에러

🤔 에러가 일어나는 이유

💡 해결 방법

4. useMemo 사용

🤔 에러가 일어나는 이유

💡 해결 방법

useMemo

5. do not add stylesheets using next/head

🤔 에러가 일어나는 이유

➕ suspense?

💡 해결 방법

더 알아보기 ➡️ app과 document의 차이점

6. document is not defined

🤔 에러가 일어나는 이유

💡 해결 방법

🎁 Gift MBTI - 3. Result 페이지 아토믹 디자인 패턴 적용하기

React Query를 이용해 ToDo List를 만들기 2

0개의 댓글