여러분 안녕하세요,

오랜만에 Monkeytype clone in React . 나는 그 당시 초보자였기 때문에 Class Components 접근 방식으로 전체 앱을 작성했고 이것이 React 앱을 만드는 가장 쉬운 방법이었습니다. 그러나 시간이 지나면 왜 이것이 최선의 방법이 아닌지 이해하게 되었습니다.

클래스 대신 기능적인 이유는 무엇입니까?

클래스 기반 구성 요소에서는 기능과 UI가 매우 밀접하게 통합되어 있기 때문에 한 구성 요소의 기능을 다른 구성 요소에서 사용할 수 없습니다.

클래스 기반 구성 요소의 상태는 this.setState() 를 사용하여 변경됩니다. 여러분 중 일부는 여기에서 문제를 관찰했을 수 있습니다. 다른 사람들에게는 "이것"이 문제입니다. 도우미 함수가 동일한 범위에 있지 않을 때 상태를 변경하는 것을 방지/어렵게 만듭니다.

클래스 기반 구성 요소로 인해 다음 문제가 발생합니다.

낮은 재사용성

예를 들어 클래스 구성 요소에 counterIncrement 함수가 있는 경우입니다. 카운터를 늘리기 위해 this.setState()를 확실히 사용할 것입니다. 해당 클래스에만 바인딩되어 있기 때문에 다른 구성 요소에서 해당 counterIncrement를 사용할 수 없습니다.

복사

우리는 다른 모든 구성 요소에 동일한 counterIncrement 함수를 작성하거나 어떻게든 이를 소품으로 전달해야 하며 이는 모든 곳에서 많은 중복 코드를 생성합니다.

복잡성 증가

우리가 함수를 전달하고 생성하기 때문에 어떤 함수가 무엇을 하고 있는지 혼란을 야기합니다.

여행의 시작

최근에 Function Components를 사용하여 전체 앱을 다시 작성했습니다. 나는 소품으로 너무 많은 상태를 전달하고 있음을 알았습니다.

상태 관리 전 결과 구성 요소:

<Result
    words={this.words}
    typedHistory={this.state.typedHistory}
    timeLimit={this.state.timeLimit}
    spaces={this.words.indexOf(this.state.currWord)}
    resetTest={() => this.resetTest()}
/>

그 시점에서 저는 상태 관리 라이브러리가 필요하다는 것을 알았습니다. 그래서 React 팀원들이 공동 개발한 redux를 선택했습니다. 모든 것을 매우 쉽게 관리할 수 있습니다. 반면 앱에 redux를 통합하려면 모든 핵심 기능을 다시 작성해야 했습니다.

상태 관리 후 결과 구성 요소:

<Result />

깔끔해보이네요✨ .

자, 이제 소품을 어떻게 전달하고 있습니까? 이에 대한 대답은 react-redux 라이브러리의 useSelector() 후크입니다. 모든 구성 요소 조각에서 상태를 가져옵니다.

Redux 단어는 무섭게 보이지만, 당신이 하는 일을 안다면 그렇게 끔찍하지도 않습니다. 나는 react-redux 라이브러리로 작업하는 것을 즐겼습니다. 타이프 스크립트로 인해 약간의 딸꾹질이 있었지만 다른 모든 것은 예상대로 작동했습니다.

또한 기능적 접근 방식으로 전환한 후 약간의 성능 향상을 발견했습니다. 그냥 위약일 수도 있지만, 타이핑 테스트는 이전보다 훨씬 부드럽게 느껴집니다.

나는 사람들이 반응 앱을 만들 때 기능적 접근 방식을 사용하도록 권장합니다. 장기적으로 코드를 쉽게 유지 관리할 수 있습니다.

여기에서 새롭고 신선한 타이핑 테스트 코드를 확인할 수 있습니다.

살만노트칸 / 타이핑 테스트

React로 테스트 웹사이트 빌드 입력하기

타이핑 테스트

참고: 이것은 이미 존재하는 것monkeytype을 재현한 것입니다.
이 사이트는 현재 활성화되어 있습니다: Visit Here

로컬에서 실행하는 방법

git clone https://github.com/salmannotkhan/typing-test.git
cd typing-test
npm install
npm start     # to start local server at `localhost:3000`
npm run build # to create production build run

새로운 테마 아이디어가 있습니까?

귀하의 테마 아이디어를 타이핑 테스트에 병합해 드리겠습니다. 새 테마를 추가하려면:

테마 색상을 다음 형식으로 src/stylesheets/themes.scss에 추가합니다.

.theme-name {
    --bg-color: <background-color here> !important;
    --font-color: <font-color here> !important;
    --hl-color: <highlight-color here> !important;
    --fg-color: <forground-color here> !important;
}

Note:
highlight-color is used for caret, wrong characters, timer, selected and onhover colors
forground-color is used for correctly typed characters
Using hex codes for colors is recommended

테마 이름 추가 src/components/Header.tsx …

View on GitHub


이전 기사:

타이핑 테스트: ReactJS의 원숭이 유형 클론

Salman Shaikh ・ 8월 5 '21 ・ 1분 읽기

#react #javascript #typescript #showdev