React : 컴포넌트를 순수하게 유지하기

글이 마음에 드셨다면 커피를 사서 응원해 주세요. Buy me Coffee

---

구성 요소를 순수하게 유지

일부 JavaScript 함수는 순수해야 합니다. 순수 함수는 계산만 수행하고 다른 작업은 수행하지 않습니다. 구성 요소를 순수 함수로 작성하면 코드 기반이 커짐에 따라 혼란스러운 오류와 예측할 수 없는 동작을 모두 방지할 수 있습니다. 구성요소를 쉽게 관리할 수 있습니다.

---

청정

그럼 순수함수는 어떻게 만들 수 있을까요? 그리고 함수가 순수하려면 어떤 특성을 가져야 합니까? 순수 함수는 다음과 같은 특징을 지닌 함수여야 합니다:

• 자기 일에만 신경 쓴다. 호출되기 전에 존재했던 객체나 변수는 변경되지 않습니다.

• 동일한 입력, 동일한 출력. 동일한 입력이 주어지면 순수 함수는 항상 동일한 결과를 반환해야 합니다. 동일한 입력으로 다른 결과를 제공해서는 안 됩니다.

수학적 공식을 생각해 봅시다 : y = 2x

x = 2이면 y = 4입니다. 이 불변성은 항상 동일한 결과입니다.

x = 3이면 y = 6입니다. 이 불변성은 항상 동일한 결과입니다.

x = 3인 경우 다른 상황에 따라 y가 9, -1 또는 2.5가 아닐 수도 있습니다.

y = 2x이고 x = 3이면 y는 항상 6입니다.

이것을 JavaScript 함수로 만든다면 :

function getDouble(number) {
  return 2 * number;
}

getDouble은 순수 함수입니다. 3을 전달하면 6이 반환됩니다. 항상.

React는 이러한 개념을 바탕으로 구축되었습니다. 이는 각 구성 요소가 순수 함수처럼 동작한다고 가정합니다. 즉, React 구성 요소는 동일한 입력이 주어지면 항상 동일한 JSX 출력을 반환해야 합니다.

순수 화합물을 예를 들어 설명해보자.

function Member({ user }) {
  return (
    <ol>    
      <li> register {user} </li>
    </ol>
  );
}

export default function App() {
  return (
    <section>
      <Member user={2} />
      <Member user={4} />
    </section>
  );
}

사용자 매개변수가 무엇이든 항상 반환합니다.수학 공식처럼

---

결론

구성 요소는 순수해야 합니다, 의미:

본인의 일만 생각합니다. 렌더링 이전에 존재했던 객체나 변수를 변경해서는 안 됩니다.

동일한 입력, 동일한 출력. 동일한 입력이 주어지면 구성 요소는 항상 동일한 JSX를 반환해야 합니다.

위 내용은 React : 컴포넌트를 순수하게 유지하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!