재사용 가능한 구성 요소 - 확산 소품의 가치

나는 지난 몇 주 동안 돌아가서 React를 다시 방문했습니다. 이전 고용주와 이전에 경험한 후, 나는 내가 실제 아는 것보다 덜 알고 있다고 느꼈습니다. 그리고 그거 알아? 내가 옳았을 수도 있습니다. 나는 다시 새로운 것을 배우는 나를 발견하고 그것을 절대적으로 좋아합니다.

제 관심을 끌었던 것 중 하나는 재사용 가능한 구성 요소의 절대적인 가치입니다.

이 글을 읽으면서 참아주세요. 이것은 여기에 있는 나의 첫 번째 실제 게시물이므로 서식 지정에 대해 약간 불안하지만 최선을 다할 것입니다.

왜 재사용합니까?

나는 바로 그 질문을 하고 있는 나를 발견했다. 재사용 가능한 구성 요소의 진정한 가치를 깨닫지 못하고 있음을 발견했습니다. 그러나 이제 Udemy에서 일부 과정을 실행하는 동안 의미가 있습니다.

우리는 코드를 DRY 상태로 유지하고 싶습니다. 따라서 가능한 한 많은 코드를 재사용하고 싶은 것이 이해가 됩니다.

전적으로
사용자 지정 입력 구성 요소를 작성하면서 이것이 분명해졌습니다. 문자 그대로 당신이 던질 수 있는 모든 것을 받아들이고 입력을 생성하는 구성 요소를 만드는 능력은 놀랍습니다.

설정

먼저 양식 구성 요소와 입력 구성 요소가 있습니다. 입력 구성 요소는 필요한 모든 소품을 가져오고 양식에 입력 요소를 만듭니다.

하지만 잠깐, 단일 입력 요소를 생성하면 속성이 변경되면 어떻게 될까요?

그것이 나를 당황하게 만든 것입니다. 다른 곳에서처럼 소품을 펼칠 수 있다는 단서가 없었습니다.

따라서 양식과 입력 구성 요소가 있습니다. 정확히 어떻게 생겼습니까?

음, 다음과 같습니다.



꽤 표준적으로 보이죠? 일반 영어(또는 프로그래머 영어, 선택하세요 :)로 설명될 때까지 이해하지 못했습니다.

소품을 펼치면 키/값 쌍이 있는 일반 JavaScript 객체처럼 취급합니다.

무엇을 기다립니다?!

그래서, 당신은 당신이 일반적인 것과 같이 자바스크립트 객체를 생성할 수 있고 그것을 입력 속성으로 취급할 것이라고 말하는 건가요?

네

제가 직접 안믿어서.. 그래서 해봤습니다..


입력 구성 요소에서 props.input.xxxx를 호출하고 있다는 것을 기억하십니까? 따라서 기본적으로 키/값 쌍이 있는 개체인 "input"이라는 속성을 만들면 해당 개체를 양식 요소의 개별 속성으로 해석합니다. 따라서 본질적으로 다음과 같은 입력을 생성하고 있습니다(죄송합니다. 이미지가 없습니다..)

<input
  id="amount"
  type="number"
  min="1"
  max="5"
  step="1"
  defaultValue="1"
/>  

똑같은 것입니다.

이제 우리는 많은 코드를 다시 작성하지 않고도 모든 종류의 입력을 생성하는 전체 응용 프로그램에 대한 단일 입력 구성 요소를 가질 수 있습니다. 좋아, 나는 그것이 TON의 코드가 아니라는 것을 알고 있지만 줄이 적을수록 좋습니다. 맞습니까?

내가 말했듯이, 여기에 글을 쓰는 것은 이번이 처음이며 형식 오류를 용서하십시오. 오늘 배운 이 놀라운 작은 트릭을 아직 React에 젖어 있는 모든 새로운 개발자에게 보여주고 싶었습니다.