React가 벅차다고 느껴지시나요?
그렇다면 당신은 혼자가 아닙니다.
저는 항상 이런 말을 듣습니다:
React를 사용하지 마세요. 대신 Vue를 사용하세요.
React는 어렵고 쓸모가 없습니다. 대신 HTMX 또는 Vanilla JS를 사용하세요.
기타
하지만 Palantir에서 5년 간 경력을 쌓은 수석 프론트엔드 엔지니어로서 저는 자신있게 말할 수 있습니다. “React는 제가 배운 것 중 가장 쉬웠어요.”
이 게시물에서는 React가 사람들이 생각하는 것만큼 복잡하지 않은 이유와 어려움을 겪고 있는 경우 문제를 해결하는 방법에 대해 설명하겠습니다.
준비됐나요? 뛰어들어 보세요.
? 빠른 시작을 위해 무료 101가지 React 팁 및 요령 책을 다운로드하세요.
사람들은 JavaScript 기초가 탄탄하지 않기 때문에 99%의 시간 동안 React를 사용하는 데 어려움을 겪습니다.
저도 마찬가지였습니다. 처음에는 React 코드를 이해할 수 없었습니다. 나는 괜찮은 글을 쓰기 위해 몇 달을 고생했습니다. JavaScript를 배우면서 모든 것이 바뀌었습니다.
React를 배우기 전에 알아야 할 최소한의 사항은 다음과 같습니다.
기본 데이터 유형과 객체 데이터 유형의 차이점
객체 분해
범위
휴업
비동기
기타
? React에 대해 알아야 할 JavaScript 개념에 대한 Kent C. Dodds의 훌륭한 가이드를 확인하세요.
JavaScript 기술이 향상되면 React가 훨씬 쉬워질 것입니다.
? JavaScript를 배우는 데 유용한 리소스에 대한 내 게시물인 프런트엔드 기술 수준을 높이는 방법을 확인하세요.
React를 처음 접하는 경우 오래되었거나 지나치게 복잡한 도구를 선택하여 실패에 대비하지 마세요.
사용하지 마세요 Create React App: 오래되고 느리며 확장성이 부족합니다.
사용하지 마세요 Next.js (지금은): 놀랍지만 필요하지 않은 학습 곡선을 추가합니다. 초보자입니다.
대신 Vite로 시작하세요. 빠르고 간단하며 초보자에게 친숙합니다. 나중에 나한테 고마워할거야?.
리액트 ≠ Next.js ≠ 리믹스
Next.js와 Remix는 풀 스택 애플리케이션을 만들기 위해 React 위에 구축된 프레임워크입니다.
React를 배우기 위해 Next.js나 Remix를 알 필요는 없습니다.
하지만 React를 알아야 합니다 이 중 하나를 사용하려면.
그러니 먼저 React에 집중하세요. 프레임워크는 복잡성을 더하기 때문에 나중에 나올 수 있습니다.
특히 접근성을 염두에 두고 모든 것을 처음부터 구축하는 것은 부담스러울 수 있습니다.
하지만 혼자 감당할 필요는 없습니다.
React의 아름다움은 삶을 더 쉽게 만들어주는 라이브러리 생태계입니다.
단축키라고 생각하세요. 다른 사람이 이미 놀라운 바퀴를 만들었는데 왜 바퀴를 다시 만들까요?
다음은 몇 가지 예입니다.
드래그 앤 드롭 기능을 위한 dnd-kit
스타일링을 위한 shadcn/ui
경량 데이터 가져오기를 위한 SWR
등
이러한 도구를 활용하여 시간과 노력을 절약하세요.
시간이나 리소스가 부족한 경우(예: 1인 팀) Remix 또는 Next.js와 같은 프레임워크가 생명의 은인이 될 수 있습니다.
사용 시기:
인력이 부족합니다
풀스택 앱을 구축 중입니다
내장 라우팅, 서버 측 렌더링 등을 원하는 경우
풀 스택 솔루션이 필요하지 않다면 React Router와 몇 가지 필수 라이브러리를 사용하여 React를 사용하세요.
성능 문제를 피하려면 React의 렌더링 프로세스를 이해하는 것이 중요합니다.
렌더링: React는 구성 요소 함수(또는 클래스 구성 요소 렌더링 메서드)를 호출하여 가상 DOM을 생성합니다.
조정: React는 가상 DOM과 실제 DOM을 비교하여 무엇이 변경되었는지 파악합니다.
커밋 단계: React는 필요한 DOM 요소만 업데이트합니다.
칠하기: 브라우저가 화면을 다시 그립니다.
사람들이 저지르는 흔한 실수:
렌더링이 너무 많음: 상태를 최소화하고, 구성 요소 트리에서 상태를 낮게 유지하고, 필요한 경우 메모 기능을 사용하여 이 문제를 해결하세요(@@하지 마세요?: 메모 기능은 인생을 바꿀 수 있습니다). .
? React 재렌더링에 대한 이 가이드를 확인하세요.
과도한 사용 useEffect: 많은 효과를 피할 수 있습니다. 효과가 필요하지 않을 수도 있습니다.
규칙을 따르지 않음: 예를 들어 목록을 렌더링할 때 버그를 방지하려면 항상 고유 키를 사용하세요.
앱이 개발 단계에서는 작동하지만 프로덕션 단계에서는 중단되는 경우 테스트와 유형 검사기를 추가해야 합니다.
알아요, 알아요. 테스트와 TypeScript가 과잉처럼 들릴 수도 있습니다. 하지만 내 말을 들어보세요.
버그가 사용자에게 도달하기 전에 잡아내는 안전망입니다.
미래의 당신도 감사할 거예요!
제가 추천하는 내용은 다음과 같습니다.
유형 검사기: TypeScript를 사용하세요. 특히 이 가이드에서는 초보자에게 친숙합니다. Vite를 사용한다면 설정은 간단합니다.
테스트: 다른 설정에는 Vite 또는 React 테스트 라이브러리와 함께 Vitest를 사용하세요.
테스트와 유형을 사용하면 디버깅 시간을 절약하고 정신을 차릴 수 있습니다.
React가 듣기만큼 어려운가요? 아닙니다.
React는 단지 JavaScript 라이브러리일 뿐입니다. 대부분의 복잡성은 다음에서 비롯됩니다.
JavaScript를 잘 알지 못함
React와 프레임워크의 혼동
모든 것을 스스로 하려고 노력
React 기본 사항 간과
모든 전문가는 한때 초보자였다는 점을 기억하세요.
올바른 사고방식과 도구를 갖춘 React는 놀라운 앱을 구축하기 위한 비밀 무기가 될 수 있습니다.
이거 가지고 계시나요?.
보너스: 무료 eBook 101 React Tips & Tricks를 다운로드하여 더 원활하고 빠른 React 앱을 구축하는 동안 좌절하는 시간을 절약하세요.
완전 그렇죠?.
댓글을 남겨주세요. React와 관련된 가장 큰 과제나 그것이 당신을 클릭하게 만든 이유를 공유하세요.
"???"를 삭제하는 것도 잊지 마세요.
React를 배우고 있다면 내 101 React Tips & Tricks 책을 무료
다운로드하세요.이런 기사가 마음에 드신다면 제 무료 뉴스레터 FrontendJoy
에 가입하세요.일상적인 팁을 원하시면 X/Twitter 또는 Bluesky에서 저를 찾아주세요. <script> // Detect dark theme var iframe = document.getElementById('tweet-1862406693444874439-370'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1862406693444874439&theme=dark" } </script>
위 내용은 React는 들리는 것만큼 어렵고 복잡합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
