Today I Learned 2023.03.06. [React 프로젝트 1]

문제상황

아무래도 프론트엔드적인 공부를 하다보면 계속해서 마주칠 수 밖에 없는 문제인데,
새로고침하면서 모든 내역들이 다 사라진다는 점이 계속해서 화이트 아웃 현상을 발생시켰다.
사실 이 부분에 대한 현상을 어쩔 수 없다는 식의 생각만 하고 있었는데,
오늘 기술매니저님께서 프론트엔드적인 사고법을 알려주셨다.

무조건 오류가 난다고 가만히 있는게 아니라,
오류가 났을 때 가장 사용자-친화적으로 돌아갈 수 있는 예외케이스 값을 주어주면 가장 좋다고 하셨다.

function Under_todo() {
  
    const reducer = useSelector((state)=> state.reducer);
    const param = useParams();
    const newObj = reducer.find((item) => item.id === +param.id)
 
  return (
    <StTemplate>
        <StHeader>
           ID : { newObj.id } 
            <Link to={`/`}>
                <StItemBtn style={{ cursor: 'pointer' }}> <FaHome/> </StItemBtn>
            </Link>
        </StHeader>
        <StMain>
            <StLabel> Title : { newObj.title }</StLabel>
            <StLabel  style={{fontWeight : 'lighter'}}> To-do : { newObj.todo }</StLabel>
        </StMain>
    </StTemplate>
  )
}

여러가지 값을 저장한 다음에 하위페이지에서 새로고침을 하게되면,
useSelector 부분에서 애초에 그 값을 가져오지 못하게 되는 것이었다.
param의 경우에는 주소값을 가져오기 때문에 지정된 주소값을 가져오지만,
해당 객체에 할당된 ID 값은 어디 서버에 저장해 둔 것이 아니기 때문에 새로고침하면 사라진다.

그래서 undefined가 될 수 밖에 없고,
그래서 이에 따라 밑에 화면이 그려질 때 해당 객체에 맞는 ID 값, Title값 모두 가져올 것 조차 없게 된 것이다.

해결 / 알게 된 것

function Under_todo() {
  
    const reducer = useSelector((state)=> state.reducer);
    const param = useParams();
    const newObj = reducer.find((item) => item.id === +param.id)
 
  return (
    <StTemplate>
        <StHeader>
           ID : { newObj?.id } 
            <Link to={`/`}>
                <StItemBtn style={{ cursor: 'pointer' }}> <FaHome/> </StItemBtn>
            </Link>
        </StHeader>
        <StMain>
            <StLabel> Title : { newObj?.title }</StLabel>
            <StLabel  style={{fontWeight : 'lighter'}}> To-do : { newObj?.todo }</StLabel>
        </StMain>
    </StTemplate>
  )
}

• 옵셔널 체이닝
  옵셔널 체이닝이란, 항상 그 key값이 존재하는 경우 보다는 없는 경우를 대비하여
  체이닝 연산자(? <- 요것) 앞의 key값을 참조할 때, 만약 값이 undefined나 null값이라면 Error를 반환하지 않고, undefined를 반환한다.
  즉, 화면 자체는 그려지게끔 할 수 있는 것이다. 그렇기 때문에 화이트 아웃 현상을 막을 수 있으며, 좀 더 사용자들이 당황하지 않게끔 할 수 있다고 볼 수 있다는 것이다.

문제상황2

그치만 위의 상황에서 보다 조금 더 사용자 친화적으로 바꿀 수 있는데,
만약 그 값이 없다면,
undefined로 도배된 하위페이지를 보는 것보다,
그냥 다시 Home으로 돌아오는 것이 나은 방법으로 보여진다.

해결 / 알게 된 것 2

import { useNavigate } from 'react-router-dom';

function Under_todo() {
  	const navigate = useNavigate();
  
    const reducer = useSelector((state)=> state.reducer);
    const param = useParams();
    const newObj = reducer.find((item) => item.id === +param.id)
    
    useEffect(()=>{
    	if(newObj === undefined){
        	navigate('/')
        }
    },[]);
 
  return (
    <StTemplate>
        <StHeader>
           ID : { newObj?.id } 
            <Link to={`/`}>
                <StItemBtn style={{ cursor: 'pointer' }}> <FaHome/> </StItemBtn>
            </Link>
        </StHeader>
        <StMain>
            <StLabel> Title : { newObj?.title }</StLabel>
            <StLabel  style={{fontWeight : 'lighter'}}> To-do : { newObj?.todo }</StLabel>
        </StMain>
    </StTemplate>
  )
}

• useEffect
  useEffect 의 경우에는 우리는 렌더링할 때마다 그 즉시 바로 어떤 작업이 실행되도록 하는 훅으로 알고 그렇게 배웠다.
  만약, 뒤에 있는 의존성 배열(dependency array)에 아무것도 할당받지 않았다면
  컴포넌트가 화면에 가장 처음 렌더링 될 때 처음 한 번만 실행되고, 그 값이 저장된다.
  컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출된다는 의미이다.

그 후에는 react-router-dom의 훅인 useNavigate()를 만들어서,
Home으로 이동하는 훅을 추가해주면 완성이다.