useState 관련 질문

Question

강사님 안녕하세요. 강의를 쭉 한번 듣고 뒤죽박죽 된 지식들을 정리하기 위해 처음부터 다시 듣고 있는데, useState는 여전히 조금 헷갈리는 것 같습니다..^^ 이번 강의에서 useState를 사용 한 것에 대해서 제가 이해한 것은 아래와 같은데 맞는지 확인부탁드리겠습니다! 1. 초기값을 null로 주어서, product의 초기값을 null 값으로 한다. 2. .then 메소드를 통하여 result.data값 (여기서는 농구공에 값들)을 setProduct에 넣는다. 3. component에 변화가 생겼으므로 다시 위로 올라가 값을 읽는데 이번에는 product에 result.data 값을 넣는다. 4. 값의 변화가 없으므로 하단의 console.log(product)를 읽으며 농구공에 관한 값이 읽힌다. 이게 맞는건가요?? 그리고 저는 setProduct에 result.data를 넣었으니 하단의 console.log에서는 console.log(setProduct) 이렇게 작성해야 한다고 처음에 생각했었는데, 왜 console.log(product)가 되는건가요? 시간 되실 때 천천히 답변 주시면 감사드리겠습니다!!

그랩 · Answer

useState를 사용하면 첫번째 인자는 state값, 두번째 인자는 state값을 바꾸는 함수를 얻게 됩니다. 우선 2번에서 setProduct는 state를 바꾸는 함수로 안에 인자로 result.data값을 넣게 되면, setProduct의 값이 바뀌는 게 아닌 product(state)의 값이 바뀝니다. 즉 함수를 실행하는 것이고 setProduct 자체를 변경시키는 게 아니라는 거죠! 3번의 경우 product라는 state가 변화가 생겨서 다시 리렌더링이 되지만, useEffect(함수, [])를 사용해서 딱 한번만 useEffect 내의 함수가 실행되도록 설정을 했기 때문에 내부가 다시 실행되지 않습니다 그리고 4번 값의 변화가 없기에 console.log(product)를 하면 처음에 네트워크 데이터를 받아온 result.data가 담긴 product의 값을 출력하게 됩니다 :)