2022_02_28

Memoization

• 부모 컴포넌트에서 렌더링이 발생할 경우 하위 자식 컴포넌트도 같이 렌더링이 된다.
  • ex) 상위 컴포넌트 state값이 변하면 하위 컴포넌트도 같이 렌더링 된다.
• React Developer Tools를 이용하여 이를 확인할 수 있다.
• react에서 제공하는 memo를 사용해 하위 컴포넌트의 렌더링을 방지할 수있다.
• 만약 상위에서 내려주는 porps의 값이 변한다면 해당 porps를 받는 컴포넌트는 memo를 무시하고 렌더링된다.

function MemoizationPresenterPage() {
  return (
    <div>     
      <h1>이것은 프리젠터 입니다!!</h1>
    </div>
  );
}

export default memo(MemoizationPresenterPage);

useMemo

• 문법: useMemo(( ) ⇒ { }, [ ])
• 렌더링이 되어도 바뀌지 않게 하기 위해 useMemo를 사용한다.

const[counstState, setCountState] = useState(0);

const aaa = useMemo(() => Math.random(), []);
// => 렌더링이 되어도 aaa값은 변하지 않는다.

const aaa = useMemo(() => Math.random(), [countState]);
const aaa = Math.random()
// => state값이 바뀔때마다 (렌더 될 때마다) aaa값이 렌덤으로 바뀐다.

useCallback

• useMemo의 함수 버전이다.
• useCallback 안에서 state의 값을 꺼내 쓰게 되면 초기 불러온 값을 기억하기 때문에 state에 변동이 발생하지 않는다.
• 때문에 useCallback에서 state를 사용할 떄는 prev로 접근을 해야한다.
• onChange는 기존처럼 사용해도 작동한다.

*** 특정 tag의 event 속성 안에 함수를 바로 선언할 수도 있다. 하지만 가독성이 안좋고 메모이제이션이 힘들어 추천하지 않는 방법이다.

<button onClick={() => {
	setState(prev => prev + 1)
}}></button>

@Media

• 적응형 사이트: 사이즈가 고정되어 있는 사이트
  • 해상도가 낮은 경우도 화면이 깨지면 안되기 때문에 중앙에 중요한 내용을 두고 양옆에 여백을 두게 된다.
  • 주로 가로 사이즈를 1024px ~ 1200px 정도로 잡고 작업한다.
• 반응형 사이트: 브라우저 크기에 따라 사이즈가 변하는 사이트
  • 반응형을 만들기 위해서는 그에 맞는 준비들이 필요하다.
  • 반응형 기획이 필요하다.
  • 반응형 디자인이 필요하다.
  • 컨텐츠가 많은경우 반응형으로 하는 것이 오히려 안좋을 수 있다. : 컨텐츠가 많으면 한눈에 보이게 하는 것이 중요하기 때문이다.
    
• 때문에 무조건 반응형이 정답이라고 할 수는 없다.
• ‘모바일 웹’ 과 ‘모바일 앱'은 다른것이다.
  • 모바일 웹: 모바일 사이즈에 맞게(작게) 볼 수 있는 반응형 웹사이트 이다.
  • 모바일 앱: 모바일에서 application으로 다운 받는 app이다.
• em: 해당 상위 부모 요소의 font-size를 기준으로 사이즈가 잡힌다.
• rem: 해당 최상위 부모 요소의 font-size를 기준으로 사이즈가 잡힌다.

반응형 만들때

• 어느 지점에서 화면을 전환해줄지 BreakPoint가 필요하다.
• 화면을 전환 해주는 css 기능인 @Meia를 절용한다.
• height는 고정이어도 상관이 없다.(scroll이 생기기 때문에)
• width는 한눈에 보이는 것이 좋기 때문에 % 혹은 뷰포트를 사용한다.
• 작은 사이즈에서 만든 것을 늘리는 것은 괜찮다.
• 하지만 큰 사이즈에서 만들고 줄이게 되면 내부 폰트와 같은 구성이 깨지게된다.
• 때문에 작은 사이즈에서 기준을 잡고 만드는것이 편하다.
• 하지만 이러한 경우 디자인에 어려움이 있을 수 있기때문에 기획 단계에서 확실하게 협의하는 것이 중요하다.

import styled from "@emotion/styled";

const Wrapper = styled.div`
  width: 1200px;
  height: 1200px;
  background-color: red;

  @media (min-width: 768px) and (max-width: 991px) {
    width: 800px;
    height: 800px;
    background-color: green;
  }

  @media (max-width: 767px) {
    width: 500px;
    height: 500px;
    background-color: blue;

    // 모바일에서는 숨기고 싶을 떄
    // display: none;
  }
`;

breakPoints

• 위의 방법으로 할 경우 개발 중 사이즈가 바뀌었을 경우 수정하기 힘든 부분이 있다.
• 때문에 breakPoints를 지정하고 import하는 방식으로 사용한다.

// media 부분
export const breakPoints = {
  tablet: "(min-width: 768px) and (max-width: 991px)",
  mobile: "(max-width: 767px)",
};

import styled from "@emotion/styled";
import { breakPoints } from "../../src/commons/styles/media";

const Wrapper = styled.div`
  width: 1200px;
  height: 1200px;
  background-color: red;

  @media ${breakPoints.tablet} {
    width: 800px;
    height: 800px;
    background-color: green;
  }

  @media ${breakPoints.mobile} {
    width: 500px;
    height: 500px;
    background-color: blue;

    // 모바일에서는 숨기고 싶을 떄
    // display: none;
  }
`;

export default function ResponsiveDesignPage() {
  return <Wrapper>상자</Wrapper>;
}

사용하기 좋은 tools

• Apollo Client Devtools

  • Apollo 관련 내용을 시각적으로 볼 수 있다.

  • _app.tsx 에 connetDevtools를 true로 설정해야 한다.

    const client = new ApolloClient({
        link: ApolloLink.from([errorLink, uploadLink as unknown as ApolloLink]),
        cache: new InMemoryCache(),
        connectToDevTools: true
      });

• wappalyzer chrome
  • 방문한 사이트에서 사용한 기술스텍, 라이브러리 등을 알 수 있다.
  • 모든 것이 다 뜨는 것은 아니다.