***리액트에서 가장 중요한것

1. 자바스크립트는 ajax,이벤트리스너,settimeout,setstate는 비동기적으로 완료되면실행된다.

즉 async함수가 무엇인지 인지하고 사용해야한다

 

2. 렌더링하면서 바로 실행하느냐 이벤트를 넣어야 실행되느냐

 

3 렌더링을 해야 할 부분 안 해야할부분 나누기

 

4.useeffect 훅을 잘걸기

state변경시 재렌더링-> useeffect사용시  특정 state에만 반응하도록 훅을 걸수가있다.

 

5.코드분석

state 변경함수는 async 하게 처리되는 함수기 때문에 완료되기까지 시간이 오래걸리면 제쳐두고 다음 코드를 실행해줍니다.

그래서 코드를 해석해보자면 

① 버튼을 세번째 누르면 setCount(count+1); 이걸 실행해서 count를 3을 만들어줍니다.

② 근데 count를 3으로 만드는건 오래걸리니까 제껴두고 if ( count > 3 ) {} 이걸 실행합니다.

③ 이 때 count는 아직 2라서 if문 안의 setAge(age+1)이 잘 동작하고 있는겁니다

6. useffect를 사용하면 async를 sync처럼 사용가능하다

 

6-1 setCount는 이벤트 핸들러에 넣는다

6-2 useeffect로 count의존성을 넣어 setcount가 변화되었을때 재렌더링시 useeffect도 같이 실행되게해준다.

6-3 좀더 자세히보자면 onclick->setcount 파라미터가 기존count와 차이가 있는지 확인 ->count+1 을해서 count값을 변화시킴->재렌더링시켜줌(기존count값은 저장되어있나봄)->count가 변했으니 useeffect를 그다음에 실행시켜준다

6-4 useeffect실행조건은 [count]로 되어있다-> 이건 useeffect실행조건이고 setage조건도 만족시켜야 setage가 실행된다

즉 useeffect실행조건 &&  count<3을 만족해야 setage를 실행가능하다.

 

 

 

 

\

 

7. 객체에 일반변수를 사용하면주소가 복사되어 같은메모리공간을 가리킨다.,