DO MY BEST

useCallback은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수이다.

const onSubmit = useCallback(
	(e) => {					        ★
    	e.preventDefault();     	   		        ★
        console.log(email, nickname, password,, passwordCheck); ★
    },	
    [email, nickname, password, passwordCheck],     ☆
)

☆(deps)에는 ★(함수)안에서 사용하는 변수들을 다 넣어줘야 한다. 그래야 지만 ★(함수) 안에 있는 값들이 업데이트된다.

useCallback 자체가 ★(함수)를 캐싱해둬라(기억해둬라)이다. 언제까지 기억하냐면 ☆(deps)값들 중에 하나라도 바뀔 때까지.

하나라도 바뀌면 ★(함수)를 새로 만들고 바뀌는 게 없으면 이전 함수를 계속 쓴다.

특성

클래스에서는 필요 없는데 함수에서는 매번 전체가 재실행되기 때문에 useCallback으로 감싸지 않으면 ★(함수)들이 매번 재생성된다. 이것을 막기 위함이다.

그러나

리 렌더링이 많이 일어난다고 해서 성능에 크게 영향을 미치지 않으나 디버깅하기가 어려워진다.

useCallback으로 안 감싸도 동작은 하지만 매번 함수가 새로 생기면 밑에 예제를 보면 onChange에 들어가는 것이 매번 새로운 함수가 들어간다. 그러면서 리 렌더링이 발생한다. (그러나 리렌더링이 발생한다 하더라도 실제로는 화면을 다시 그리는 것은 아니다.)

	...
        <Label id="nickname-label">
          <span>닉네임</span>
          <div>
            <Input type="text" id="nickname" name="nickname" value={nickname} onChange={onChangeNickname} />
          </div>
        </Label>
        <Label id="password-label">
          <span>비밀번호</span>
          <div>
            <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} />
          </div>
        </Label>
	...     
     

css in js (emotion, styled component)

       - styled component와 비교하면 emotion이 설정이 더 간단하다.

       - emotion이 서버사이드 렌더링할 때도 좀 더 쉽다.

emotion 초기설정

※ @emotion/core에서 @emotion/react로 바뀌었다.

emotion 문법  

export const Label = styled.label`
	margin-bottom:17px;
    ...
    & > span {   // &가 Label을 표현한다. 즉 Label의 자식인 span을 다음과 같이 정의한다로 해석된다.
    	...
    }
 `;

이것을 하기 위해서는 

을 해야한다.

그리고, webpack.config.ts에 

...
    module: {
    	rules: [
        	{
            	test:
                loader:
                options: {
                	presets: [
                    	
                    ],
                    env: {
                    	develtopment: {
                        	plugins: [['@emotion', { sourceMaps: true }], ...] <- 이게 필요
                        },
                    },
                },
            },
        ],
    }

설명

필요없는 컴포넌트들은 처음에 불러오지 않도록 하고, 필요한 컴포넌트들은 그때그때 불러오게 하는 기법.

어떤 컴포넌트들을 불러와야하나

  - 페이지들을 분리한다.(쉬운 기준)

        ex) 로그인 페이지에 와 있는데 굳이 회원가입 페이지를 미리 불러올 필요가 없는 경우가 있으면 로그인 페이지와 회원가입 페이지는 코드스프리트 해도 된다.

   - 서버사이드 렌더링이 필요없는 것들

        ex) 규모가 큰 텍스트 에디터들 같은 경우에는 굳이 서버에서 렌더링할 필요가 없다.

import LogIn from '@pages/LogIn';
import SignUp from '@pages/SignUp';

에서

const LogIn = loadable(() => import('@pages/LogIn'));
const SignUp = loadable(() => import('@pages/SignUp'));

로 바꾼다. 이렇게 하면 코드 스프리팅을 언제 할지, 언제 불러올지를 크게 고민할 필요 없이 알아서 불러온다.

추천

  페이지 단위로 코드 스프리팅 하는것을 추천한다고 한다.