pjt #6

 

 

SideProject

오늘 기존 정적 웹 페이지인 HTML 마크업을 리액트 코드로 전환하였다. 

next.js를 적용해서 하다보니 에러 핸들링 하면서 시행착오가 많았다.

 

1. Prerender Error

prelendering error가 특히 많이 발생했는데 이 에러 대한 레퍼런스를 보긴했지만, export 설정을 잘 해주었고 pages 폴더 안에 해당 페이지를 잘 위치해두었기에 결국에 발견하지 못한 에러를 찾으려고 시간을 많이 보냈다. 

 

cf) Prerender Error : https://nextjs.org/docs/messages/prerender-error

 

 

2. styled-components 활용한 리렌더링 방지

또한, 인라인 스타일로 css 속성을 적용할 경우,  불필요한 리렌더링을 발생하게 되는데 이를 방지하기위한 방법 중 하나로 UI 라이브러리인 styled-components를 사용하여 쉽게 커스텀할 수 있다(컴포넌트 형태로 css 스타일은 적용시킬 수 있다).

 

styled-components은 'CSS-in-JS' 방식 중 하나로 자바스크립트 파일 안에 스타일을 선언하는 스타일이다. Tagged 템플릿 리터럴을 이용해 스타일 정보를 실제 css 코드를 사용한다.

 

하지만, 예상과 다르게 image가 load가 안 된다. 구글링으로 여러 레퍼런스를 참고했지만 시간은 시간대로 쓰고 image는 load가 되지 않았다.  결국, styled-components는 쓰지 못 하고 기존 css 스타일대로 변경하여 image를 불러드렸다. 

 

 

import React from "react";
import PropTypes from "prop-types";
import doughnuts from "../../public/img/doughnuts.jpg";
import tomatoes from "../../public/img/tomatoes.jpg";
import Link from "next/link";

const ItemList = styled.img.attrs({
  src: doughnuts,
});

const Main = () => {
  return (
    <article id="prSection">
      <img src={tomatoes} alt="tomatoes" />
      <p>이 상품 어때요?</p>
      <ul>
        <li>
          <Link href="/itemInfoPage">
            <ItemList alt="doughnets" />
            {/* <img src={doughnuts} alt="doughnets" /> */}
          </Link>
        </li>
      </ul>
    </article>
  );
};

{
  {
    /* <a>item</a> */
  }
  /* <showItems src={doughnuts} alt="doughnuts"> */
  // width: 100px; height: 100px";
}
Main.PropTypes = {
  children: PropTypes.node.isRequired,
};

export default Main;

 

 

참고로, 리액트가 렌더링을 실행할 경우는 Props의 변화, state의 변화, forceUpdate() 실행, 부모컴포넌트가 렌더링 됐을 때다. 이런 렌더링이 불필요한 영향이 미치지 않는 역할을 할 수 있는데 그게 바로 인라인 스타일을 적용할 때다.

 

인라인 스타일의 불필요한 리렌더링이 발생하는 이유는 인라인 스타일로 적용하는 코드는 스타일 객체 형태이다. "{} == {}"는 false다. 즉, 객체의 메모리 주소값은 항상 다르기 때문에 가상dom에 변화가 일어났다고 인식해서 불필요한 리렌더링이 발생한다.  방지하는 방법에는 앞에서 얘기한 styled-component를 이용하는 방법과 useMemo라는 것을 사용할 수 있다. 

 

 

참고

NERD FACTORY | https://bit.ly/3iIKXZR

geniusdev | https://bit.ly/3zDpEjv