setState 체인과 useEffect

자바 개발의 관성적으로 데이터를 불러오고 state를 하나하나 수정을 해주도록 코드를 짜고 있었는데...

이화면에서  수정했을때 저화면에서 수정했을 때 매번 여러 스테이트를 변경해주는게 하다보니 이거 아니다 싶다.

// A Component에서
setSampleFile(aaa)
setSampleName(aaa.name)

// B Component에서
setSampleFile(bbb)
setSampleName(bbb.name)

.
.
.

 

위 문제는 리액트를 쫙 공부하고 시작한게 아니라 useState만 주구장창 쓰다보니 발생한 문제...

위에처럼 계속 적어오다가 어느순간 두번째 줄을 까먹고 첫번째 줄만 적는 실수를 범했다.

아 이거 실수의 여지가 있네 라고 생각이 들었고 기존 코드들도 다 수정하기로 했다.

 

setState는 비동기 함수다. 실행하고 나서 바로 값이 반영되지 않는다.

setState가 끝나고(setState는 클래스형 문법에서 쓰는 함수지만 처음에 클래스로 배워서 입에 붙었다.)

 

변경이 반영된 이후에 무언가 실행하고자 하는 경우

• 클래스형 문법에서는 setState에 callback 함수를 넣어서 처리한다.
• Hooks 문법에서는 useEffect 두번째 매개변수에 state를 적어주면 해당 값이 변경됐을때 첫번째 매개변수를 호출한다.

개인적으로 useEffect가

콜백 체이닝은 안생겨서 좋은데

너무 글로벌하다는 생각도 들고 (콜백 체이닝은 딱 거기서만 도니까)

좀 알아보기 힘들것 같다는 생각도 들고

useEffect를 어디서 해줘야 되나? 생각도 드는데

• 일단은 state를 선언하는 곳에서 적어줘야 되겠구나 라고 생각하고 있다.
• 이렇게 정해두면 콜백이 어딨는지 대충 알수있기 때문에 때문에 편리할듯

그렇게 변경된 이유가 있겠지??

로컬하게 콜백을 다는 방법도 있나?

useEffect 처음 쓰다보니 자꾸 자가호출 해서 무한 스택 생기고 의존성 항목에 경고도 생기고 한다.

점점 쓰다보니 공부해야될 시간이 필요해지고 있다.