React에서 반응형 컴포넌트 작성하기

이 게시물에서 우리는 반응에서 특정 후크의 구현과 사용자 정의 후크를 만드는 방법을 이해하게 될 것입니다. 이 게시물에서 우려되는 후크는 다음과 같습니다. "useEffect", "useRef"및 "useState". 그런 다음 구성 요소를 반응형으로 만들기 위해 이러한 후크를 사용자 지정 후크를 만들기 위해 통합할 수 있는 방법을 설명하겠습니다. 후크는 기능적 구성 요소에서만 사용할 수 있음을 이해해야 합니다.
둘째, 모든 react-hook의 이름은 설명적입니다. 단어를 둘로 "음절화"함으로써;
use: 이 함수는 후크이고 나머지 절반(예: Effect, State, Ref, Memo 등)은 해당 후크가 수행하는 작업을 정확히 나타냅니다.
셋째, 후크에는 규칙이 있습니다. 따라서 사용 사례에 관계없이 모든 후크에 적용되는 이러한 규칙을 먼저 이해하는 것이 중요합니다.
그런 다음 앞서 언급한 후크의 기능과 사용 위치를 이해하여 계속 진행해 보겠습니다.
효과(useEffect): 이름에서 알 수 있듯이 이 후크는 기본적으로 효과를 구현하는 데 사용됩니다. 종속성 배열의 변수에서 관찰된 변경으로 구성 요소를 다시 렌더링합니다. 이것은 다음을 의미합니다. 예를 들어 구성 요소가 새 사용자가 방금 등록했음을 인식하도록 하여 이 새 사용자를 렌더링할 수 있도록 하려면 구성 요소에 고유하거나 전역 상태(context-API 또는 Redux)는 이 이벤트를 인식하고 따라서 종속성 배열에 보관되어 구성 요소의 다시 렌더링을 트리거합니다. 일반적인 사용법은 다음과 같습니다.

    useEffect(() => {
      //....call an API or something else
    }, [variable] // the dependency array); 

상태(useState): 기능 구성요소에서 변수의 상태를 조절합니다. 예를 들어 가입 양식을 제출하고 싶습니다. 그런 다음 아래 작업을 수행할 수 있습니다.

interface SignupDataInterface {
    firstname: string,
    lastname: string,
    email: string,
    phone: string,
    password: string,
}

   const [signupData, setSignupData] = useState<SignupDataInterface>({
                                          "firstname": "",
                                          "lastname": "",
                                           "email": "",
                                           "phone": "",
                                           "password": "",
                                           })

useState 후크는 배열 "구조화"기능을 사용하여 변수를 제공합니다. signupData 및 이 변수의 값을 변경하는 메서드. 어떤 방법으로도 변수 값을 변경해서는 안 됩니다. 그러나 useState에서 제공하는 메서드를 사용합니다.
Ref(useRef): 다시 렌더링한 후 변수 값을 유지하고 싶다고 가정하면 useRef는 주로 이 목적, 즉 변수의 이전 값을 추적하는 데 사용됩니다. 그렇게 사용됩니다.

const initialScreenWidth = useRef(window.innerWidth).current;

위의 변수는 re-render와 상관없이 장치의 초기 화면 너비를 유지합니다. useRef-hook에 대한 다른 사용 사례가 있습니다. 결과를 확인하십시오!.
이제 커스텀 후크를 생성해 보겠습니다. 그 이유는 응답성을 구현하기 위함입니다. 그런 다음 응용 프로그램이 장치의 치수를 실시간으로 인식하기를 원함을 의미합니다.
이 후크를 작성합시다. 나는 그것을 useWindowDimension이라고 불렀다(첫 번째 단어를 주목하라; "use"):

import { useEffect, useState, useRef } from "react";

interface DimensionInterface {
    width: string | number,
    height: string | number
};

const useWindowDimension = () => {
    // First get the devices dimensions as default value.
    const currentWidth = useRef(window.innerWidth).current;
    const currentHeight = useRef(window.innerHeight).current;

    // This is the effective way of doing it, as opposed to     setting a random value which definitely, isn't true for all devices.
    const [windowDimension, setWindowDimension] = useState<DimensionInterface>({
        width: currentWidth,
        height: currentHeight
    });

// As the devices dimensions change at any time, get the current dimension and set the new dimension as the prevai
    const getDimension = () => {        
        setWindowDimension({
            width: window.innerWidth,
            height: window.innerHeight
        });
    };
    useEffect(() => {
        window.addEventListener("resize", e => getDimension());
        return () => window.removeEventListener("resize", e => getDimension());
    }, []);

    return windowDimension;
};


export default useWindowDimension;

이제 p-태그가 다양한 너비의 헤더 크기를 표시하기를 원한다고 가정하면 P-태그용 구성 요소를 작성합니다.

import React, {HTMLProps} from 'react'
import useWindowDimension from "../../helpers/useWindowDimension";

interface Props extends HTMLProps<any> {

};

const ParagraphHeaderComponent = (props: Props) => {
    const { width } = useWindowDimension();

    return (
        <p style={{display: "flex", width: "100%", justifyContent: "center", alignItems: "center", fontSize: width > 500 ? "27px" : "23px", fontFamily: "serif"}}>
            {props.children}
        </p>
    );
};


export default ParagraphHeaderComponent;

이를 통해 모바일 장치에 있을 때마다 애플리케이션이 인식하고 헤더 크기를 확실히 조정합니다.
햄버거 버튼 등을 노출하는 동안 this 또는 navbar-links로 사이드바 구성 요소를 숨길 수도 있습니다.