맞춤형 React 갈고리를 사용하여 관심사 분리

React는 전 세계에서 가장 유행하는 전단 자바스크립트 프레임워크/UI 라이브러리 중의 하나임에 틀림없다.그러나 이것은 그것이 가장 좋다는 것을 의미하지도 않고, 모든 사람이 그것을 좋아한다는 것을 의미하지도 않는다.
놀랍게도 사람들이 리액션 뒤에 있는 좀 더 기술적인 이유 중 하나는 리액션의 가장 큰 특징JSX이다.React 구성 요소에서 HTML과 유사한 구문을 사용할 수 있는 표준 JavaScript 확장입니다.
React에서 이렇게 식별할 수 있는 부분은 읽기 쉽고 코드를 작성하기 쉬운 부분을 뚜렷하게 향상시키는 데 도움이 되는데 어떻게 사기극이 되었는가?이 모든 것은 관심사의 분리에 귀결된다.

관심사 분리
우리가 깊이 토론하기 전에, 나는 어떤 미세한 차이도 소홀히 하지 않고 관심의 분리가 무엇인지 확실하게 설명하고 싶다.
따라서 관심점의 분리는 서로 다른 개념/사물 사이에 뚜렷한 경계가 있음을 의미한다.프로그래밍에서 JSX는 이 규칙을 무시하는 뚜렷한 예이다.우리는 더 이상 단독 HTML 파일에서 구성 요소 구조를 설명하는 '템플릿' 과 JS 파일에서 그 논리를 설명하는 '템플릿' 이 아니라, 둘 (JS에서 CSS를 사용한다면 더 많은 것) 을 혼합하여 어떤 사람들은 완벽한 조화를 이루고, 다른 사람들은 통제되지 않는 혼란으로 여긴다.

개인적 선호
좋아, 그래서'관점'과'논리'를 혼합하면 관심사의 분리를 파괴할 수 있어.그러나 이것은 정말 엉망입니까? 이것은 구성 요소의 보기와 논리를 항상 분리해야 한다는 것을 의미하는 것입니까?
우선 관심의 결핍이 꼭 나쁜 것은 아니다.이것은 개발자나 팀의 개인적인 선호와 기타 준칙의 문제다.너는 논리와 관점을 분리할 필요가 없다.그러나 만약 네가 이렇게 한다면, 이것은 그것들 중 하나하나에 단독 파일이 필요하다는 것을 의미하지 않는다.가장 좋은 예는 Vue Single File Components(SFCs) 또는 간단한 순수한 HTML 파일인데 <script>와 <style> 표시가 포함되어 있다.

반응 갈고리
관심사를 분리하는 것은 하나의 일이지만, 반응은 다른 일이다.
따라서 React hooks는 상당히 긴 시간stable release 이후 2년 가까이 존재했기 때문에 상당히 유명하고 많은 다른 블로그와 개발자들에게 죽음으로 덮여 있다.하지만 다시 한 번 간략하게 개술해 봅시다.
React 갈고리는 개발자가 클래스 기반 특성이 아닌 기능 구성 요소 내부에 상태를 추가하고 다른 특수한 React 특성을 사용할 수 있도록 합니다.이 중 10개는 내장된 것(v17.01)으로 각각 다른 React 기능을 처리하는 데 사용되며, 그중 4개만 자주 사용하는 것(useState(),useEffect(),useContext()과useRef())이므로 자연스럽게create your own할 수 있습니다.이것은 우리가 가장 흥미를 느끼는 마지막 정보다.

맞춤형 연결
리액트 갈고리 자체는 잘 알려져 있어야 하지만 자신의 갈고리를 만드는 과정은 불가능하다.
봐라, 내장된 갈고리는 신뢰할 수 있는 React 구성 요소를 구축하기에 충분하다. 만약 그렇지 않다면, 거대한 React 생태계에서, 거의 틀림없이 어떤 소스 라이브러리에서 당신이 원하는 정확한 기능을 찾을 수 있을 것이다.그렇다면 필요하지 않다면 왜 맞춤형 갈고리에 대한 지식을 더 많이 배워야 합니까?

갈고리 생성하기
이것은 공평한 관점이다.맞춤형 갈고리는 어떤 일을 하는 데 필요한 조건은 아니지만, 당신의 삶을 더욱 가볍게 할 수 있을 것이다. 특히 관심사를 분리하는 것을 좋아한다면.
하지만 모든 것이 제때에 올 것이다.우선 - 맞춤형 고리를 어떻게 만들어요?좋아, 더 이상 간단할 수 없어.사용자 정의 갈고리는 다른 갈고리를 사용하는 함수일 뿐입니다.이렇게 간단해.그것도 따라야 한다. "rules of the hooks" ESLint와 proper official config 를 사용하면 쉽게 할 수 있지만, 그것뿐이다.
솔직히 말해서, 너는 심지어 이런 일을 할 필요가 없다. 다른 갈고리를 사용할 필요가 없다. (그러나 상당히 흔하다.) 코드의 질이 좋으면, 사용자 정의 갈고리 이름은 사용법부터 시작하고, 예상대로 갈고리를 사용한다면, 너는 문제없을 것이다.

예.
여기에 아주 간단한 갈고리가 하나 있는데, 그것은 매초에 한 번씩 제공되는 리셋을 운행한다. (왜냐하면 나는 더 좋은 방법을 생각해 내지 못하기 때문이다.)🙃):

const useTick = (callback) => {
  const handle = setInterval(() => {
    callback();
  }, 1000);

  return () => {
    clearInterval(handle);
  };
};

...다음은 당신이 그것을 어떻게 사용하는지입니다.

const Component = () => {
  const stopTick = useTick(() => {
    console.log("Tick");
  });

  return <button onClick={stopTick}>Stop ticking</button>;
};

다른 갈고리에 의존하는 갈고리에 대해 여기에 갈고리가 하나 있는데 useState()'백엔드'에서 강제로 구성 요소를 업데이트함으로써 뚜렷한 상태 변화가 나타나지 않는다.

const useForceUpdate = () => {
  const [value, setValue] = useState(true);

  return () => {
    setValue(!value);
  };
};

...다음은 사용 예입니다.

const Component = () => {
  const forceUpdate = useForceUpdate();

  return <button onClick={forceUpdate}>Update component</button>;
};

방주로 특히 이런 강제 업데이트는 통상적으로 사용되어서는 안 된다.대부분의 경우, 그것은 무의미하거나, 코드에 잠재적인 오류가 있음을 나타낸다.이 규칙의 유일한 예외는 제어되지 않는 부품입니다.

솔루션
이제 알 것 같아.내 예가 아무리 의미가 없어도, 논리를 주 구성 요소 함수에서 추상화하여 더욱 뚜렷하게 보일 수 있는 공통된 장점이 있다.
현재, 이것은 단지 이 생각을 확대하는 문제일 뿐이다. 잠재적으로 발생하는 갈고리를 구성 요소 파일 자체에서 옮겨 놓을 것이다. 봐라!너는 이미 너 자신의 걱정을 잘 분리했다. 반응 중에!
이것은 간단한 시사점인 것 같지만, 나는 단지 한동안 이 점을 생각하고, 내 React 프로젝트에서 그것을 사용했을 뿐이다. 그때부터 나는 이것이 매우 좋은 해결 방안이라는 것을 인정해야 한다.
너는 나의 생각에 동의하거나 동의하지 않을 수도 있지만, 이것은 결코 중요하지 않다.나는 단지 잠재적인 전략을 제시하여 너의 코드를 안배할 뿐이다. 나는 그것이 너를 도울 수 있기를 바란다.

모범 사례
그래서 만약에 당신이 최종적으로 적어도 당신의 프로젝트에서 이런 방법을 시도했다면 나는 확실히'최고의 실천'이 있을 것이다. 나는 개인적으로 따를 것이다. 이것은 당신을 흥미롭게 할 것이다.

구성 요소의 논리가 >10줄을 차지하거나 작은 갈고리가 대량으로 호출될 때만 이 정책을 적용합니다.

갈고리를 단독 파일에 넣었는데 이상적인 상황에서 이 파일에는 JSX.js와 .jsx 파일이 없을 것이다.

이름의 일치성을 유지한다. 예를 들어 logic.js나 hook.js에서 갈고리를 걸면 (적당한 갈고리 이름, 예를 들어 useComponentNameLogic() 구성 요소 자체가 view.jsx 또는 index.jsx 단일 폴더에서 선택할 수 있는 index.js 파일을 사용하여 필요한 위치를 다시 내보낸다.

JSX 파일에서 가장 간단한 리셋과 사건 탐지기만 보존하고 나머지는 갈고리로 옮긴다.

갈고리를 처리하는 JS 라이브러리에서 CSS(예를 들어 useStyles()를 사용하면 단독 파일에 넣고 너무 크지 않으면 구성 요소 파일의 맨 위에 놓는다.

갈고리를 정확하게 구성하는 코드를 기억해라. 논리가 서로 다른 구성 요소 사이에서 다시 사용되면 그 중 일부 코드를 외부 함수와 분리하고 심지어 더 작은 갈고리와 분리할 수도 있다.

당신은 어떻게 생각합니까?
이것이 바로 내가 React에서 관심점 분리를 실시하는 건의이다.이것은 당신이 반드시 사용해야 할 가장 좋은 방법입니까?물론 아니지만, 최선의 방법은 아예 없다.다시 한 번, 나는 이 책이 나의 필요에 적합하다는 것을 발견했다. 나는 너희들과 나누고 싶다. 그것도 너희들을 도울 수 있기를 바란다.
그렇다면, 당신은 이런 방법에 대해 어떤 견해를 가지고 있습니까?너는 내가 앞으로 개인 코드 스타일 기교를 공유할 댓글을 더 보고 싶니?만약 그렇다면 아래의 평론 부분에서 저에게 알려주세요.
여느 때와 마찬가지로 비슷한 내용을 더 많이 얻으려면 반드시 저를 계속 지켜봐 주십시오Facebook. 또는 통과my newsletter.읽기와 즐거운 인코딩 감사합니다!

This post was written with ease, made grammatically-correct, and cross-posted here within 1 click thanks to CodeWrite with its great editor, smooth Grammarly integration, and "one-click publishing". Try it for free, and use the code first100 to get 20% off your subscription (only $2.40/month!)