반응 속에서 어떻게 게으르는지 배우기: 초보자 안내서.

만약 당신이 개발자의 글을 많이 읽은 사람이라면, 아마도 한두 번 들었을 것이다. (혹은 사람들에 따라 구역질이 나는) 가장 좋은 개발자는 게으른 사람이다!그것들은 가능한 한 낮은 복잡성으로 가능한 한 많은 작업을 완성하였으며, 동시에 코드의 가독성을 유지하였다.
다행히도,react 우선 조합은 계승 (즉 구성 요소 사용) 이 아니라 가능한 한 게으름 (효율적) 을 권장합니다.

그렇다면 영어의 구성 요소는 무엇입니까?

구성 요소는 도구입니다.부품은 자동차 배터리를 수리해야 할 때 배터리 끝을 조이는 스패너로, 때로는 12호가 필요하기 때문에 12호의 도구를 준다.다른 때는 문제에 따라 조금 크거나 작은 사이즈가 필요합니다.
조금 느린 날에, 당신이 원한다면, 구성 요소는 냄비나 프라이팬입니다.만약 네가 계란 두 개를 부쳐야 한다면, 너는 큰 솥이 필요하지 않을 것이다. (또는 너는 큰 도구가 필요하지 않다.)너는 작은 도구를 건네주고 필요에 따라 계란을 부쳐 자신에게 좋은 반응 쾌감을 주어라.
만약 당신이 초보자라면, 단지'react에서 생각하기'의 비결을 배우는 것일 뿐, 몇 주, 심지어 몇 달이 걸려야 구성 요소를 다시 사용할 수 있는 기능을 완전히 파악하고 이용하기 시작할 수 있다.
본문 겸 강좌는 재사용 가능한 구성 요소를 구축하여 여정을 완성하는 데 도움을 줄 것입니다.

패드 어셈블리 a.k.a "Shift abeg".

Don't worry if you don't understand the alias, it's a Nigerian slang for "gimme some space". I've found that making your code as relatable as possible makes it stick faster.

두 마리의 여우는 클라우드 비주얼을 통해 상대방에게'이동abeg'사진을 알려준다.Unsplash에 대한 co.uk
그래서 당신은 전단 개발자이기 때문에 많은 일을 위해 이윤을 늘려야 합니다.좋은 날, 대부분의 유행하는 css 라이브러리가 당신을 위해 처리됩니다.하지만 다시 한 번 말하지만, 로켓통으로 칼싸움을 하는 사람이 되고 싶지 않아...때로는 간단한 로컬 페이지 간격 속성만 있으면 된다.
그래서 당신은 곳곳에 margin 속성이 있습니다. 구성 요소 클래스에 추가합니다. 추가 유형을 싫어하지만, 당신은 무엇을 할 수 있습니까?간단한 대답은 "게으르다!"
만약 당신이 도구를 받아들일 수 있는 구성 요소를 만들 수 있다면, 이 도구는 최소한의 지령으로 당신이 얼마나 많은 공간을 필요로 하는지 확정할 수 있습니다. 어떻게 해야 합니까?

단계 1: 구성 요소 비계를 만듭니다.

import React from 'react'

export default Spacer = () => {}

2단계: 행동 하나 주기

import React from 'react'

export default Spacer = () => {
return(
<div style={{margin: ""}}></div>
)
}

이런 상황에서 우리는 우리의 구성 요소가 우리를 위해 차를 수리하거나 계란을 부치는 것을 원하지 않는다...비록 지금 이것들은 모두 매우 좋지만, 우리가 그것을 응용하기만 한다면, 우리는 약간의 공간이 필요하다.

3단계: 아이템을 전달합니다.

도구를 들었을 때, 머리가 흐려지면 속성의 줄임말일 뿐...예를 들어 하나의 대상은 어떻게 하나의 속성(또는 키)과 이 속성과 관련된 값을 가지고 있습니까?

import React from 'react'

export default Spacer = (props) => {
return(
<div style={{margin: props.unit }}>{props.children}</div>
)
}

잠깐만, 잠깐만, 난 우리가 공간을 원하는 줄 알았어. 왜 우리 부품에 아이가 있어?!

이제 냉정을 유지하자. 우리의 구성 요소가 아이를 필요로 하는 이유는 우리의 구성 요소가 공간을 만드는 능력을 무엇에 적용하는지 관심을 갖기 싫기 때문이다.우리는 단지 그것이 공정하고 청렴하기를 바랄 뿐이다Shift-abeg(er).그래서'children'은 본질적으로 말하자면, 당신들은 무엇을 얻을지 모르지만, 그것이 무엇이든지, 그것에 대해margin 속성을 적용합니다.
다음으로 우리 단위 도구는 마술이 일어나는 곳이다.현재, 우리는 Shift-abeg 분량이 그것에 전달되는 모든 숫자 (픽셀 단위) 에 거리를 제공하기를 희망한다.현재 우리의 간격자는 이 속성이 숫자여야 한다는 것을 모르기 때문에, 우리는 이전에'date'반응에 사용됐던 가방에 도움을 요청했지만, 나중에 그들은 헤어졌다.슬픔, 알아요.
이 가방은'아이템 유형'이라고 합니다.이것은 구성 요소가 언제 정확한 도구를 전달할지 알 수 있도록 도구의 데이터 형식을 검사하는 데 도움이 된다. 반대로도 마찬가지다.

설치 도구 유형...

 npm install prop-types  || yarn add prop-types

우리가 설치를 끝낸 후에, 우리는 그것을 우리의 구성 요소에 추가하여, 하나의 단원 도구로서 무엇을 받아들여야 하는지 이해하게 한다.

import React from 'react';
import PropTypes from 'prop-types';

export default Spacer = (props) => {
return(
<div style={{margin: props.unit }}>{props.children}</div>
)
}


Spacer.propTypes = {
   unit: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}

당황하지 마!유닛 = "5px"또는 유닛 = "5em"등 내용을 추가하려면 문자열이 필요합니다.우리가 단지 이렇게 하려고 할 때, 그것은 반드시 하나의 숫자를 기대해야 한다. 단위 = {5}.

우리의 간격 구성 요소가 곧 완성될 것이다!

현재, 우리의 간격 구성 요소는 우리에게 좋은 여분을 줄 수 있지만, 만약 우리가 여분을 원한다면?아니면 보증금?그것은 이 방면에서 실패했다.우리는 일을 망치려고 애쓰고 있다. 그렇지?
한 걸음 더 나아가겠습니다.

import React from 'react';
import PropTypes from 'prop-types';

export default Spacer = (props) => {
return(
<div style={{
   margin: props.unit,
   marginLeft: props.left,
   marginRight: props.right,
}}>
   {props.children}
</div>
)
}


Spacer.propTypes = {
   unit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   left: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   right: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   children: PropTypes.elementType
}

Proptypes.elementType means: "hey Spacer, expect your children props to be react elements"미쳤어!'너무 좋아!'이런 상황에서) 우리는 곧 도착할 것이다.이제 우리의 간격은 그것에게 전달되는 모든 서브어셈블리를 왼쪽이나 오른쪽으로 이동시킬 수 있다.
하지만 사소한 문제가 하나 있는데...
전달치가 없으면?그 행사에서 우리는 퇴로가 없었다.예를 들어 만약에 우리가 왼쪽에 공백을 준다면 이것은 우리가 찾고 있는 행위이기 때문에 기대치의 간격과 오른쪽 공백 스타일 아이템은 어떤 변화가 일어날까요?
우리는 이 문제를 해결한다.

import React from 'react';
import PropTypes from 'prop-types';

export default Spacer = (props) => {
return(
<div style={{
   margin: props.unit || "",
   marginLeft: props.left || "",
   marginRight: props.right || "",
}}>
   {props.children}
</div>
)
}


Spacer.propTypes = {
   unit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   left: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   right: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   children: PropTypes.elementType
}

Ta da!우리는 구성 요소가 어떤 스타일의 속성에도 전달되지 않은 상황에서 오류를 던지지 않을 것을 확보했다.

선생님, 위아래 거리가 어떻게 됩니까?

이것은 매우 아름다운 일이다. 만약 당신이 구성 요소의 꼭대기나 밑에 공간을 남기고 싶다면, 어떤 아이에게도 전달할 필요가 없다.픽셀 단위로 필요한 공간을 지정한 다음 대상 구성 요소의 위나 아래에 배치하는 unit 도구를 전달하기만 하면 됩니다.
작용하는 패드:

import React from 'react';
import Spacer from './components/common/Spacer'; 

const App = () => {

return (
  <div>
  <Spacer unit={40}/>
  <ComponentThatNeedsAMarginTopProperty />
  </div>
)

}


export default App;

일반 보증금 전력:

import React from 'react';
import Spacer from './components/common/Spacer'; 

const App = () => {
//This would give it space to the left side of the component!
return (
  <div>
  <Spacer left={40}>
  <ComponentThatNeedsAMarginLeftProperty /> 
  </Spacer>
  </div>
)

}


export default App;

A side note(updated):
Please note that using the style property of jsx tags give them more power over your styles than classes. This could lead to issues that make css hard to debug, classes are better as rightly pointed out in the comments section. However for the purpose of keeping this tutorial as beginner-friendly as possible, I'll leave as is.
</code> 


##Laziness is Achieved!
Congrats dear beginner! You've made a reusable component! Now the amount of time you spend writing margin-this or margin-that for classes have reduced significantly. You can now spend more time on other parts of your code! This is just a brief introduction to the power of re-usability to the uninitiated in React. Hope this helped. 

Stay lazy.