2021.09.01 개발 일지 (친구 검색 연속으로 가능하게 수정 , 로그아웃 시 redux 사용자 state 변경)

1. 친구 검색 바로 업데이트하기

부모 컴포넌트(FindFriends.js)에서 검색할 아이디를 입력하면 props로 넘겨서

자식 컴포넌트(FriendProfile.js)가 바뀌어서 검색 결과를 보여주도록 의도했다.

 

그런데 처음 검색할 때는 제대로 출력이 되지만 두번째로 검색을 할 때는 FriendProfile.js가 바뀌지 않는 것이다.

FindFriends.js에서 검색한 아이디를 상태로 관리하기 때문에

예상대로라면 FriendProfile.js의 props 값이 바뀌므로 출력되는 내용이 바뀌어야하는데 그렇지 않았다.

 

라이프 사이클 함수를 이용하면 해결될까 싶어서 FriendProfile.js를 함수형 컴포넌트에서 클래스형 컴포넌트로 바꿔보기도 했으나 아무 변화가 없었다.

 

관련 자료를 찾아보다가 뜻밖의 해결책을 발견했다.

 

https://www.py4u.net/discuss/976613

React: why child component doesn't update when prop changes

 

 

나에게 도움이 된 답변은 Answer #6으로, key값을 추가하면 제대로 작동한다는 것이다.

그리고 이 방법대로 했더니, 정말 잘 작동되는 것이다!

리액트에서의 key값의 의미를 좀 더 찾아봐야겠다.

 

그리고 중첩 삼항 연산자를 사용할 부분이 생겨서 관련 자료를 찾아보았다.

 

https://nm-it-diary.tistory.com/38

[JAVA] 삼항 연산자 사용법 - 여러개 중첩으로 사용하기

 

삼항 연산자는 JAVA와 JS의 문법이 같은 듯 하다.

 

 

코드 수정 이후 검색을 한번 하고 바로 이어서 다른 아이디를 검색하는 것이 가능해졌다.

그리고 검색 결과가 없을 때 메세지를 출력하도록 수정했다.

 

2. 로그아웃 시 웰컴 화면으로 이동하기

redux를 이용하여 로그인 사용자 상태를 관리하는 것으로 변경되어서

로그아웃 시 redux로 관리하는 상태를 초기화해야 웰컴 화면으로 이동하게 되었다.

 

redux 모듈에 초기값으로 상태를 변경하는 액션 생성 함수 및 액션을 추가하고

useDispatch를 이용해서 해당 액션 생성 함수를 실행시켰다.

 

redux 모듈인 user.js에서 관련 부분만 나타내면 이렇다.

//Actions
const RESET_USER = 'user/RESET_USER';

const initialState = {
    email: '',
    id: '',
    name: '',
    is_loaded: false,
}

//Action Creators
export const resetUser = () => {
    return {type: RESET_USER};
}

//Reducer
export default function reducer(state = initialState, action = {}){
    switch(action.type){
        //do reducer stuff
        case 'user/RESET_USER': {
            return initialState;
        }
        default:
            return state;
    }
}

 

useDispatch를 이용해서 resetUser 액션 생성 함수를 실행하는 부분이다.

import { useDispatch } from 'react-redux';

const Main = (props) => {
    const dispatch = useDispatch();
    
    const logout = () => {
        let popup = window.confirm('로그아웃 하시겠습니까?');
        if (popup) {    //'예'를 선택했을 때
            userSignOut();  //Firebase Authentication 로그아웃
            dispatch(resetUser());  //redux 유저 정보 초기화
            history.push('/'); //웰컴 화면으로 이동
        }
    }
    ...
}