yamoo9
commented
1 year ago 문제 분석
제가 원하는 대로 첫 접속 이후에 다시 홈버튼을 눌러도 스플래시 이미지도 뜨지 않고 스플래시 이미지 대신의 회색 화면도 뜨지않지만.. 스플래시 이미지가 안뜨는 이유가 뭘까요... ㅠㅠ
먼저 @hamjongseok 님께서 작성한 코드에 주석을 작성 해봅니다. 🤔
function App() {
// 로딩 상태 값 true
// 스플래시 이미지가 표시 됨
const [isLoding, setIsLoading] = useState(true);
// 마운트 이후, 이펙트 콜백 함수 실행
useEffect(() => {
// 스플래시 이미지 표시 여부 값 가져오기
// - 최초 렌더링 : null
// - 리-렌더링 : 'true' (문자 값)
const isSplashShown = localStorage.getItem('isSplashShown');
// 스플래시 이미지가 표시된 적이 있다면?
if (isSplashShown) {
// 로딩 상태 값을 false로 변경 요청 (React가 추후 변경함)
// 리-렌더링 후, 화면에서 스플래시 이미지 감춤
setIsLoading(false);
}
// 스플래시 이미지가 표시된 적이 없다면?
else {
// 로컬 스토리지에 isSplashShown 값을 'true'로 저장
localStorage.setItem('isSplashShown', true);
// 3초 뒤에 콜백 함수 실행 됨
setTimeout(
() =>
// 리-렌더링 후, 화면에서 스플래시 이미지 감춤
setIsLoading(false),
3000,
);
}
}, []);
return (...);
}작성된 React 코드의 실행 흐름을 유추해보면 아래 그림으로 그린 순서대로 실행 되요. 스플래시 이미지가 표시되지 않는 이유는 "React.StrictMode에 의한 2번 렌더링(5 → 6 → 7 흐름)" 때문입니다.
앞서 세운 가설을 증명 해봅시다. 아래 영상을 재생해 확인해보세요. React.StrictMode 컴포넌트 코드를 React.Fragment로 변경하니 기대대로 작동합니다. 다만, 새로고침 할 때마다 스플래시 이미지가 잠깐 보이다 보니 "레코드 판이 튀는 느낌"이 들죠. 🙄
https://user-images.githubusercontent.com/1850554/227746905-41d65146-5091-4e68-9815-758110ccb0aa.mp4
문제 해결
App.js 코드를 다음과 같이 작성해보세요. 😊 @hamjongseok님
function App() {
// 로딩 상태 초기 값은 false
const [isLoding, setIsLoading] = useState(false);
// 마운트 이후, 이펙트 콜백 함수 실행
useEffect(() => {
// 스플래시 이미지 표시 여부 값 가져오기
// JSON.parse 메서드를 사용해야 JavaScript 값으로 변경 됨
const isSplashShown = JSON.parse(localStorage.getItem('isSplashShown'));
// 스플래시 이미지가 표시된 적이 없다면?
if (!isSplashShown) {
// 로딩 상태 값을 true로 변경 요청 (React가 추후 변경함)
// 리-렌더링 후, 화면에 스플래시 이미지 표시 됨
setIsLoading(true);
// 3초 뒤에 콜백 함수 실행 됨
setTimeout(() => {
// 로컬 스토리지에 isSplashShown 값을 저장
// JSON.stringify 메서드를 사용해야 문자(string) 값으로 변경 됨
localStorage.setItem('isSplashShown', JSON.stringify(true));
// 로딩 상태 값을 false로 변경 요청 (React가 추후 변경함)
// 리-렌더링 후, 화면에서 스플래시 이미지 감춤
setIsLoading(false);
}, 3000);
}
}, []);
return (...);
}코드가 수정된 이후, 첨부된 영상처럼 첫 접속 시에만 스플래시 이미지가 표시됩니다. 이후 새로고침 해보면 더 이상 스플래시 이미지는 표시되지 않습니다. 🙂
hamjongseok
질문 작성자
함종석
문제 상황
안녕하세요 야무쌤 !! 프로젝트중 스플래시 이미지를 정상적으로 구현하였습니다. 하지만 navigator에서 홈 아이콘을 누르면 Link to = '/' 이므로 홈으로 이동이되는데 이때마다 스플래시 이미지가 계속 나오는 상황이 발생되어 처음접속할때만 나오게끔 구현을하려했으나.. 오류가 발생합니다
저는 처음 접속을 할때에만 스플래시 이미지를 띄워주고 그다음에는 값을 localStorage로 기억하여 조건처리로 하였습니다 하지만 스플래시이미지가 아닌 setTimeout은 되는데 그냥 렉먹은거처럼 회색 화면만 나오는현상이 계속발생합니다.. 아래사진처럼 회색화면 3초 딜레이 후 홈화면이 나옵니다.
제가원하는대로 첫 접속 이후에 다시 홈버튼을 눌러도
스플래시이미지도 뜨지않고 스플래시 이미지 대신의 회색화면도 뜨지않지만.. 스플래시 이미지가 안뜨는 이유가 뭘까요... ㅠㅠ
프로젝트 저장소 URL
https://github.com/hamjongseok/MofMof/tree/develop
develop branch 있습니다 !
환경 정보