state변화시 렌더링 질문

Question

let [ SubscribeNumber , setSubscribeNumber ]= useState ( 0 ) let [ Subscribed , setSubscribed ] = useState ( false ); //버튼 클릭시마다 실행되는 함수 if ( Subscribed ) { Axios . post ( '/api/subscribe/removeFromSubscribe' , subscribeVariable ) . then ( response => { if ( response . data . success ) { setSubscribeNumber ( SubscribeNumber - 1 ); setSubscribed (! Subscribed ); } else { alert ( 'Fail at Remove Subscribe' ) } }) } 1.setSubscribeNumber와 setSubscribe를 통해 state 변화시 컴포넌트가 다시 렌더링된다고 알고 있는데여 그럼 이 경우는 setSubscribeNumber한 후 렌더링 => setSubscribe한 후 다시 렌더링하고 종료 그러니깐 버튼 클릭시마다 총 2번의 렌더링을 실행한다고 보면 될까요? 2. setSubscribeNumber실행시 state변화가 먼저 일어나고 렌더링이 일어나는지 혹은 변화되기 전의 state값으로 렌더링 후 state변화가 일어나는지 순서가 헷갈리는데 무엇이 맞을까요? 3. useEffect(callback, []) =>여기서 2번째 인자로 []를 넘기면 componentDidMount처럼 행동한다고 봤는데 실무에서도 이렇게 자주 사용하시나요? 항상 너무나 감사합니다.혼자 처음부터 만들어보려는데 쉽지 않네요. 이거 얼른 다하고 결제해놓은 쇼핑몰도 할 생각입니다.

John Ahn · Answer

안녕하세요 ~!!!  1.  네 맞습니다 ^^  2. 렌더링이 일어나려면 state이 변화가 있어야 하기 때문에  먼저 state이 변화가 일어난후 렌더링이 진행됩니다 ^^  3. 넵    !  실무에서 Hook을 사용하고 있다면 많이 쓸수밖에 없습니다 ^^  그리고 만약     hello 라는  state이 있고  그 hello라는 state이 변할때 마다 해당하는 useEffect를 다시 사용하려면  [] 이곳안에  [hello] 이렇게 해주시면 됩니다 ~ !  수고하세요 ^^ ~ !