늘 겸손하게

목차 문제 상황 문제 원인 해결책 - dependencies 배열 (의존성 배열) dependencies 배열 특징에 따른 결과 문제 상황 useEffect 메서드의 첫 번째 인자로 컴포넌트가 렌더링 된 이후에 실행할 코드를 넘겨주었습니다. api를 통해 데이터를 가져오는 코드였는데 데이터를 성공적으로 가져오면 dataRead state를 true로 변경하여 loading 화면에서 실제 앱 화면으로 변환되도록 구현했습니다. 하지만 불필요하게 api 호출을 두 번하는 문제가 발생했습니다. useEffect(() => { async function fetch_data() { console.log("fetch_data") console.log("dataRead : ", dataRead) const api_ke..

useEffect와 useLayoutEffect의 차이점에 대해 알아봅시다 우선 useEffect가 무엇인지, useLayoutEffect가 무엇인지 서술하고 차이점을 서술하겠습니다. useEffect 함수 컴포넌트에서 side effect를 수행할 수 있게 해주는 hook입니다. side effect? 함수가 실행되면서 함수 외부에 존재하는 값이나 상태 등을 변경시키는 행위. 예로, 함수 외부의 배열 데이터를 바꾸거나 전역변수값 변경, 네트워크를 통한 데이터 송수신, 파일 입출력, 구독 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는것 등이 side effect입니다. side-effect가 무조건 나쁘다고는 할 수 없지만 함수는 매개변수로 입력받은 인자값에 대해 항상 일관된 출력값을 반환해..