반응은 당신에게 압도적 인 것처럼 보입니까?

그렇다면 당신은 혼자가 아닙니다.

나는 항상 이런 말을 듣는다 :

• React를 사용하지 마십시오. 대신 vue를 사용하십시오.

• 반응은 어렵고 쓸모가 없다. 대신 htmx 또는 vanilla js를 사용하십시오.

• 등.

그러나 Palantir에서 5 년의 경험을 가진 선임 프론트 엔드 엔지니어로서 나는 자신있게 말할 수 있습니다. “반응은 내가 배워야 할 가장 쉬운 일이었습니다. 이 게시물에서는 사람들이 사람들만큼 복잡하지 않은 이유와 어려움을 겪고 있다면 어려움을 해결하는 방법을 설명합니다.

준비가 된? 다이빙하자.

? 헤드 스타트를 위해 My Free 101 React Tips 및 Tricks Book을 다운로드하십시오.

반응이 어려운 7 가지 이유 (그리고 그것을 고치는 방법)

이유 1 : JavaScript를 충분히 잘 모릅니다

사람들은 JavaScript 기반이 견고하지 않기 때문에 시간의 99%를 반응하는 데 어려움을 겪고 있습니다.

이것은 나에게도 마찬가지였습니다. 처음에는 React 코드를 이해할 수 없었습니다. 나는 괜찮은 것을 쓰기 위해 몇 달을 보냈다. 내가 JavaScript를 배웠을 때 모든 것이 바뀌 었습니다.

반응을 배우기 전에 알아야 할 최소한은 다음과 같습니다.

원시 데이터 유형과 객체 데이터 유형의 차이
객체 파괴 구조
범위
클로저
async
등.
? kent c. dodds 의이 위대한 가이드를 확인하십시오.

JavaScript 기술이 향상되면 React는 훨씬 쉬워 질 것입니다.

? JavaScript를 배울 수있는 유용한 리소스에 대한 프론트 엔드 기술을 레벨링하는 방법을 확인하십시오.

이유 2 : 잘못된 도구를 사용하고 있습니다

반응이 처음이라면 구식이거나 지나치게 복잡한 도구를 선택하여 실패를 설정하지 마십시오 :

대신 vite로 시작하십시오. 빠르고 단순하며 초보자 친화적입니다. 나중에 감사 하시겠습니까?.

• 이유 3 : 당신은 혼란스러워 프레임 워크와의 반응 반응 ≠ next.js ≠ 리믹스.

next.js and remix는 Frameworks
• REACT

  위에 구축되어 전체 스택 애플리케이션을 생성합니다. reft를 배우기 위해 Next.js 또는 Remix를 알 필요가 없습니다. 그러나 당신은 반응을 알아야합니다

  중 하나를 사용하려면
.

그래서 먼저 React에 집중하십시오. 복잡성 층을 추가하기 때문에 프레임 워크가 나중에 올 수 있습니다.

이유 4 : 당신은 처음부터 모든 것을 만들려고 노력하고 있습니다

처음부터 모든 것을 처음부터 구축, 특히 접근성을 염두에두고 압도적 일 수 있습니다.

그러나 혼자 직면 할 필요는 없습니다. React의 아름다움은 당신의 삶을 더 편하게 만드는 도서관의 생태계입니다.

그것들을

바로 가기

로 생각합니다. 다른 사람이 이미 놀라운 것을 만들었을 때 왜 바퀴를 재발 명합니까? 여기에 몇 가지 예가 있습니다.

dnd-kit drag-and-drop 기능을위한 dnd-kit

스타일링을위한 shadcn/ui

가벼운 데이터를위한 swr

등.

이러한 도구를 활용하여 시간과 노력을 절약하십시오.

• 이유 5 : 당신은 소진되어 있지만 프레임 워크를 사용하지는 않습니다

• 시간이 부족하거나 리소스가 부족한 경우 (한 사람 팀과 같은), Remix 또는 Next.js와 같은 프레임 워크는 Lifesavers가 될 수 있습니다.
  사용시기 :
전체 스택 앱을 구축하고 있습니다
당신은 내장 라우팅, 서버 측 렌더링 및 더 많은

를 원합니다.

풀 스택 솔루션이 필요하지 않은 경우 React 라우터 및 몇 가지 필수 라이브러리에 반응하도록 고수하십시오.

이유 6 : 당신은 React의 렌더링 프로세스를 이해하지 못합니다 (그리고 성능 문제로 끝납니다)

React의 렌더링 프로세스를 이해하는 것은 성능 문제를 피하는 데 중요합니다.

• Reconciliation :
React는 가상 Dom을 실제 DOM과 비교하여 변경 사항을 파악합니다.
• 커밋 단계 :

  필요한 dom 요소 만 업데이트합니다.

그림 :

브라우저가 화면을 다시 인쇄합니다.

반응 렌더링 프로세스. 크레디트 : https://x.com/_georgemoller ]&&&&)uch]

1. 사람들이하는 일반적인 실수 :

2. Overusing useeffect

   :
많은 효과를 피할 수 있습니다. 효과가 필요하지 않을 수 있습니다.

3. 컨벤션을 따르지 않음 :
예를 들어, 목록을 렌더링 할 때 항상 고유 키를 사용하여 버그를 방지합니다.

이유 7 : 앱이 생산에서 깨집니다

앱이 개발 중이지만 생산이 중단되면 테스트와 유형 검사기를 추가 할 때입니다. 나는 알고있다. 하지만 내 말을 들어라.

그들은 당신의 안전망이며, 사용자에게 도달하기 전에 버그를 잡습니다.

당신의 미래 자아는 당신에게 감사 할 것입니다!

• 여기에 내가 추천하는 것은 다음과 같습니다.

  
  
  유형 확인자 :

  TypeScript를 사용합니다. 특히이 안내서를 통해 초보자 친화적입니다. Vite를 사용하는 경우 설정이 간단합니다.

• 테스트 및 유형은 디버깅의 시간을 절약하고 제정신을 유지할 수 있습니까?.

요약

• 소리가 들리는 것처럼 반응합니까? 아니요.

React는 JavaScript 라이브러리입니다. 복잡성의 대부분은 다음과 같습니다.

JavaScript를 충분히 알지 못합니다

혼란스러운 반응과 프레임 워크

모든 것을 직접하려고 노력합니다

반응 기본 사항이 내려다 보입니다

• 기억하십시오. 모든 전문가는 한때 초보자였습니다.

  올바른 사고 방식과 도구를 사용하면 React가 놀라운 앱을 구축하는 비밀 무기가 될 수 있습니다.

  당신은 이것을 얻었습니까?.

• 보너스 : 내 무료 eBook,

101 반응 팁 및 트릭

를 다운로드하고 더 매끄럽고 빠른 반응 앱을 구축하는 동안 좌절 시간을 절약합니다.

? 생각을위한 음식

// 다크 테마를 감지합니다 var iframe = docum if (document.body.classname.includes ( 'Dark-Theme')) { iframe.src = "https://platform.twitter.com/embed/tweet.html?id=1862406693444874439&theme=dark" }

• ? 문제를 발견하십시오

• // 다크 테마를 감지합니다 var iframe = docum if (document.body.classname.includes ( 'Dark-Theme')) { iframe.src = "https://platform.twitter.com/embed/tweet.html?id=18610177779249320435&theme=dark" }
• 그건 랩이야?.
  댓글을 남겨주세요? 당신의 가장 큰 도전을 React와 공유하려면, 당신을 위해 클릭 한 것.

그리고 "?" "를 떨어 뜨리는 것을 잊지 마십시오.

반응을 배우는 경우

무료

.

이와 같은 기사가 마음에 드시면 내

무료

뉴스 레터에 가입하십시오. 매일 팁을 원한다면 X/Twitter 또는 Bluesky에서 나를 찾으십시오.