React hook이 조건문 내에서 쓰일 수 없지 않나요?

Question

안녕하세요! 리액트를 공부중인 학생입니다.graphQL을 쓰고 있어서 useQuery와 useEffect 훅을 사용하고 있습니다.근데 조건문 내에서 훅을 쓸 수 없다고 했는데, 작동하는 현상이 발생해서 도대체 왜 에러가 안나는 것인지 궁금해서 질문드립니다.const {loading, error, data } &#61;useQuery(MY_QUERY)위 코드를 통해 로딩, 에러, 데이터 값을 가져오게 했습니다.로딩 중에는 로딩 이미지를 띄우고, data를 가져오면, mount 되었을때만 그 값을 input 태그의 value로 사용하고 싶어서 아래와 같이 작성했습니다. 물론 안될줄 알면서도 그냥 한건데 되더라구요. 근데 정말 왜 되는지 궁금합니다.리액트 고수님들 알려주세요 ㅜㅜ

안녕타미 · Answer

리액트 훅은 조건문 내에서도 동작합니다. 어찌보면 당연한거죠하지만, 조건문 혹은 반복문에서 사용하는 것은 지양해야 합니다.왜냐하면 useState, useEffect는 항상 실행하는 순서가 동일해야하기 때문입니다.조건문이나 반복문을 사용하면 실행순서가 바뀔 수 있어 예상치 못한 오류를 야기하게 됩니다. 조건문이나 반복문을 사용하고 싶다면 useEffect안에 넣어서 사용하세요!

Frudy · Answer

저렇게 쓰지말라고해서 쓰지를안았는데써지긴하나봐요?..

안녕타미 · Answer

당연히 사용은 됩니다!react는 훅이 호출되는 순서가 항상 동일해야 정상적으로 작동되는데, 훅의 순서를 바꿀만한 코드를 중간에 삽입하면 예상치 못한 오류가 발생됩니다.그렇기 때문에 조건문/반복문 내 훅 사용을 지양해야하는 겁니다.

Frudy · Answer

오우야,훅은 항상 호출순서가 동일하다는 알고있었는데그 이유때문에 저렇게쓰면 안된다는건처음알았어요. 저도잘배워감니다.질문자님 답변자님 모두감사합니다.

안경잡이곰돌이 · Answer

감사합니다! :D

안경잡이곰돌이 · Answer

&#64;안녕타미 질문 하나만 더 드리겠습니다! ComponentDidMount때가 아닌데 왜 useEffect가 실행되는지도 알수 있을까요?지금 말씀해주신대로 안에 넣어서 사용해보려고 하는데 안에 넣으면 작동하지 않아서요. 제 생각에는 아래의 코드는 !loading&&data를 만족할때가 이미 Mount가 끝난 시점이라서 작동하지 않는 것 같은데, 저의 원글의 코드는 왜 작동하는 것인지... ㅜㅜ useEffect(() &#61;>{ if (!loading && data){ //특정 기능 } },[]);

안녕타미 · Answer

useEffect의 2번째 파라미터인 디펜던시에 loading과 data를 넣어야해요~디펜던시에 넣은 값에서 변화가 감지되면 useEffect가 실행되는겁니다! useEffect(() &#61;>{ if (!loading && data){ //특정 기능 } },[loading, data]);

React hook이 조건문 내에서 쓰일 수 없지 않나요?

7개의 답변

Q&A 목록