Moon Work

useEffect의 return useEffect에 들어있는 return이 언제 실행되는지 자주 헷갈려서 아주 머리에 박제를 하기 위해 정리한다. 1. 일반적인 함수의 return ... const basicFunc = () => { console.log('[basic func] is called') return () =>{ console.log('[basic func] is returned') } } const returnFunc = basicFunc(); returnFunc(); ... 위와 같이 작성된 함수는 먼저 함수 내부에 있는 콘솔이 찍힌 뒤 리턴된 함수가 호출 되어야 리턴된 함수에 있는 콘솔이 찍히게 된다. 리턴된 함수를 호출하지 않으면 리턴된 함수 내에 있는 콘솔은 출력되지 않는다. 2. ..

시작하며 React를 통해 개발하면서 컴포넌트마다 똑같은 코드가 반복되곤 하는데 그런 코드가 심지어 길이도 작지 않다면 컴포넌트가 길어져서 곤란하다. 이런 문제를 custom hook을 통해 해결할 수 있는 부분이 있을 것이라 생각이 들어 새로 공부하게 되었다. Custom hook의 장점 클래스 컴포넌트보다 적은 코드로 동일한 기능을 구현할 수 있다. 코드 길이를 줄이면서 가독성은 높일 수 있다. Custom hook 규칙 최상위에서 hook을 호출한다 (반복문이나 조건문에서 hook을 호출하지 않는다.) React 함수 내에서만 hook을 호출한다. hook의 이름을 'use'로 시작한다. Hook 만들 때 고려해야 하는 점 custom hook을 만들 때는 다른 hook의 state에 영향을 끼치게..