Dev/React

프론트엔드 개발 과정 중 로그인 및 다양한 기능을 위해 모달을 만들어야 할 필요가 있었다. 처음에는 모달을 정의한 뒤, 상위 컴포넌트 및 페이지에서 임포트하여 사용하면 되겠다고 생각했다. 그러나 모달의 z-index를 아무리 높여도 모달보다 위에 나타나는 부분들이 존재했다. 이 문제의 원인은 모달의 z-index가 아무리 높아도 모달을 사용하는 부모의 z-index가 다른 컴포넌트보다 낮으면 의미가 없다는 것이었다. z-index는 같은 스태킹 컨텍스트 내에서만 작동하기 때문에, 모달의 부모 요소가 낮은 z-index를 가지고 있다면, 모달의 z-index가 높더라도 다른 높은 z-index를 가진 형제 요소들보다 뒤에 나타날 수 있다. 문제를 해결하기 위해 position을 absolute로 설정하거나..

onClick = {함수}일 때에는Too many re-renders. React limits the number of renders to prevent an infinite loop.문제가 발생했었는데,  onClick = {() => 함수}로 바꾸니깐 문제가 해결되는 상황이 일어났다. 두 방법이 무슨 차이일지 궁금해서 지피티한테 물어봤다. 지피티 대답 두 방법의 차이점1. onClick = {함수}: - 이 방법은 이벤트가 발생했을 때 직접 함수를 참조하는 방식입니다. 예를 들어, onClick = {handleClick}라고 하면 handleClick 함수가 이벤트 핸들러로 설정됩니다.여기서 중요한 점은 React가 리렌더링될 때마다 handleClick 함수가 변경되지 않는다면, 동일한 함수를 참..