당신은 반응을 사용하고 있습니까? 그럼 이건 아셔야 할 것 같아요

이 글을 쓰는 시점에서 React는 버전 17.02입니다. 이 도서관의 기하급수적인 성장을 보는 것은 매혹적입니다. 모두 재미있는 속도와 효율성으로 반응하여 코드를 작성하고 있습니다. 그러나 여전히 대부분의 프로그래머가 전문 용어를 사용하는 토끼 구멍이 많이 있습니다.

당신이 잠시 반응을 사용한다면, 다음과 같은 반응의 이상한 행동에 직면했다고 생각합니다.

너무 많은 다시 렌더링 오류

setState()의 비동기 동작
등

따라서 이 기사에서는 조심해야 하는 몇 가지 상황에 대해 다룰 것입니다 🔍

✂ 기본값으로 Props 분해:-

React Components는 props를 사용하여 전달된 데이터에 크게 의존합니다. 상태 객체인지 콜백 함수인지 여부. props를 처리하고 실제로 사용하기 전에 파괴하는 것은 좋은 습관 중 하나입니다. 입력의 불확실한 동작을 유지하기 위해 코드를 오류가 덜 발생하고 더 강력하게 만듭니다.

const ChildComponent = ({ username = null }) => {
            return (
            <>
                <p> Hello ! {username ?? "Anonymous"} </p>
            </>
        )
    }

여기, 이 스니펫에서 props는 정의되지 않은 오류를 피하기 위해 기본값으로 구조화됩니다. 또한 소품을 사용하는 동안 ?? 더 이상의 충돌을 피하기 위해 연산자

😷 useMemo() 사용 :

모든 상태 변경에는 가상 DOM을 다시 렌더링하는 비용이 따릅니다. 때때로 이 재렌더링은 비용이 덜 들지만 때로는 차이를 만듭니다. 따라서 다시 렌더링이 발생하면 함수 본문 내부의 모든 코드 비트가 재정의되고 Dumb Code를 다시 렌더링할 필요가 없습니다. 기능이 변경되지 않기 때문입니다. 따라서 ** useMemo() **를 사용합니다.

const ExecuteCounter = React.memo((data, callback) => {
return({
<button onChange={callback}> Increment </button>
}))

모두가 알 수 있듯이 실행 카운터는 DUMB 구성 요소입니다. 따라서 여기에서는 메모()로 래핑됩니다. 이것은 소품이 변경된 경우에만 ExecuteCounter()를 다시 렌더링합니다.

🔨 setState()는 비동기식입니다.

setState()는 본질적으로 비동기입니다. 콜백 함수에서 setState()를 호출하면 상태가 즉시 업데이트되지 않습니다. 대신, 모든 후속 변경 사항을 일괄 처리한 다음 완료되면 적용합니다. 이것은 setState()가 다시 렌더링하는 동안 엄청난 계산을 적용하기 때문에 몇 가지 무거운 작업을 피할 수 있습니다.

이것은 아마도 많은 사람들이 추정하지 않았지만 여기에서 언급할 가치가 있습니다. setState()를 비동기로 만드는 이유는 매우 간단합니다. JavaScript는 단일 스레드이므로 setState()를 동기식으로 만들면 브라우저의 기본 실행 스레드가 차단되어 궁극적으로 페이지가 응답하지 않을 수 있습니다. 따라서 이것을 피하기 위해 React의 DEV 팀은 본질적으로 비동기식으로 setState()를 만들었습니다.

setState()를 호출한 후 즉시 상태 값을 쿼리하면 많은 개발자가 경험합니다.

🎉 썽크() 사용:

이미 redux를 사용하는 사람이 이것을 알 수 있지만 여전히 설명하겠습니다. redux 리듀서에서 비동기 변경을 수행하는 것은 액션을 사용하면 매우 쉽습니다. 그러나 초보자가 redux의 작업에서 ajax 요청을 시도한 적이 있다면 여기에 트릭이 있습니다.

redux에서 store를 생성하는 동안, 우리는 create store 안에 redux thunk를 감싸야 합니다.

import thunk from 'redux-thunk'

const middelware = [thunk]

const store = createStore(rootReducer, applyMiddleware(middelware))

그런 다음 다음과 같이 작업 생성자로부터 비동기 요청을 전달할 수 있습니다.

const get userInfo = (userId) => async (dispatch) => {
   try {
    //fetch data 

    dispatch({ type : "ACTION_TYPE" : payload : "VIRUS"})

   } catch (err) {
     console.log("err", err.message")
   }

}

이것은 썽크의 간단한 예입니다. 간단한 ajax 요청보다 더 많은 작업을 수행하기 위해 이를 악용할 수 있습니다.


😎 최종 조회수 :

반응에서 구성 요소를 다시 렌더링하면 비용이 더 많이 듭니다. 벙어리 코드의 재렌더링을 피하면 렌더링 속도가 크게 증가하고 사용자와 we 애플리케이션 간의 상호 작용에서 함정이나 지연을 피할 수 있습니다.

읽어주셔서 감사합니다🙏