rendering2 [React] 리엑트 컴포넌트가 두 번 렌더링 되는 이유? 이번 스프린트를 마치기 전 데모를 해보다가 화면상 표시되는 데이터가 실제 데이터와 다르다는 사실을 발견했다. 원인을 찾아보니 동료 개발자가 의도치 않게 자료형에 Mutation을 일으켜 잘못된 데이터가 표시된 것이었다. 그리고 Mutation이 발생한 이유는 2회 컴포넌트가 렌더링 되면서 함수가 두 번 실행되었기 때문이라는 사실도 알게 되었다. 사실 이전 부터 궁금하긴 했었다. useState 혹은 useEffect를 사용한 컴포넌트에서 콘솔을 찍으면 항상 두 번 프린트되었기 때문이다. 그래서 오늘은 관련해서 왜 그런지 찾아보았고 재밌는 글을 발견해 번역해 옮겨 본다. My React components render twice and drive me crazy 모던 리엑트를 사용하는 수 많은 프론트엔드 .. 2022. 7. 29. [React] 데이터 로딩과 렌더링 작업속도차이 문제 오늘 아래와 같은 상세페이지 작업을 하던 와중에 변수들이 대거 undefined 오류 문제를 발생시켰다. 음.. 왜 그럴까? 문제는 데이터 로딩 속도와 렌더링 작업 속도의 차이 때문이었다. 작업 속도라기보다는 비동기 문제가 더 정확한 워딩인 듯하다. 즉, 상세페이지를 위한 이미지와 정보를 불러오는 와중에 자바스크립트 엔진은 html을 렌더링 해버리기 때문에 아직 데이터가 넘어오지 않아 변수 선언 및 할당에 문제가 발생하는 것이다. 나는 아래와 같이 삼항 연산자를 이용해 넘겨주는 데이터가 정의되었을 경우에만 props를 내려주는 방식으로 해결했다. {accommodationDetail ? : null} {accommodationDetail ? : null} 2022. 1. 23. 이전 1 다음
