리액트

트위터 클론 코딩을 마치며

개발 기간 2023/05/03 ~ 2023/06/07 개발한 트위터 웹 링크 https://imdaxsz.github.io/twitter 계기 React와 TypeScript 강의를 듣고 난 후, 작은 프로젝트를 만들어봐야겠다고 생각했다. 그런 생각을 하던 찰나 Nomad Corder(노마드 코더)에서 React + Firebase로 트위터를 클론 코딩하는 강좌를 발견하게 되었다. Firebase는 학부 시절에도 백엔드로 종종 사용했던 적이 있었고(거의 기억이 나지 않았지만), 아직은 프론트엔드에 좀 더 집중하고 싶었기 때문에 백엔드는 최대한 쉽고 가볍게 하고 싶다는 생각이 있었다. 그래서 이 강좌를 수강하며 Firebase를 React에서 사용하는 방법을 배우고, 아직은 익숙하지 않은 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..