vue의 컴포넌트 렌더링 순서를 확실히 알아보자!
·
Framework/Vue
🤔이슈 정의 자식 컴포넌트 2개의 데이터를 비동기로 호출하는데 이 때 두 컴포넌트 모두 데이터가 존재하지 않다면, emit을 통해 데이터 존재 여부를 상위 컴포넌트로 전달해주고, 상위 컴포넌트의 렌더링을 막으려고 했다. // Parent.vue // FirstChild.vue FirstChild // SecondChild.vue SecondChild FirstChild와 SecondChild의 data 존재 여부와 상관없이 Parent는 렌더링되지 않는다. 렌더링에 조건이 걸리지 않는 것으로 보아 동작 순서에서 문제가 있다는 추측을 할 수 있다. vue의 생명주기 내가 헷갈리는 부분은 beforeUpdate 전까지이므로 거기까지만 알아보겠다. data, computed, methods, watch 등 정..
react에서 setInterval 사용 시 플래그 설정을 왜 useRef로 적용해야할까?
·
Framework/React
🤔문제 정의3, 2, 1, 0 카운트 다운을 진행하는 컴포넌트를 동작시키기 위해 setInterval을 사용해 3에서 1초마다 countDown을 동작하고, count가 0이 되었을 때, clearInterval을 사용해 setInterval을 중지하는 로직을 구현 중이었다.clearInterval 동작 여부를 구분하기 위해 isIntervalStop이라는 식별자를 flag로 사용하였다.일반 변수로 플래그 선언const [count, setCount] = useState(3);const [isStartCountDown, setIsStartCountDown] = useState(false);let isIntervalStop = false;const buttonClickHandler = () => { s..