useEffect2 [React] 프로젝트에서 계속 두 번씩 렌더링 되는 현상 해결하기 프로젝트를 만들다 보면, 강사님의 화면은 그렇지 않은데.... 나는 계속해서 두 번씩 렌더링 되는 문제가 있었다. 밑의 사진에도 보면 어려운 계산과 쉬운 계산이 각각 두 번씩 찍혀 있는 모습을 알 수 있다. 왜..?!!! 어제 김준태 강사님의 강의 자료를 보면서 해답을 찾을 수 있었다..!! 바로 index.js의 StrictMode때문이었다. 현재 프로젝트에서 index.js파일을 보면 StrictMode로 설정된 것을 알 수 있다. 이는 리액트 전체에 디버깅을 위한 절차를 추가해주는 태그로, useEffect의 이상 동작을 감지하고자 useEffect 내의 함수를 마운트 할 때 2번 실행시키기 때문이라고 한다. 지금은 간단한 프로젝트이니, 지워도 상관이 없다. 그래서 해당 태그를 삭제해도 된다! St.. 2022. 8. 4. [React] useEffect 이 글은 별코딩강의를 기반으로 작성되었습니다! useEffect가 사용되는경우 1. mount (화면에 첫 렌더링) 2. update(다시 렌더링) 3. UnMount(화면에서 사라질때) 사용방식 1. 렌더링될때 useEffect의 사용방식에는 두가지 방식이 있음 //1 useEffect(() => { //작업 }); //2 useEffect(() => { //작업 },[value]); 1. 렌더링 될때 마다 콜백 실행 2. 화면에 첫 렌더링 될때 콜백 실행, value값이 바뀔떄 콜백 실행 (만약 빈배열을 준다면 컴포넌트가 제일 처음 렌더링 될때만 실행됨) 1-1. 실습!! import React, { useState, useEffect } from 'react'; import './style.css'.. 2022. 7. 29. 이전 1 다음
