기능 컴포넌트: 컴포넌트 내부 또는 외부 중 어느 쪽에 쓰기 기능을 사용합니까?

기능 컴포넌트: 컴포넌트 내부 또는 외부 중 어느 쪽에 쓰기 기능을 사용합니까?

저는 종종 '클래스 아키텍처'에 따라 기능 컴포넌트를 작성했습니다.그 안에 컴포넌트와 관련된 모든 기능이 클래스 내의 메서드처럼 쓰여져 있습니다.

예를 들어, 여기에 있는 함수는counterAsFloat에 관련된Counter요소.보시다시피 컴포넌트 안에 이렇게 적어놨습니다.

export default function Counter() {
  const [counter, setCounter] = React.useState(0);

  const counterAsFloat = () => {
    return counter.toFixed(2);
  };

  return (
    <div className="counter">
      <h1>{counterAsFloat()}</h1>
      <button onClick={() => setCounter(counter + 1)}>
        Increment
      </button>
    </div>
  );
}

그러나 실제로는 컴포넌트 외부에 함수를 선언하고 파라미터와 함께 사용할 수도 있습니다.

const counterAsFloat = (counter) => { 
  return counter.toFixed(2);
};

export default function Counter() {
  const [counter, setCounter] = React.useState(0);

  return (
    <div className="counter">
      <h1>{counterAsFloat(counter)}</h1>
      <button onClick={() => setCounter(counter + 1)}>
        Increment
      </button>
    </div>
  );
}

기능 컴포넌트 이외의 기능을 기술하는 데 장단점이 있습니까?

이 질문은 상당히 의견을 바탕으로 한 질문이지만 고려해야 할 사항이 몇 가지 있습니다.

가독성과 재사용성을 확보하기 위해서는 범위를 벗어난 기능을 선언하는 것이 가장 중요합니다.

// Reuse logic in other components
const counterAsFloat = (counter) => { 
  return counter.toFixed(2);
};

// If Counter has complex logic, you sometimes want to compose it
// from functions to make it more readable.
export default function Counter() {
  ...

  return (...);
}

모든 렌더링에 함수를 선언하기 때문에 첫 번째 옵션이 성능이 떨어진다고 주장할 수 있습니다.

export default function Counter() {
  ...

  // declare the function on every render
  const counterAsFloat = () => {
    return counter.toFixed(2);
  };

  return (...);
}

이러한 경우는 섣부른 최적화입니다.이와 관련된 JavaScript closures 성능을 확인하십시오.

이 경우 함수를 인라인화하는 것이 훨씬 더 나은 접근법이라는 점에 유의하십시오.

export default function Counter() {
  ...
  return (
    <div>
      <h1>{counter.toFixed(2)}</h1>
      ...
    </div>
  );
}

조직이나 재사용 가능성을 위해 외부 함수를 사용할 수 있지만, 적어도 한 가지 이유로 기능 구성요소의 구조에 반하는 것 같습니다. 기능 구성요소에서 상태는 불변합니다.그래서 그것들은 보통 상수입니다.그리고 두 기능은 다소 비슷해 보이지만, 이 특징에 관해서는 크게 다릅니다.다음 코드를 예로 들 수 있습니다.

const a = 2;
function increment(){
    return ++a;
}
increment();

이는 명백히 금지되어 있으며 상수를 변경할 수 없습니다.

다르게 쓰세요:

 const a = 2;
 function increment(a){
    return ++a;
 }
 increment(a);

마지막은 허용됩니다.적어도 빠르게 보면 예상한 결과를 얻을 수 없지만 컴파일되어 런타임 오류는 발생하지 않습니다.

이것을 예시로 바꾸세요.먼저 toFixed(2)를 사용하여 단순히 yourt 카운터를 출력하고 외부 함수를 생성한다고 가정합니다.그러나 그 후 5를 초과하면 카운터를 리셋할 것을 결정합니다.그럼 이렇게 해 주세요.

const counterAsFloat = (counter) => {
    if(counter > 5){
       counter = 0;
    }
    return counter.toFixed(2);
};

이는 허용되며 컴파일되어 실행됩니다.예상한 결과는 나오지 않겠지만, 분명하지는 않을 거예요.내부 기능은 다음과 같이 동작할 수 있습니다.

const counterAsFloat = () => {
    if(counter > 5){
       counter = 0;
    }
    return counter.toFixed(2);
};

그러나 내부 스코프 카운터는 상수이기 때문에 컴파일 오류 또는 적어도 런타임 오류가 발생합니다.교환을 통해 신속하게 수정할 수 있습니다.counter = 0;타타에 setCounter(0);이것이 이 요건을 처리하는 적절한 방법입니다.

최종적으로는 컴포넌트 내부에 머무름으로써 스테이트의 가치가 무엇인지를 명확하게 알 수 있습니다.또, 외부 기능에서는 눈에 띄지 않는 금지된 조작에 대해서도 명확한 피드백을 얻을 수 있습니다.

외부 함수의 예를 참조하십시오. 작동하지만 예상한 결과를 제공하지 않습니다.

const counterAsFloatOutside = (counter) => {
    if(counter > 5){
        counter = 0;
    }
    return counter.toFixed(2);
 };
  

 function Counter() {
  const [counter, setCounter] = React.useState(0);
  

  return (
    <div className="counter">
      <h1>{counterAsFloatOutside(counter)}</h1>
      <button onClick={() => setCounter(counter + 1)}>
        Increment
      </button>
    </div>
    
  );
}
ReactDOM.render(React.createElement(Counter, null), document.body);

 <script type="text/javascript" src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

내부 기능에서는 동작하지 않습니다.이 경우는, 이 기능이 바람직합니다.컴파일 툴을 사용하면 사전에 오류가 발생할 수 있기 때문에 다음과 같은 큰 이점이 있습니다.

  

 function Counter() {
  const [counter, setCounter] = React.useState(0);
  const counterAsFloat = () => {
    if(counter > 5){
        counter = 0;
    }
    return counter.toFixed(2);
 };

  return (
    <div className="counter">
      <h1>{counterAsFloat()}</h1>
      <button onClick={() => setCounter(counter + 1)}>
        Increment
      </button>
    </div>
    
  );
}
ReactDOM.render(React.createElement(Counter, null), document.body);

<script type="text/javascript" src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

언급URL : https://stackoverflow.com/questions/62848106/functional-component-write-functions-inside-or-outside-the-component