React : useState 비동기(기본) 와 동기처리 feat. 함수 업데이트 초기화

[useState] – 동기/비동기
const [ value , SetValue ] = useState(초기값);

– useState 는 변수 업데이트 방식은 비동기 방식으로 처리된다
– useState 는 변수로 사용할 변수명 ‘value’ 와 변수를 업데이트 할 수 있는  ‘SetValue’ 로 정의된다.
★비동기 SetValue 는 직접 값을 업데이트 할 수 있으며, SetValue(100)  ,setValue (value + 1) 비동기로 작동한다.
★동기식 setValue (vals =>  vals + 1);  value 변수(최근값)을 인자 vals 로 받으며, callback 함수를 통해 업데이트 할 수 있다 

※ callback 함수를 인자로 작동되는 함수들은 모두 동기식으로 작동한다.

[useReducer] – 동기
callback 함수를 기본인자로 받아서 처리하는 useReducer 는  “동기식” 으로만 작동한다 (callback으로만 처리함)

const [ 상태변수 , 콜백함수 ] = userReducer( 콜백함수 , 상태 변수 초기값)
function 콜백함수(상태변수 , 콜백함수파라미터)

function myReducer(state , action)  
{     swtich( aciton.type)
     {
             case “INS” : 처리;  break;
     }   
}
const [ value , dispatch ] = useReducer( myReducer, 초기값); 

<button onClick={dispatch({ type : ‘INS’  , name : ‘test’})}>클릭</button>
(myReducer 의 콜백을 통해  “동기식” 으로 만 처리되는 useReducer)

– 동기화 처리를 하기위해서는 

ㆍ useState 를 통한 number 초기화
     ① 값 초기화
          useState(0);    //  number 를 0 으로 초기화 하여 useState 생성      

     ② 함수 초기화
       function numbList() {           
                // db 처리 및 부하가 있는 작업
                return [1,2,3,4,5,6,7,8,9]
       };

      useState(numbList);      // numbList 함수를 전달하여 number 를 초기화 하여 useState 생성
      useState(numbList());    // numbList() 작성시 함수를 호출하면,  컴포넌트가 리렌더링 될때, 계속  numberList 호출함.

      이는 onClick 이벤트에 함수를 전달 해야되는데 함수를 실행하는 오류를 범하는것과 같은현상
      <button onClick={onClickAdd}>추가 </button>      //   button 의 onClick 이벤트에 함수를 전달, 클릭시 실행됨
      <button onClick={onClickAdd()}>추가 </button>   //  렌더링 될때마다 onClickAdd() 이벤트가 실행됨

     useState(numberList)  // 콜백용 함수를 ‘전달만’ 하여 , hook 을 통해 useState 이 생성될대 최초 1회만 호출하게 해야함 
                또는,
     useState(() => numberList());
    <button onClick={ () => onClickAdd() }></button>  

ㆍ 값 설정으로 number 업데이트 (비동기)
     setNumber(100);
     setNumber(number + 1);

ㆍ 함수를 통한 number  업데이트 (동기식)
     setNumber( (n) => { return ( n * 2) });    // n 은 number 의 최근 update 된 값

ㆍ setState 작동방식 (비동기식처리)

1)  number 에 업데이트된 state 값으로 virtualDom 생성
2)  현재의 state 값의 element tree 와 virtualDom 비교
3) 업데이트가 필요한 state 에만 DOM 적용 후 렌더링

단 setState 가 연속으로 호출되면 batch update 후 실행
– batch update : 리액트 성능을 위해 여러개의 state 업데이트를 하나로 묶어서 리렌더링함
(단, 하나의 state에 여러번의 setState 값 update 를 실행한 경우가장 최신의 state 값만 적용)

ㆍ setTimeout 으로 시간차를 주면 어떻게 될까? 

ㆍ여러번의 setState update 값을 적용할 수 있는 (동기식처리)