분류 Reactjs

React에 대한 완전한 소개(7)

컨텐츠 정보

  • 조회 264 (작성일 )

본문

카운트 상태 요소는 이제 CountManager 구성 요소에 있으므로 업데이트를 처리하기 위해 해당 레벨의 함수가 필요합니다. 이 함수의 이름을 incrementCounter로 지정하겠습니다. 이 함수의 논리는 실제로 Button 구성 요소의 handleClick 함수에서 이전과 동일한 논리입니다. 새로운 incrementalCounter 함수는 CountManager 구성 요소 카운트 상태를 업데이트하여 이전 값을 사용하여 값을 증가시킵니다.

const CountManager = () => {
  // ....

  const incrementCounter = () => {
    setCount(count + 1);
  }

  // ...
};

Button 구성 요소의 onClick 핸들러가 변경되어야 합니다. CountManager 구성 요소에있는 incrementCounter 함수를 실행하려고 하지만 구성 요소는 자체 기능에만 액세스 할 수 있습니다. 따라서 Button 구성 요소가 CountManager 구성 요소에서 incrementCounter 함수를 호출 할 수 있게 하려면 incrementCounter에 대한 참조를 소품으로 Button 구성 요소에 전달할 수 있습니다. 예, 소품은 데이터뿐만 아니라 기능도 보유 할 수 있습니다. 함수는 JavaScript의 객체 일 뿐이며 전달할 수 있는 객체와 같습니다.


이 새로운 소품의 이름은 무엇이든 지정할 수 있습니다. clickAction이라는 이름을 지정하고 CountManager 구성 요소에서 정의한 함수에 대한 참조 인 incrementCounter 값을 전달합니다. 이 새로운 전달 된 동작을 onClick 핸들러 값으로 직접 사용할 수 있습니다. Button 구성 요소의 소품입니다.

const Button = ({ clickAction }) => {
  return (
    <button onClick={clickAction}>
      +1
    </button>
  );
};

// ...

const CountManager = () => {
  // ...

  return (
    <div>
      <Button clickAction={incrementCounter} />
      <Display content={count} />
    </div>
  );
};


매우 강력한 무언가가 여기서 일어나고 있습니다. 이 clickAction 속성을 통해 Button 구성 요소는 CountManager 구성 요소의 incrementCounter 함수를 호출 할 수 있었습니다. 이 버튼을 클릭하면 Button 구성 요소가 CountManager 구성 요소에 도달하여 "부모님, 계속해서 증가 카운터 동작을 호출하십시오"라고 말합니다.


실제로 CountManager 구성 요소는 여기에서 제어되는 요소이며 Button 구성 요소는 일반적인 규칙을 따릅니다. 코드를 지금 그대로 분석하면 Button 구성 요소가 클릭시 발생하는 상황에 대한 단서가 없는 방법을 알게 됩니다. 부모가 정의한 규칙을 따르고 일반 clickAction을 호출합니다. 부모는 그 일반적인 행동으로 들어가는 것을 제어합니다. 이것은 책임 격리 개념을 따릅니다. 여기의 각 구성 요소에는 특정 책임이 있으며 그에 중점을 둡니다.


다른 예는 디스플레이 구성 요소를 보십시오. 관점에서 볼 때 카운트 값은 상태가 아닙니다. CountManager 구성 요소가 전달하는 소품입니다. 디스플레이 구성 요소는 항상 해당 소품을 표시합니다. 이것은 또한 책임의 분리입니다.


이러한 구성 요소의 설계자로서 책임 수준을 선택할 수 있습니다. 예를 들어, CountManager 구성 요소 자체의 카운트 값 부분을 표시하고 새로운 Display 구성 요소를 사용하지 않을 수 있습니다.


CountManager 구성 요소는 카운트 상태를 관리 할 책임이 있습니다. 그것은 우리가 결정한 중요한 디자인 결정이며 React 응용 프로그램에서 많은 것을 결정해야 할 결정입니다. 국가를 어디에서 정의합니까?


내가 따르는 관행은 공유 부모 노드에서 상태 요소에 액세스 해야 하는 모든 하위 요소에 가능한 한 가까운 상태 요소를 정의하는 것입니다. 이와 같은 작은 응용 프로그램의 경우 일반적으로 최상위 구성 요소 자체를 의미합니다. 더 큰 응용 프로그램에서 하위 트리는 최상위 루트 구성 요소에 정의 된 전역 상태 요소에 의존하지 않고 자체 상태 "분기"를 관리 할 수 ​​있습니다.


최상위 구성 요소는 다른 모든 구성 요소의 상위 항목이므로 공유 응용 프로그램 상태 및 작업을 관리하는 데 널리 사용됩니다. 최상위 구성 요소에서 상태 요소를 업데이트하면 전체 구성 요소 트리가 메모리에 다시 렌더링되므로 이 디자인에주의하십시오. 


지금까지 이 예제의 전체 코드는 다음과 같습니다.

// jsdrops.com/bx8

const Button = ({ clickAction }) => {
  return (
    <button onClick={clickAction}>
      +1
    </button>
  );
};

const Display = ({ content }) => (
  <pre>{content}</pre>
);

const CountManager = () => {
  const [count, setCount] = useState(0);

  const incrementCounter = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <Button clickAction={incrementCounter} />
      <Display content={count} />
    </div>
  );
};


컴포넌트 재사용 가능 


구성 요소는 모두 재사용 가능성에 관한 것입니다. Button 구성 요소를 변경하여 재사용 할 수 있게 하여 전체 개수를 1이 아닌 모든 값으로 증가시킬 수 있습니다.


CountManager 구성 요소에 Button 요소를 더 추가하여 이 새로운 기능을 테스트 해 보겠습니다.

const CountManager = () => {
  // ..

  return (
    <>
      <Button clickAction={incrementCounter} /> {/* +1 */}
      <Button clickAction={incrementCounter} /> {/* +5 */}
      <Button clickAction={incrementCounter} /> {/* +10 */}
      <Display count={count} />
    </>
  );
};


위에서 렌더링 된 모든 Button 요소에는 현재 +1 레이블이 있으며 카운트는 1 씩 증가합니다. 각 단추에 고유 한 다른 레이블을 표시하고 특정 값에 따라 다른 동작을 수행하도록하려고합니다. 그들 각각에게. 소품으로 React 요소에 값을 전달할 수 있습니다.


각 버튼을 한 번 클릭 한 후 염두에 두어야 할 UI는 다음과 같습니다.

multi button ui 


카운트는 0으로 시작했습니다. 1, 5, 10을 더하여 16이 되었습니다.


이 연습을 진행하기 전에 잠시 시간을 내어 생각해보고 직접 구현해보십시오. 대부분 간단합니다. 힌트 : Button에 대한 새로운 소품 1 개를 소개해야합니다. 기회를 주세요. 솔루션과 내 솔루션을 비교할 준비가 되면 돌아 오십시오. 


새로운 props 추가 


가장 먼저 해야 할 일은 Button 구성 요소의 +1 레이블을 사용자 지정 가능한 레이블로 만드는 것입니다.


React 컴포넌트에서 사용자 정의 가능한 것을 만들기 위해 우리는 새로운 소품 (부모 컴포넌트가 제어 할 수 있는)을 도입하고 컴포넌트가 그 값을 사용하도록 합니다. 이 예에서는 Button 구성 요소에 새 소품으로 증가량 (1, 5, 10)을 받도록 만들 수 있습니다. 이름을 clickValue로 지정하겠습니다. CountManager에서 render 메소드를 변경하여 테스트하려는 값을이 새로운 prop에 전달할 수 있습니다.

return (
  <>
    <Button clickAction={incrementCounter} clickValue={1} />
    <Button clickAction={incrementCounter} clickValue={5} />
    <Button clickAction={incrementCounter} clickValue={10} />
    <Display content={count} />
  </>
);

지금까지 이 코드에 대한 몇 가지 사항에 유의하십시오.

  • 백작과 관련된 것으로 새 부동산의 이름을 지정하지 않았습니다. Button 구성 요소는 클릭 이벤트의 의미를 인식하지 않아도 됩니다. 클릭 이벤트가 트리거 될 때 이 clickValue를 전달하면 됩니다. 예를 들어, Button 구성 요소에서 Button 요소가 카운트와 관련되어 있음을 이해하기 위해 코드를 읽으므로 이 새로운 속성 countValue의 이름을 지정하는 것이 최선의 선택이 아닙니다. 이렇게 하면 Button 구성 요소의 재사용 성이 떨어집니다. 예를 들어, 동일한 Button 구성 요소를 사용하여 문자를 문자열에 추가하려는 경우 코드가 혼동 될 수 있습니다.
  • 중괄호를 사용하여 새 clickValue 속성 (clickValue = {5})의 값을 전달했습니다. 거기에 문자열을 사용하지 않았습니다 (clickValue = "5"). 이 값과 관련된 수학적 연산이 있기 때문에 (버튼을 클릭 할 때마다)이 값이 숫자 여야 합니다. 문자열로 전달하면 추가 작업이 실행될 때 문자열을 숫자로 변환해야 합니다.

React에서 숫자를 문자열로 전달하는 것은 일반적인 실수입니다. 더 많은 React 관련 실수에 대해서는 이 기사를 참조하십시오. 


동작 사용자 정의 


CountManager 구성 요소에서 일반화해야 할 다른 항목은 incrementCounter 작업 함수입니다. 현재처럼 하드 코드 된 수 + 1 작업을 가질 수 없습니다. Button 구성 요소에서 수행 한 작업과 유사하게 함수를 일반화하려면 인수를 받고 해당 인수의 값을 사용합니다. 예를 들면 다음과 같습니다.

incrementCounter = (incrementValue) => {
  setCount(count + incrementValue);
};

이제 Button 구성 요소가 clickValue 소품을 레이블로 사용하고 clickValue를 인수로 사용하여 onClick 액션을 호출하도록해야합니다.

const Button = ({ clickValue, clickAction }) => {
  return (
    <button onClick={() => clickAction(clickValue)}>
      +{clickValue}
    </button>
  );
};


버튼의 clickValue에 바인딩 하기 위해 onClick 소품을 인라인 화살표 기능으로 감싸는 방법에 주목하십시오. 이 새로운 화살표 함수에 대한 JavaScript 클로저가 이를 처리합니다.


세 개의 버튼은 이제 세 가지 다른 클릭 값으로 증가합니다.


https://jscomplete.com/playground/bx9