setState
setState는 리액트를 다룬다면 당연히 아는 기능이다.
state의 값을 업데이트 하는 기능을 하는 함수이다. 딱 여기까지만 알고 동작원리에 대해서는 생각해본적이 없다. 어제 팀원분께 코드에 대한 전반적인 설명을 듣다가 setState의 동작원리에 대해 듣게 됐다.
setState는 비동기식으로 동작한다.
state 값이 변할때마다 컴포넌트가 렌더링이 되기 때문에 효율성을 위해서 setState가 여러번 입력될 경우 연속적으로 동작하여 state값을 변경하는 것이 아니라 여러번 입력된 setState를 모았다가 동작, 최종 변경된 state 값이 적용되어 한번만 렌더링 된다.
즉, setState를 여러번 선언하여 누적값을 화면에 출력한다던가 하는 동작을 하려는 경우 원하는 값을 얻을 수 없다.
const i = 0;
setState(i+1);
setState(i+1);
setState(i+1);
...
예를들어 위의 경우 state의 값이 연속으로 누적 변경되어 3이 출력될 것으로 예상하지만 실제로는 1이 출력된다.
위의 설명처럼 setState가 연속으로(동기식) 동작하는 것이 아닌 비동기식으로 동작하기 때문이다.
위와 같은 현상을 해결하려면? = setState를 동기식으로 동작하게 하려면?
setState() 안에 단순히 어떤 값을 인자로 넣는 것이 아니라 함수를 인자로 넣어준다!
setState((i)=>{i+1})
setState((i)=>{i+1})
setState((i)=>{i+1})
...이렇게 하면 setState에 단순히 어떤 값이 전달되는 것이 아닌 현재 state의 값이 인자로(위 코드에서 괄호 안의 i) 전달되어 동기식으로 동작하는 것같은 효과를 얻어 원하는 누적값을 얻을 수 있다.
참고자료 https://thrillfighter.tistory.com/670
polling
폴링이란 하나의 장치가 충돌 회피 또는 동기화 처리 등을 목적으로 다른 장치의 상태를 주기적으로 검사하여 일정한 조건을 만족할 때 송수신 등의 자료처리를 하는 방식을 말한다. -출처: 위키백과
polling 관련 라이브러리를 발견했고 polling이란 무엇인가 개념부터 알아보게 됐다.
퇴근 전 사수님이 설명해주신 사용례는 '주로 어떤 api를 주기적으로 호출하기 위해 사용된다' 였다.
사수님의 설명과 위키백과의 설명을 합쳐서 생각하니 이해가 좀 된다.
특정 조건을 만족할 시 그 조건에 맞는 api를 주기적으로 호출, 사용자가 어떤 액션을 취하지 않아도 해당 api가 호출되어 사용자가 사용하는 기능이 자동으로 재동작 하게 하는 것으로 이해했다.
