Life goes slowly...

React에서 팝업창으로 오픈하여 데이터를 처리한 후에 부모 창에 있는 함수를 호출하는 상황을 정리합니다. 부모 창에서 버튼을 클릭하였을 경우에 popup.jsp을 새창으로 열고 요소 내부에 기능의 함수를 설정합니다. //부모창 export default function ParentFunc() { function popupFunction() { let popup = window.open("/popup.jsp", "", 'width=800,height=600'); window.parentCallback = () => { console.log('Hello World!!'); } } return ( popup button ); } 새창으로 popup.jsp을 열고 ParentFunc() 함수를 호출하였을 경우..

Each child in a list should have a unique "key" Error 발생 Warning: Each child in a list should have a unique "key" prop. React 프로젝트를 진행 중에 발생하는 Error입니다. 이는 Chrome의 개발자 도구인 Console에서 확인할 수 있으며 React에서 map 함수를 사용하여 반복문을 사용하는 경우에 발생하는 스크립트 오류입니다. React에서는 key prop를 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성합니다. React 라이브러리는 이 관계를 이용하여 컴포넌트 렌더링 여부를 결정하기 때문에 불필요한 렌더링을 방지하기 위하여 각 자식 컴포넌트마다 독립적인 Key 값을 넣어줘야 하는데 Key 값..

React.js의 Hooks React에서 Hooks은 React의 새로운 기능으로써 React 16.8 버전에서 새로 추가된 기능입니다. state, component에 대한 모든 것을 바꿔놓은 기능입니다. Hooks을 이용하여 기존의 함수형 Compontent에서도 클래스형 Compontent 작업을 할 수 있게 되었습니다. 기존의 클래스형 Compontent가 가지고 있었던 복잡성, 재사용성의 단점들까지 모두 해결하기도 했습니다. 함수형 Compontent에서 사용되는 Hook 기능중에서는 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정할 수 있는 useEffect의 함수가 있습니다. React.js의 Hooks 사용하며 없어진 문제점 1. Compontent 사이에서 상태와 관..