[React Native -10] Navigation LifeCycle

상품등록screen → 갤러리screen → 카메라screen으로 push했을 때는 componentDidMount()가 실행이 되었다

 

하지만, 카메라screen → 상품등록screen으로 goBack했을 때  카메라screen에서 받아온 데이터를 상품등록screen의 state에 넣어줄 것을 예상했지만 constructor, componentDidMount()가  아예 실행이 되지 않았다 즉, 재렌더링이 이루어지지 않고 있다는 느낌을 받았다

 

리액트 네이게이션 공식문서를 보면 네이게이션 라이프 사이클이라는 것이 있었다

https://reactnavigation.org/docs/navigation-lifecycle

https://reactnavigation.org/docs/navigation-lifecycle/

스택네이게이션에서는 스크린이 스택 형태로 쌓이며 이동을 하는데, 이전에 Mounting된 상태이면 componentDidMount가 실행되지 않는다고 이해했다

 

react-navigation은 3가지 방법을 제공한다

1.  'focus' event with an event listener.

2. useFocusEffect hook

3. useIsFocused hook

---

 

우리 프로젝트는 class component형으로 진행하기 때문에 hook을 사용할 수 없으므로 컴포넌트 생명주기를 봐야겠다고 생각했다

 

크게 4가지로 분류할 수 있다

Mount : 컴포넌트 처음 실행시켰을 때의 상태

state,props,context 저장 →  componentWillMount() →  render()  → componentDidMount() (주로 서버에 데이터 요청)

 

Update -props : Props가 업데이트 될 때

componentWillRecieveProps() (props가 변경될 때 감지) → shouldComponentUpdate() ( component 업데이트 할 꺼야?) 

→ componentWillUpdate() (component가 업데이트 될 때) → render() → compoentDidUpdate() (component 가 업데이트 된 후)

 

Update -state : State가 업데이트 될 때

*Props와 차이점은 componentWillRecieveProps을 호출하지 않는다

메소드들이 바뀔 state에 대한 정보를 갖고 있고 componentDidUpdate는 바뀌기 전의 state를 갖고 있음

 

 shouldComponentUpdate()  → componentWillUpdate() → render() → compoentDidUpdate()

 

Unmount : 컴포넌트 제거 될때

 

Error : 에러가 발생했을 때

서버 통신에 실패 했을 때 에러페이지 만들 때 사용

 

---

내가 적용해야 할 것은 다른 스크린에서 받아온 Props값을 이전스크린에서 setState해주어야 하기때문에 componentDidUpdate() 를 사용해야겠다고 생각했다

 

❗ 주의해야 할 점은 componentDidUpdate()에서 setState()를 호출할 수 있지만, 조건문으로 감싸지 않으면 무한 반복이 발생할 수 있다는 것이다. 

 

componentDidUpdate(prevProps,prevState){
        
        console.log("prevState값: ",prevProps);
        console.log("prevProps값: ",prevState);
}

 

따라서 나는 카메라screen 에서 넘어받은 imageURLs을 상품등록screen 에서 setState해줘야하기 때문에 라우트 파라미터 값과 비교해서 setState해주었다 

componentDidUpdate(prevProps){
   
    if(prevProps.route.params.imageURLs !=this.props.route.params.imageURLs){
        this.setState({imageURLs: this.props.route.params.imageURLs});
    }
}

state의 imageURLs에 잘 들어간 것을 볼 수 있다

삭제도 잘 되는 것을 볼 수 있다

//이미지 삭제 버튼
imageRemove = (index) => {
    console.log(index);
    this.setState({
        imageURLs: this.state.imageURLs.filter((value, indexNum) => indexNum !== index)
    });
    console.log('삭제완료');
};

삭제할 때 filter를 이용하여 state에 있는 imageURLs값을 변경해주었다 

 

 

❗ 카메라screen, 갤러리screen에서 각각 받아온 imageURLs값을 함께 보여주어야 하기 때문에 concat을 사용해서 this.state.imageURLs에 쌓이도록 하였다 

componentDidUpdate(prevProps,prevState){
        
    if(prevProps.route.params.imageURLs !=this.props.route.params.imageURLs){
        this.setState({imageURLs: this.state.imageURLs.concat(this.props.route.params.imageURLs)});
    }
}

 

정말 많은 삽질 끝에 구현을 했다... 무조건 구글링한다는 마인드가 아니라 어떻게 구조를 잡을 것인지에 대한 생각을 통한 코딩을 해야 한다는 것을 뼈저리게 느꼈다 😊

 

 

[결과물]