유용한 팁과 트릭 React/js - part1

안녕 모두. 이것은 내 첫 번째 게시물입니다. 나는 당신을 소개하는 데 지루하지 않을 것입니다. 관심 있으시면 마지막에 남겨두겠습니다.

꿀팁 시작합니다 😄

0. [React] 아직 사용하지 않는 경우 후크를 사용합니다.

당신이 아닐 수도 있다는 것을 깨달았기 때문에 이것을 추가했습니다. 개인적으로 2MB의 프로젝트를 클래스 구성 요소를 사용하여 작성한 경우 후크로 리팩토링할 것입니다. 그런데 또 내가 누구를 심판하겠습니까? 후크의 힘을 받아들일 때까지 이 게시물을 건너뛰세요.

1. [React] useReducer와 같은 useState - 선택적으로

실제로 이 커뮤니티에서 반응 게시물을 스크롤하는 것을 보았지만 게시물이 아무 것도 아닌 것처럼 사용했다는 점을 제외하고는 - 금광을 발견하고 즉시 일상적인 코딩 습관에 적용한 것처럼 느꼈습니다.
약간의 배경 정보 - useReducer는 다음과 같이 여러 상태를 설정하고 동시에 여러 렌더링을 유도하지 않도록 하기 위해 useState에 대한 래퍼입니다.

//  imports etc...
//  ...
const aFunction = (var1, var2, someCondition) => {
    if(someCondition === "something") {
        setAState(var1)
        setBState(var2)
    } else {
        setAState(var1)
    }
    //  you get the point
}

나는 무의미한 다중 렌더링의 냄새를 좋아합니다.

useReducer 위의 코드를 멋지게 마무리하여 두 가지 모두 단일 렌더링에서 수행할 수 있는지 확인합니다.
하지만 useState의 모든 경우에 대해 액션 유형, 리듀서 및 redux에서 하기 싫은 모든 것을 정의해야 합니다. 그리고 단일 렌더를 줄이고 싶을 때 약간 부풀어 오르고 귀찮게 느끼기 시작합니다. 여기 요지가 있습니다.

//  imports
//  ...
const [reducerAlt, setReducerAlt] = useState({});

const handleState = vals => {
    if(vals.isReducer === true && _.isObject(vals.action)) {
        if(vals.action.type === undefined) throw new Error("action type is not defined")
        const valsCopy = {...vals, isReducer: undefined, action: undefined};
        switch(vals.action.type) {
            // do reducer things with valsCopy we're not bothered to and use it to set state.
        }
        return;
    }
    setReducerAlt(prev => ({...prev, ...vals}));
}

//  nice and simple
const aFunction = (var1, var2, someCondition) => {
    if(someCondition === "something") {
        handleState({aState: var1, bState: var2});
    } else {
        handleState({aState: var1});
    }
}

마크다운에서 직접 작성했기 때문에 해당 코드를 얼마나 잘 작성했는지는 잘 모르겠지만 요점은 알 수 있을 것입니다. 필요할 때 리듀서처럼 사용하고 귀찮지 않으면 값으로 상태를 덮어씁니다.
예, 이 방법은 오류가 발생하기 쉽지만 문제 없이 스스로 오류 처리를 추가할 수 있다고 확신합니다... 맞나요?...

2. [React뿐만 아니라 JS도 가능] 삼항 연산자는 유혹적이지만 실제로는 읽을 수 없습니다. 스위치 케이스는 너무 많은 줄이 필요합니다. 그래서?...

여기까지만 하겠습니다. 이것이 가능하다는 것을 알았을 때 내 턱도 떨어졌습니다. 지금 고쳐야 할 곳이 너무 많다.

const aSwitchCase = gotItFromSomewhere();

return (
    <>
        {
            {
                case1: <Component1 />
                case2: <Component2 />
                case3: <Component3 />
                case4: SomeFunctionThatReturnsAComponent()
                case5: "yeah anything it's an object and the 'aSwitchCase' is referencing the property"
                "undefined": () => throw Error("Havent' really tried this one but I think it'll work maybe? Please comment if it doesn't I'll delete this.")
                "null": () => throw Error("ditto above")
            }[`${aSwitchCase}`]
        }
    </>
)

삼항 연산자도 훌륭하고 부울과 함께 사용하는 한 잘 작동한다고 생각합니다. 그러나 위의 예는 내 생각에 이런 일을하는 자신을 발견하면 무한히 더 좋습니다.

const something = fromSomething();
return (
    <>
        {something === "a" ? <a /> : something === "b" ? <b /> : something === "c" ? <c /> : undefined : undefined : undefined}
    </>
)
//  yeah it's usually longer and much more unreadable. But this alone is difficult to read which proves my point.

아니면 이거

const something = fromSomething()
switch something {
    case "a":
        return <a />;
    case "b":
        return <b />;
    case "c":
        return <c />;
    default:
        throw new Error("well not infinitely better I agree");
}

코드 가독성과 관련하여 최종 스니펫은 '가독성'이 더 높을 수 있습니다.
그러나 '읽을 수 있는' 한 한 줄에 가능한 한 많은 논리를 입력하는 것을 좋아하는 나 같은 사람에게는 이 방법이 신의 선물이었습니다.

[리액트] 3. 영상에 나오는 그놈이나 회사나 아무 관련이 없습니다만....

React 최적화에 관심이 있고 영국 영어를 이해하는 데 어려움이 없다면,
보다 .
나는 devto에서 반응 최적화에 대해 약 2주 동안 여러 게시물을 스크롤하고 읽었지만 이 비디오는 모든 면에서 훨씬 낫고 동시에 더 유익했습니다. 개인적으로 나는 코미디 촌극보다 비디오를 다시 보는 것을 선택합니다.

[JS] 4. lodash와 같은 모듈을 사용해야 하는 이유

나는 lodash의 열렬한 팬입니다. 하지만 예전에는 그렇지 않았습니다. 이런 일이 일어날 때까지.

const somethingAmazing = (var) => {
    if(typeof var !== 'object') throw new Error("not an object");
    // do stuff
    return "did stuff"
}

somethingAmazing(null); // not a bloody error

밝혀졌습니다 'null' is an object . (분명히 js가 인기 있는 이유)
간단한 오류처럼 보일 수 있지만 여러 구성 요소 내부에 중첩된 경우 redux를 통해 휘젓고 전체 논리가 null이 아닌 'var'에 대해 계산하기 때문에 완전히 관련이 없는 이상한 오류만 발생합니다. 그리고 우주는 (항상 그렇듯이) 당신을 망치려고합니다.
당신의 정신을 돌보는 경우 lodash와 같은 라이브러리를 사용하십시오.

const somethingAmazing = (var) => {
    if(!_.isObject(var)) throw new Error("not an object");
    // do stuff
    return "did stuff"
}

somethingAmazing(null); // yes error

마무리

챙긴 팁을 5개 이상 쓰려고 했는데 너무 피곤하다(오전 2시 반). 아마도 2부로 돌아올 것입니다. 누가 압니까? 이 게시물에서 유용한 정보를 얻으셨기를 바랍니다. 건배 - 코딩을 계속하십시오.

추신: 모든 피드백은 크게 감사하며 '아마도' 2부에 동기를 부여할 것입니다.