소개

이 두 가지는 이번 주 내 존재의 골칫거리였으며 지금이 그들에 대해 이야기하기에 가장 좋은 시기라고 생각합니다.

반응

React에서 시작하여 후크는 일반적으로 첫 번째 수업에서 멀리 떨어져 있습니다. 우리는 일반적으로 기능 구성 요소를 사용하는 이유를 찾기 전에 구성 요소와 순수 구성 요소를 다룹니다. Hooks를 배우기 시작한 후에야 Hooks가 Functional Components에서만 작동한다는 것을 깨달았습니다. 이것은 내가 useHistory 에서 react-router-dom 후크를 사용하는 다른 페이지로 리디렉션하는 편리한 방법이 필요한 첫 번째 경우에 발생했기 때문에 엄청났습니다. 나에게 완전히 새로운 세상이 열렸지만 모든 것이 순탄했던 것은 아니었습니다...

조건부 렌더링

여기 저는 갈림길에 있습니다. 이 구성 요소는 부울을 기반으로 렌더링하는 데 필요했습니다. 로그인한 사용자가 있습니까? 그들의 id는 이것 object.user_id과 같습니까? 그렇지 않다면 나는 원한다history.push("/")!

하지만 잠시만요... useEffect , AND useLayoutEffect 는 조건부 렌더링 후에 실행됩니다. 따라서 object.user_id는 절대 존재하지 않습니다. componentDidMount() 를 사용하더라도 구성 요소가 마운트되는 동안 조건이 실행됩니다!

둘다 잘못되면...

두 도구 모두 나에게 적합하지 않다는 것을 깨달았을 때 나는 다른 접근 방식을 취했습니다. 내 서버 응답에 조건부가 필요했습니다. 페이지에 렌더링하기 전에 오류를 확인합니다.
결과적으로 일반적으로 API 호출 및 후크 전에 특정 코드의 유효성을 검사해야 하는 경우가 있습니다.

그래도 내 해결 방법은? 구성 요소와 함께 반환하는 대신 API 호출에 리디렉션을 넣습니다. 사용자가 처음부터 해당 콘텐츠를 볼 권한이 없는 경우 상태가 페이지를 업데이트하기 전에 리디렉션하는 것이 좋습니다!

누군가에게 도움이 될 수 있도록 작은 스 니펫이 있습니다!

    useEffect(() => {
        let listID = props.match.url.split("/")[3];

        api.list.editUserListByUrl(listID)
        .then(resp => {
            if(!resp.err) {
                setUserID(+resp.listitem.user_id)
                setUrl(resp.listitem.url)
                setDescription(resp.listitem.description)
            } else {
                history.push("/dashboard");
            }
        })
    })

모두 행복한 화요일입니다!