react

[React] memo / useMemo

memo 컴포넌트가 재렌더링되면 내부에 있는 자식 컴포넌트는 항상 함께 재렌더링된다. 컴포넌트가 props로 동일한 결과를 렌더링한다면, memo를 호출하고 결과를 메모이징(Memoizing) 하도록 래핑하여 경우에 따라 성능을 향상할 수 있다. memo를 사용하면 react가 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다. const MemoizedComponent = memo(SomeComponent, arePropsEqual?) import { memo } from 'react'; const Song = memo(function Song({ title, singer }) { return ( Song title: {title} Singer: {singer} ); }); export ..

[React] lazy import

lazy import 리액트로 만드는 Single Page Application의 특징은 빌드 시 html, js 파일이 하나만 생성된다. 그 안에 지금까지 만든 모든 내용이 들어있어 파일 사이즈가 약간 크다. 이런 이유에서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있다. 이를 개선하기 위해 코드를 분할할 수 있다. import 할 컴포넌트가 바로 렌더링 되지 않을 때, 컴포넌트가 처음 렌더링 될 때(필요할 때)까지 import를 미루는 것이다. import MarkdownPreview from './MarkdownPreview.js'; 위 코드를 아래와 같이 바꿀 수 있다. import { lazy } from 'react' const MarkdownPreview = lazy(() => i..

[React] React에서 if 구문 사용하기

1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } 자바스크립트 if문은 return () 안의 JSX 내에서는 사용할 수 없다. if (조건) {실행문} => (X) 그래서 보통 return + JSX 전체를 가지는 if문을 사용한다. + 주로 else 생략 function Component() { if ( true ) { return 참이면 보여줄 HTML; } return null; } 2. JSX안에서 쓰는 삼항연산자 (ternary operator) function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : nu..