Codingbear

공식 문서를 확인해 보세요. <a target="_blank" rel="noopener noreferrer nofollow" href="https://ko.react.dev/learn/react-compiler/installation">https://ko.react.dev/learn/react-compiler/installation</a>주의할 점에 대해 나와 있습니다.<ul><li>Babel 플러그인 파이프라인에서 가장 먼저 실행되어야 합니다.</li><li>SWC 환경에서 React Compiler 가 잘 작동하지 않을 수 있으니 주의</li><li>ESLint 규칙 잘 지켜야 자동 메모이제이션이 잘 작동합니다.</li><li>특정 컴포넌트에서 문제 발생 시 제외하려면 <code>"use no memo"</code> 지시어를 사용합니다.&nbsp; </li></ul>

최적화 관련 질문있습니다 (useMemo 등)

<ul><li>해당 컴포넌트 내부에서만 쓰이는 state 이면 컴포넌트 내부에서 <code>useState, useReducer</code>를 사용합니다.</li><li>부모-자식 간 간단한 전달이라면 <code>props</code>로 전달합니다.</li><li>자식 간의 상태 공유이면 부모 컴포넌트에 상태를 끌어 올립니다<code>(Lifting State Up)</code></li><li>깊은 계층 간에 전달(<code>props drilling</code>)이라면 <code>Context API</code>를 사용합니다.</li><li>복잡한 전역 상태 및 비동기 처리 등의 상태 관리가 필요하다면 <code>TanStack Query, Zustand</code>, <code>Redux</code>등의 상태 관리 라이브러리를 사용합니다. </li></ul>

state 관리에 대한 정리

리액트 애플리케이션을 실행하고 있을 때<code> components</code> 탭이 표시되는 지를 확인해 보세요.현재 화면이 리액트 애플리케이션이 아니면 <code>components</code> 탭이 표시되지 않습니다.확장 프로그램 관리(<code>chrome://extensions</code>) 에서 해당 React Developer Tools 가 활성화 되어 있는 지를 확인해 보세요.

개발자도구에서 components 가 안보입니다.

shadcn/ui 를 설치하기 전에 먼저 tailwindcss 설치와 path alias 패스를 설정해야 합니다. 1. Vite 에 tailwindcss 설치<pre><code class="language-bash">npm install tailwindcss @tailwindcss/vite</code></pre><ol start="2"><li>Vite + React + Typescript 환경에 Path Alias 설정&nbsp;&nbsp;<ul><li>tsconfig.ts 와 tsconfig.app.json 수정&nbsp;</li></ul><pre><code class="language-json">{
 // ...
 /* 템플릿 코드에 추가된 부분 : Path Alias */
 "compilerOptions": {
 "baseUrl": ".",
 "paths": {
 "@/*": ["./src/*"]
 }
 }
}</code></pre><ul><li>vite에 tsconfig 의 alias를 반영하기 위해 vite-tsconfig-paths 플러그인을 설치합니다.</li></ul><pre><code class="language-bash">npm install -D vite-tsconfig-paths</code></pre><ul><li>vite.config.ts 에 vite-tsconfig-path 플로그인을 추가 설정합니다.</li></ul><pre><code class="language-typescript">import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import tsconfigPaths from 'vite-tsconfig-paths';
import tailwindcss from '@tailwindcss/vite';

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [react(), tailwindcss(), tsconfigPaths()],
});</code></pre></li><li> 위 사전 설정을 마치고 shadcn/ui 를 설치하면 됩니다.</li></ol><pre><code class="language-bash">npx shadcn@latest init -t vite
✔️ Select a component libary > Radix
✔️ Which preset would you like to use? > Nova</code></pre>&nbsp;&nbsp;&nbsp;&nbsp;

[(2.4) Shadcn/ui를 소개합니다] 강의 Shadcn 세팅 관련 질문 있습니다.

TodoStateContext의 Provider 가 상위에서 먼저 state 를 제공하고, TodoDispatchContext 의 Provider 가 dispatch 를 제공해야 dispatch가 제공된 state를 기반으로 동작할 수 있기 때문입니다. Context 의 Provider는 트리 계층 구조로 동작하기 때문에 하위 Provider 는 상위 Provider가 제공하는 값을 사용할 수 있지만, 그 반대로 불가능 할 수 있습니다. 만약 TodoDispatchContext.Provider 가 상위에 존재한 다면 하위에 있는 state 가 준비되지 않은 상태에서 참조할 수 없는 상태가 됩니다. 그렇기 때문에 데이터 흐름의 보장을 위해 state -> dispatch -> state 갱신 -> state 구독 컴포넌 리렌더링 흐름 구조로 프로바이더를 제공하는 것이 좋습니다.

프로바이더 컴포넌트의 위치는 어떤 기준인가요?

그냥 JavaScript 는 기존 Babel 컴파일러 사용하는 리액트 프로젝트 환경이고 오랜 기간 사용하여 안전성이 높고 모든 JSX/JS 문법을 지원 합니다. 하지만 빌드 속도와 HMR 반영 속도가 다른 환경에 비해 느립니다. SWC (Speedy Web Compiler) 환경은 컴파일러가 Rust 언어로 만들어 져서 기존 Babel 환경보다 빌드, HMR 개발 속도가 훨씬 빠릅니다.그리고 React 19 부터 정식 도입된 React Compiler 는 렌더링 최적화를 자동화 하는 도구입니다.기존에 개발자가 일일이 작성하던 useMemo, useCallback, React.memo 를 컴파일러가 알아서 자동으로 적용하여 불필요한 재렌더링을 막습니다. 제가 추천하는 컴파일러 환경은 기존 Babel인 javascript 나 javscript +SWC 를 추천하구요. 빠른 빌드와 반응을 보려면 SWC 추천합니다.

select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com

<img src="https://cdn.inflearn.com/public/files/posts/4bbbbe87-2827-424f-bbda-6b385669eb0b/e72c63c1-3820-4001-bd42-87b15e2e8898.png" media-type="img" alt="image.png" title="image.png" width="643" height="280">해결됐다 하네요..^^

zustand 사이트 이상해요!! 웹브라우저에서 응답없음 반응

혹시 크롬에서 개발자 도구의 기기툴바전환(Ctrl + Shift + M)으로 모바일 상태로 터치만 되고 있지 않은 지 확인해 보세요.

onMouseEnter 관련 문의 드립니다

해당 코드에서 문제가 아니라 todoList 를 map으로 돌릴 때 key 값이 중복된다는 메세지이니반복되는 컴포넌트 요소에 key 프롭스를 어떻게 주었는지 확인해 봐야 합니다.<pre><code>// 아래와 같은 코드 내에서 key에 할당한 값이 중복되는 지를 확인해 보세요.
{todos.map((todo, index) => ( 
 <div key={index}>{todo}</div>
))}</code></pre>

할일 관리 앱(메모이제이션)

webstoryboy 님의 깃허브에 방문하여 소스코드에서 북붙하시면 됩니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/VSzP5">깃허브 주소는 강의 안내 페이지에 있습니다.</a>

Codingbear

投稿