Background 2년 전, CRA로 리액트를 시작했었죠. 타입스크립트 기반 리액트 시작하기Create React App 앱을 만들기 위해서는 다음과 같은 명령어를 사용합니다.$ npx create-react-app {앱 이름} 실행 결과에도 나와있듯, 아래 명령어를 이용하면 최초 리액트 앱을 실행할 수 있습니다.$ cd {앱oimbook.tistory.com 최근 들어 취약점이 많이 보였는데, 실제로 깃허브에 방문해보니 활동이 없더라고요... 혹시나 해서 리액트 공식 문서도 방문해봤는데, CRA가 없네요? 😂 네.그래서 vite로 갈아탔습니다. Getting Started 사실 너무 간단합니다. 아래 명령어로 프로젝트를 만들면 됩니다.$ npm create vite@latest 이후에..

Reason For Using SCSS 사실 scss를 다루는 모듈(라이브러리) 이름은 sass입니다. 이 안에서 sass 문법을 사용할 것인지, scss 문법을 사용할 것인지 선택할 수 있죠.scsssasscss 필자는 scss를 사용합니다.아무래도 css 문법에 익숙하다보니, 사용하기에 더 편한 것도 있지만 나중에 css로 이식했을 때 문제를 덜 일으킬 수 있을 것 같았죠. 사실 이 모듈을 사용하는 가장 큰 이유는 '구조화' 때문입니다.이를 nesting이라고 표현하는데, 아래처럼 굉장히 혁신적으로 스타일을 구조적으로 만들 수 있죠. 그 밖에도 여러가지 기능들이 있는데, 사실 잘 사용하지 않습니다.장담컨데 오랜시간 스타일을 다룬 결과, css 파일은 간단하고 직관적일 수록 스트레스가 덜 합니다. ..

Getting Started ↓ 전체 명령어더보기더보기 이번 글에서는 테스트를 위한 라이브러리를 간단히 소개하려고 합니다. 시작하기에 앞서 CRA로 생성된 테스트 관련 메인 의존성들을 제거해줍니다.$ npm uninstall @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event Babel + Jest Babel은 자바스크립트 컴파일러로써, 리액트에서 사용하는 JSX, TSX를 일반 자바스크립트로 변환하는 역할을 합니다.Jest는 이렇게 변환된 자바스크립트를 단위 테스트나 통합 테스트를 해주는 도구이죠. 설치법은 다음과 같습니다.$ npm install --save-dev @ba..

useDeferredValue state 또는 props 변경을 미룹니다.다만 리렌더링을 방지하려면, memo와 함께 쓰는 것이 좋습니다.  역할은 useTransition 훅과 비슷합니다.다만 useTransition은 state에 대한 변경 동작에 적용하는 것이고useDeferredValue는 변경된 값에 적용하기 때문에, 순수 state를 쓰든 deferred value를 쓰든 자유입니다. 하지만 리렌더링을 방지하기 위해서는 memo와 함께 사용하는 것이 좋습니다.useDeferredValue만 쓰면 부모 컴포넌트와 리렌더링을 함께 하기 때문입니다.    Lag in Search 간단하게 과일 이름을 검색하는 예제를 만들어보겠습니다.(과일 이름 출처는 wikipedia - List of culina..

useTransition  useTransition은 UI를 블락킹(blocking)하지 않고 state를 업데이트하는 훅입니다.쉽게 말해, set으로 state를 업데이트하고이에 수반하여 리렌더링 할 때 UI가 멈추는 것을 방지합니다.  까지가 공식 문서의 설명이었는데,사실 설명대로 훅을 잘 쓰려면 리액트가 어떤 환경에서 동작하는 지를 잘 이해해야 하고어떤 상황에서 써야되는 지 잘 알아야 합니다.       startTransition 사실상 useTransition의 기능은 startTransition 함수와 비슷합니다.그리고 startTransition 함수는 탑 레벨(top-level) 함수로써 굳이 훅을 쓰지 않고도 사용할 수 있습니다.startTransition is very similar t..

Theme 7. State 보존하기 글에서 만들었던 친구 목록에 테마를 추가해봅니다.  이는 오른쪽 상단의 테마 버튼을 눌러서 전환할 수 있도록 합니다. 먼저 List에 theme state를 추가하고 div의 className에 적용합니다.export default function List(...) { const [theme, setTheme] = useState("light"); return ( // theme에 따라 className이 변경 {names.map((name) => ( onClickListItem(name)}> ..