분류 전체보기45 Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 에러 해결법 // 생략 const [keyowrdCounter, setKeywordCounter] = useState(0); items .filter((el) => el.folderName === folder) .map((keyword, idx) => { setKeywordCounter(idx); // 이 부분이 문제! return ; }); // 생략 처음보는 에러가 발생해서 간단하지만 기록해봤다. 보아하니 리랜더링이 많다는 것 같은데 확인해보니 mapping을 하는 곳에서 setKeywordCounter를 실행하였다. setKeywordCounter를 실행하면 state값이 바뀌고 state값이 바뀌면 리랜더링이 되기 때문에 발생하는 에러였다. // 생략 let keywordCounter = 0; items .f.. 2021. 12. 30. TIL TIL이라고 표현하기는 그렇지만, 컨텍스트 개념을 공부하고 이해하면서 아직 이해가 안되는 부분이 있어서 글로 기록 해두려고 한다. 지금 당장은 뇌정지가 와서 아무 생각이 들지 않는다..... outer의 스코프체이닝 과정을 직접 코드로 작성해보았는데 이 두 코드의 값이 다르게 나온다. 직감적으로는 다르게 나오는게 맞게 느껴지지만, 이론상 outer는 해당 식별자의 값이 없을때에는 이전의 실행 컨텍스트의 렉시컬 환경을 참조하여서 식별자의 값을 가져온다. console.trace를 제일 마지막에 호출되는 함수에 찍어보면 두 코드 모두 스택에 쌓이는 순서가 전역 > 중국집 > 고기집 > 분식집 이기 때문에 outer가 참조하는 대상은 같다고 생각했는데 뭔가 잘못되었나보다. 이게 왜 실행이 다른지 꼭 알아내서 .. 2021. 12. 30. 실행 컨텍스트(Execution Context) - Record 자바스크립트를 사용하면서 실행 컨텍스트에 대해서 전혀 모르고 있었다. scope, hoisting, closure개념도 자바스크립트를 사용하면서 감각적으로 알고 있는게 전부였다. 그러던 도중에! 우아한 테크톡의 하루님의 실행컨텍스트 발표를 들으면서 실행 컨텍스트를 왜 알아야 하는지 알게 되었고 자바스크립트의 원리에 대해서 좀 더 알 수 있었다. 이전에 공부했던 이벤트 루프와 관련되어 있어서 같이 공부하면 이해하는데 더 도움이 될 것 같다. 👉 실행 컨텍스트란? 코드를 실행하는데 필요한 환경을 제공하는 객체 코드를 실행하는데 필요한 조건이나 상태를 모아둔 객체 식별자 결정을 더욱 효율적으로 하기 위한 수단 scope, hoisting, closure의 동작원리를 담고 있는 자바스크립트의 핵심 원리 실행 컨.. 2021. 12. 28. TIL 막 입사를 하여서 회사코드를 열심히 보고 있는 중이다. 오늘은 간단한 기능개선 업무를 진행하면서 라이브러리의 불편한 점을 몸소 느낄수 있었다. 문제의 라이브러리는 antd였다. 부트스트랩과 비슷하고 중국에서 만들어진 라이브러리이다. 사수가 이 라이브러리를 회사에 적용한 이유는 초기에 빠르게 개발을 해야했기 때문에 디자인과 기능이 어느정도 되어있는 antd라이브러리를 사용하게 되었다고 했다. 내 업무는 antd라이브러리의 select태그 안에서의 tag들 중 하나의 tag만 삭제 버튼을 없애는 업무였다. 특정 tag를 분기하여서 x버튼만 없애는거면 너무쉬운데?? 라고 생각하였지만, 라이브러리로 구현된 tag들이었기 때문에 커스텀하기가 쉽지 않았다... antd에서 해당 문서를 보면서 가능성 있는 설정을 해.. 2021. 12. 15. 이전 1 2 3 4 5 6 7 ··· 12 다음
