[ React ] React

부작용

반응 후크를 자세히 살펴보기 전에 반응 후크의 개념을 이해하기 위해 어떤 부작용이 있는지 알아야 합니다. 그럼 부작용은?

부작용그것은 말한다.

부작용은 일반적으로 “효과”로 축약되기 때문에 효과라고 할 때 부작용을 지칭하는 것으로 생각할 수 있습니다.

예를 들어 데이터를 가져오기 위해 외부 API를 호출하는 경우 먼저 화면에 렌더링할 수 있는 항목을 렌더링하고 실제 데이터를 비동기적으로 가져옵니다. 이렇게 하는 이유는 오류를 최소화하여 호출된 API의 응답이 지연되거나 존재하지 않을 때 다른 기능이 실행되도록 하여 사용자 측의 불만을 줄이기 위함입니다.

간단히 말해서 원하는 효과가 아닌 다른 효과가 발생하는 현상이라고 생각할 수 있습니다. 반응 후크는 부작용을 수행합니다.

후크 반응

반응 후크는 기능 구성 요소에서 클래스 구성 요소의 기능을 사용하고 훔치는 데 도움이 되는 기능입니다. 그렇다면 클래스 구성 요소를 사용하는 대신 기능적 구성 요소로 이동하는 이유는 무엇입니까?

클래스 컴포넌트 함수 컴포넌트로 전환하는 이유는 무엇입니까?

수업은 응답하는 법을 배우는 데 큰 진입 장벽이었습니다. 다음과 같은 이유는 이 클래스가 진입에 주요 장벽을 제공하는 이유입니다.

• 코드 재사용성이 좋지 않음
• 복잡한 코드 구조
• 기본 JS 구문을 알아야 합니다. B. 이것들을 사용하거나 이벤트 핸들러를 등록하십시오.
• 클래스가 잘 리모델링되지 않음
• 재장전은 깨지기 쉽고 신뢰하기 어렵습니다.

그 결과 클래스 구성 요소의 최신 반응 기술이 효과적으로 작동하지 않았습니다. 그러나 다음과 같은 클래스 유사 구성 요소를 활용할 수 없었습니다. B. 상태를 사용하거나 수명 주기를 직접 처리합니다.

이 문제를 해결하기 위해 React Hooks가 나왔습니다.

후크 유형

• useState
• useEffect
• useRef
• 메모를 사용
• 콜백 사용
• useContext
• useReducer

useState

useState는 가장 기본적인 후크이며 기능 구성 요소에서 변수 상태를 가질 수 있도록 합니다. 즉, 상태 관리에 사용됩니다.

const (state, setState) = useState(기본값);

// 기본값에 원시값이 아닌 
// {
//   name: name,
//   age: age,
//   ...
// }
// 객체도 사용 가능하다.

state는 현재 값이고 setState는 상태 값을 변경하는 메서드로 사용됩니다. 상태는 객체와 기본 유형으로 모두 사용할 수 있습니다. 여러 useStates를 가질 수 있지만 다음과 같이 하나의 상태에 여러 속성을 추가하여 세 개 이상의 상태를 관리할 수 있습니다.

useEffect

useEffect는 React 구성 요소가 렌더링될 때 특정 작업을 수행하도록 구성할 수 있는 후크입니다. 클래스 타입 컴포넌트의 ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount의 조합으로 볼 수 있습니다. 이 후크를 사용하면 부작용(데이터 가져오기, 구독 설정, DOM 수동 조작 등)이 기능적 구성 요소에서 실행될 수 있습니다.

useEffect는 구성 요소를 렌더링한 후 React에게 수행할 작업을 알려줍니다. 전달된 함수(효과)를 기억하고 렌더링 후 호출합니다. 구성 요소 내에서 이와 같이 호출되면 효과에서 상태 또는 소품에 액세스할 수 있습니다. useEffect는 구성 요소가 처음 렌더링될 때 실행된 다음 새로 고쳐질 때마다 실행됩니다.

업데이트할 때마다 useEffect에 설정된 함수를 실행하지 않으려면 두 번째 매개변수에 빈 배열을 지정할 수 있습니다. 그리고 특정 값이 업데이트될 때마다 useEffect를 실행하려면 두 번째 매개 변수에 해당 특정 값을 입력하면 됩니다.

// 렌더링될 때마다 실행
useEffect(() => {
	console.log('렌더링될 때마다 실행');
});

// 첫 렌더링 때만 실행
useEffect(() => {
	console.log('마운트 될 때만 실행');
}, ());

// 특정 값(name)이 변경될 때만 실행
useEffect(() => {
	console.log(`${name}이 변경될 때만 실행`);
}, (name));

구성 요소가 마운트 해제되거나 업데이트되기 전에 작업을 수행하려는 경우 useEffect는 정리 함수를 반환해야 합니다.

예를 들어 외부 데이터에 대한 구독을 설정해야 하는 경우 메모리 누수를 방지하기 위해 정리가 필요합니다.

React가 정리하는 지점은 구성 요소가 마운트 해제될 때, 즉 마운트 해제되기 전입니다. 효과는 렌더링할 때마다 실행되므로 다음 효과를 실행하기 전에 이전 렌더링에서 파생된 효과를 정리해야 합니다.

useRef

const isToggle = useRef(false);

useRef를 사용하면 기능적 구성 요소에서 ref를 더 쉽게 사용할 수 있습니다. useRef는 현재 속성에 전달된 인수로 초기화된 변경 가능한 Ref 객체를 반환합니다.

기본적으로 useRef는 현재 속성에 대한 변경 가능한 값을 보유하는 상자와 같습니다. 일반적으로 DOM에 액세스하려면 ref에 익숙해야 합니다. React에서 ref 객체를 전달하면 React는 모드가 변경될 때 변경된 DOM 노드에 현재 속성을 설정합니다.

useRef() 후크를 사용하는 것은 ref 속성을 사용하는 것보다 더 의미가 있습니다. useRef()는 순수한 JavaScript 객체를 생성하기 때문입니다. useRef()와 {current: … } 객체 생성의 차이점은 useRef가 각 렌더링에 대해 동일한 Ref 객체를 제공한다는 것입니다.

그러나 useRef는 콘텐츠가 변경될 때마다 알려주지 않습니다. 이는 현재 속성을 변환해도 다시 렌더링되지 않기 때문입니다. React가 DOM 노드에 대한 참조를 연결하거나 분리할 때 코드를 실행하려면 콜백 참조를 사용하는 것이 좋습니다.

간단히 말해서, ref를 원하는 값이 변경되더라도 다시 렌더링할 필요가 없을 때 사용하는 것을 상상하기 쉽습니다.

메모를 사용

useMemo를 사용하면 기능 구성 요소 내에서 발생하는 작업을 최적화할 수 있습니다. 이 후크는 저장된 값을 반환합니다. useMemo는 종속성이 변경될 때만 저장된 값을 다시 계산합니다. 이 최적화는 각 렌더링 비용을 줄입니다.

const (name, setName) = useState('young');

const nameLength = useMemo(() => name.length, (name));

useMemo에 전달된 함수는 렌더링 중에 실행됩니다. 따라서 렌더링 중에 수행하지 않은 작업은 이 기능에서 수행할 수 없습니다. 예를 들어 효과 처리는 useEffect에서 수행됩니다. 성능 최적화를 위해 useMemo를 사용하는 것은 사실이지만 가능하면 useMemo 없이도 동작하도록 코드를 작성하는 것이 더 바람직합니다.

콜백 사용

useCallback은 저장된 콜백을 반환합니다. 렌더링 성능을 최적화해야 하는 상황에서 주로 사용되며, 이 후크를 통해 필요할 때만 이벤트 핸들러 함수를 생성할 수 있습니다.

const memoizedCallback = useCallback(
	() => {
    	doSomething(a,b);
    },
    (a,b)
);

인라인 콜백 및 해당 종속성에 대한 값 배열을 전달하면 useCallback은 저장된 콜백 버전을 반환합니다. 이 저장된 버전은 콜백의 종속성이 변경될 때만 변경됩니다. 이는 불필요한 렌더링을 피하기 위해 참조 동등성에 의존하는 최적화된 자식 구성 요소에 콜백을 전달할 때 유용합니다. useMemo와 유사한 역할을 하며, useCallback은 함수가 결국 useMemo로 반환되는 상황에서 사용하기 더 편리한 후크입니다. 숫자, 문자열, 객체와 같은 단순 값을 재사용하려면 useMemo를 사용하고 함수를 재사용하려면 useCallback을 사용하십시오.

useContext

const value = useContext(MyContext);

useContext는 컨텍스트 객체(React.createContext)를 수신하고 해당 컨텍스트의 현재 값을 반환합니다. context의 현재 값은 다음의 value prop에 의해 결정됩니다. 이는 구조에서 이 후크를 호출하는 구성 요소에 가장 가깝습니다.

다음 때 구성 요소에서 업데이트되면 useContext는 일치하는 다음 컨텍스트 값으로 렌더러를 트리거합니다. 인계됩니다. 위의 컴포넌트에서 React.memo를 사용하더라도 useContext를 사용하여 컴포넌트 자체에서 다시 렌더링합니다. 인수는 항상 컨텍스트 개체 자체여야 합니다.

useContext를 호출하는 구성 요소는 컨텍스트 값이 변경될 때 항상 다시 렌더링됩니다. 따라서 이 비용이 높을 때 기억하여 최적화할 수 있습니다.

연습 코드

useReducer

const (state, dispatch) = useReducer(reducer, initialArg, init);

useReducer는 컴포넌트 상황에 따라 다른 state를 useState로 다른 값으로 업데이트하고 싶을 때 사용하는 hook입니다. (state, action) => newState 형태의 리듀서를 받고 dispatch 메소드를 사용하여 state를 pair 형태로 반환합니다. UseReducer는 일반적으로 더 낮은 값으로 복잡한 정적 논리를 구축하거나 다음 상태가 이전 상태에 의존할 때 useState 대신 사용됩니다. 또한 useReducer는 콜백 대신 디스패치를 ​​전달할 수 있으므로 세부 업데이트를 트리거하는 구성 요소의 성능을 최적화할 수 있습니다.

useReducer의 첫 번째 매개변수에 리듀서 함수를 넣고 두 번째 매개변수에 해당 리듀서의 기본값을 넣습니다. 이 후크를 사용하면 상태 값과 디스패치 기능을 얻을 수 있습니다. 여기서 State는 가리키는 현재 상태이고 Dispatch는 작업을 트리거하는 함수입니다. 디스패치(액션) 형태로 액션 값이 함수에 매개변수로 전달되면 리듀서 함수가 호출된다.

init 함수를 세 번째 인수로 전달하여 초기화를 약간 지연시킬 수 있습니다. 이를 통해 리듀서 외부의 초기 상태를 계산하는 논리를 추출할 수 있습니다. 또한 작업에 대한 응답으로 나중에 상태를 재설정하는 데 유용합니다.

참조

반응 후크 정리

와, 리액션을 배울 때도 캐치 같은 건 없었다(생각해보면 거의 2.5~3년 전 일인데…). 지금은 자료를 찾아봐도 훅을 쓰는게 기본이 된듯…

lannstark.tistory.com