코딩할 때 주의점 : React

1. useEffect 인자에 들어가는 callback이 async일 때 콜백안에서 실행시키도록 해야한다

useEffect안에서 return되는 function은 컴포넌트가 clear 될 때 실행되는 function이다(destroy)
따라서 function외에 다른 것이 return 되면 error
비동기통신을 해야하는 경우 async function에 담아서 사용하는데
async function은 기본적으로 promise 객체를 return 한다
따라서 그냥 인자로 주면 error 발생한다
Uncaught TypeError: destroy is not a function 이라는 에러 발생

//example
async function func() {} // 아무것도 없어도 return Promise{}

const callApi = async ()=>{
  const result = await axios.get("localhost:3001/userinfo")
  ...
}

useEffect(callApi //return promise
	,[])
// error

이 때 callback속에서 해당 함수를 실행시키는 식으로 코드를 짜주면 아무것도 return 해주지 않아서 error가 없다

useEffect(()=>{
  callApi()
} // return nothing
	,[])

2. useEffect의 dependency array

리액트는 state가 바뀔때 마다 리렌더링 된다
useEffect를 사용하면 렌더링될 때, 상태 업데이트 될 때 실행될 함수를 정해줄 수 있다 (side effect)
만약 특정함수를 처음에 렌더링 될 때만 실행하고 싶다면 useEffect 두번째 인자에 빈 배열[ ]을 주면 된다
이 때 특정 state가 바뀔 때마다 그것을 참조하고 싶다면 dependency array 안에 넣으면 된다

2-1 . useEffect 무한 렌더링

dependency 안에 state로 array나 object가 있고 useEffect의 side effect가 해당 state를 통째로 바꾸는 함수일 경우 무한 렌더링이 발생한다

const [object,setObject] = useState({prop:value});
const [array,setArray] = useState([1,2]);


const callApi = async () => {
	setObject = {prop:value};
  	setArray = [1,2];
}

useEffect( ()=> {
  callApi();
},[object,array]) //주소값이 할당되며 무한렌더링

array와 object는 겉으로 보기에 같은 값이더라도 새로 메모리에 생성해서 그 주소값을 할당하는것이기 때문에
다른 state로 인식하고 state가 바뀌었으니 다시 setState함수가 발동해서 무한 렌더링이 발생한다
이를 방지하기 위해선 object는 object.prop으로 array는 array[0]를 넣는 식으로 사용하면 된다

const [object,setObject] = useState({prop:value});
const [array,setArray] = useState([1,2]);


const callApi = async () => {
	setObject = {prop:value};
  	setArray = [1,2];
}

useEffect( ()=> {
  callApi();
},[object.prop,array[0]]) //한번 실행되고 끝남

3. React에서의 dotenv

npm install -d --save dotenv
해준 뒤

//require("dotenv").config();
or
import dotenv from "dotenv";
dotenv.config();

리액트에서는 환경변수를 사용할 때 env 파일에서 반드시 변수명 앞에 REACT_APP 을 붙여야 한다.

ex)

const ClientId = process.env.REACT_APP_MAPS_CLIENT;