안녕하세요 선생님~~

따라하며 배우는 리액트 A-Z[19버전 반영]

이미지 배너 생성하기

작성

422

useEffect(() => {

first

return () => {

second

}

}, [third])

useEffect를 사용할때 first는 처음 렌더링이 된후에 실행

second는 앱이 종료될때 실행되고

third는 어떠한 state가 변경될때 useEffect를 다시 실행할것인가? 로 이해를 했습니다

여기서 질문이 있는데

nav.js에서는 처음 렌더링후 우리가 스크롤을 하였을때 추가적인 렌더링이 필요하기에 useEffect로 이벤트를 만들었다 라고 이해를 하였는데

Banner.js에서는 백그라운드이미지 경로에

movie.backdrop_path를 넣는데 렌더링 되기전에 useEffect가 먼저 실행이 된것인가요?

먼저 실행이 안되면 movie안에는 아무것도 없지 않나요?

실력이 없어 질문이 일목요연하지 못한점 죄송합니다

추가로 console.log()로 찍어보니 렌더가 되고 useEffect()가 실행이 되어서 setmovie로 스테이트를 set해주고 그래서 스테이트가 바뀌니 다시 렌더가 되고 근데 문제는

처음에 렌더가 될때 movie가 비었기 때문에 에러가 떠야하는데

순서가 위와 같이 나옵니다

렌더 에러 이펙트 렌더가 맞지 않나요?

react typescript redux tdd Next.js

답변 3

성민석

질문자

선생님 우선 빠른답변 감사합니다 우선 제가 이해한것이 맞는지 모르겠지만

1. 먼저 렌더를 할때 movie안에 값이 없으므로 방어코드를 작성해야한다 ex)movie?.backdrop_path

2. 이렇게 방어코드를 작성하면 movie를 사용하는 부분을 제외한 나머지만 렌더가 된다

3. 이제 movie를 사용하기 위해 useEffect()가 실행이된다

그럼 setstate()가 작동하여 state가 설정이 되고 setstate()가 실행됬기에 다시 리렌더링이 발생해서

최종화면이 완성된다

추가로

브라우저에서 콘솔창에 에러의 순서가 리액트의 동작순서와 다른이유는 처리하는 속도에 따라 다르기에

위와 같이 보일수 있다

위와 같이 이해를 하면 될까요?

John Ahn

지식공유자

안녕하세요 !! 위에 잘 이해하셨습니다.
현재 빨간색 부분에 에러는 브라우저에서 저 경로를 이용해서 이미지 에셋을 받아오려고 하는데 에러가 나서 에러를 뿌려주는 부분입니다.
리액트에서 렌더 해준 후에 브라우저에서 저 경로를 이용해서 이미지 에섯을 받아오려는데 받아오는 시간이 있으며(받아오려는데 그 경로에 에셋이 없다면 에러가 나겠죠) 그 시간 동안 리액트가 멈추지는 않습니다. 그렇기 때문에 저러한 결과가 나옵니다 ~~
감사합니다.

John Ahn

지식공유자

안녕하세요 !!
질문이 너무 좋은 질문이네요!!
우선 리액트 실행되는 순서는
1. rendering 되는 부분이 먼저 실행됩니다.
그래서 만약 렌더링 되는 부분에서

return (
<div >
<h1 >
{movie.video}
</h1>
</div>
)

아직 movie 값이 없다면 렌더링 할 때 에러가 나게 됩니다.
그렇기 때문에 movie값이 있을 때만 렌더링 해줄수 있게 방어 코드를 작성합니다.

return (
<div >
<h1 >
{movie?.video}
</h1>
</div>
)

이런 식으로 요.
그리고 난 이후에

2. useEffect에서 요청을 보내서 movie 값을 받아 옵니다.
그렇게 3. movie에 state가 변하면
렌더링을 다시 하게 되고 화면에 올바른 값이 표시 되게 됩니다.

하지만 지금까지 얘기한 부분은 리액트에서 실행되는 순서를 얘기한 것이며
브라우저에서 비동기로 url 가져오는 값을 처리하고
에러를 보내는 순서는 처리하는 속도에 따라서 달라질 수 있기
때문에 저런 결과가 나오게 됩니다.

리액트에서 방어 코드가 없으면 에러가 나는 순서는 렌더 이후로 올바른 순서로 나오는 걸 볼 수 있을 겁니다!
좋은 질문 감사합니다.

인프런 커뮤니티 질문&답변

안녕하세요 선생님~~