React

Useeffect hook의 리턴구문 실행 조건

useeffect hook은 의존성 배열을 이용하여 리렌더링을 제어할 수 있어 컴포넌트의 불필요한 렌더링을 막을 수 있고 콜백함수를 리액트의 라이프사이클과 동기화 시킬수 있어 널리 사용되는 hook이다. 또한 리턴구문이 컴포넌트가 언마운되거나 리렌더링 직전에 실행되는 것을 이용하여 리소스를 정리할때도 편리하게 사용할 수 있다. 이때 useeffect hook의 의존성배열 유무에 따라 리턴구문 실행여부가 달라지는데 먼저 의존성 배열이 존재하는 경우 , 빈 배열이 아닌 경우, useeffect hook의 콜백함수는 컴포넌트가 마운트 되고 의존성 배열의 값이 바뀔때마다 실행된다. 리턴 함수는 컴포넌트가 언마운트될때, 페이지에서 사라지거나 페이지가 이동할 때, 실행되고 의존성 배열의 값들이 바뀔때 실행된다. 의..

React로 Modal 만들기(with React-router-dom v6)

Introduction  modal을 만드는 것은 쉽다. 왜냐하면 이제는 html에서도 dialog라는 tag를 이용해 간단한 html과 js조합으로 쉽게 만들 수 있기 때문이다. 그러나 우리가 사이트들을 사용하면서 보이는 modal 중에는 html이 아닌 react를 이용해 만든 modal들도 있는데 둘의 차이는 react를 이용하면 url이 변경됨에도 modal 주변으로 이전 페이지가 렌더링되게 할 수 있다는 점이다.  대표적으로는 instragram이나 twitter에서 해당 방법을 사용하는 것을 알 수 있는데 이 방법을 사용했을 때 장점으로는 사용자들이 페이지 전/후 이동이 직관적이라는 점이다. url이 바뀌면서 modal이 보이는 경우 뒤로가기 버튼을 눌렀을 때 modal이 띄워지기 이전 페이지..