개발자
기본값이 false인 setIsPopuped라는 useState를 사용하여 팝업의 상태를 관리하고 있습니다. setTimeout을 사용하여 3초 후에 setIsPopuped(true)로 상태를 변경하려고 했는데, 팝업이 열리지 않는 문제가 발생했습니다. 리렌더링이 되지 않는 것 같은데, 리렌더링을 발생시킬 수 있는 방법을 알고 싶습니다. useEffect의 의존성 배열에도 isPopuped를 추가했음에도 내부 콘솔이 찍히지 않습니다. isPopuped와 setIsPopuped을 둘 다 넣어보았지만 여전히 작동하지 않습니다. setIsPopuped(true)를 호출하면서 콘솔도 찍어보았는데, 콘솔은 찍힙니다. 그런데 왜 팝업이 열리지 않는 걸까요?
답변 2
저라면 일단 isPopuped의 상태가 정상적으로 업데이트 되는지 확인해볼 듯합니다. 의도된 대로 업데이트가 되지 않는다면 setTimeout 함수를 잘못 쓴 것일 수도 있으니까요. isPopuped가 true로 업데이트되고 있는 상황이라면 팝업의 CSS를 확인해볼 것 같아요. 종종 다른 요소 뒤에 가려지거나, 문서 흐름의 가장 마지막에 배치되어서 못 보고 지나친 것일 수도 있습니다.
setIsPopuped를 콘솔에 찍어보았을 때, 찍힌다고 말씀하셨는데 위 상황에선 두 가지 문제일 가능성이 있을 것 같습니다. 물론 코드를 확인해보아야겠지만 말씀 주신 내용으로만 보았을 때는.. 우선 콘솔에 찍힌다 하셨으니 css문제일 수 있습니다. 돔이 렌더링 되고 있는 지 개발자도구를 통해서 확인해보세요. 만약 돔이 그려지고 있으나 안보인다면 그것은 css문제입니다 위는 단순 z-index등의 문제로 보이나 만약 돔이 아예 안그려지는 경우는 구문 문제, 팝업이 보여지는 조건으로 부여한 state와 관련이 없는 경우 등을 고려해볼 수 있겠습니다. 팝업이 보여지는 경우의 조건을 다시 살펴보시고 setTimeout말고 클릭이벤트로 팝업의 show/hide를 조작해보세요. 클릭이벤트로도 조작이 안된다면 구문 문제일 가능성이 높습니다. 만약 클릭이벤트로는 조작이 되는 경우 setTimeout을 사용하신 부분에 문제가 있는 겁니다. 돔이 보여지는 조건을 배제하고 setTimeout에 state변경을 걸고 컴포넌트 안에 해당 state를 텍스트로 보이게끔 해보세요. 컴포넌트가 이벤트가 동작해야하는 밖에서 setTimeout을 설정했거나 state할당 등..
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!