useState의 원리와 리렌더

fieldnight·2023년 12월 16일
0

useState의 원리
useState에 새로운 값이 들어오면
1. 값이 변경
2. 화면이 새로고침되서 변경된 값을 보임

기존의 변수를 변경했을때처럼, 변경된 값만 보이는 게 아니라 화면 전체가 새로고침된다.

불필요한 리렌더링을 방지하도록 설계됨

만약,
한 함수 내에서 useState를 여러번 남발했다면, 임시저장공간에 변경된 값을 계속해서 저장하다가 더이상 아래에 useState 가 없다 판단했을 때 한번 화면을 고친다.

특정 useState가 단 한번만 실행되고 아래에는 다른 종류의 useState가 실행된다 하더라도, 같은 함수 내에 있다면 임시저장공간이 활성화되어 해당 값들이 바로 반영되지 않는다.

위 코드의 경우 onChangeTitle 함수가 모두 끝나고나서야 (if문 포함)임시저장공간의 값이 밖으로 나와 title의 값이 b로 저장된다.

결과적으로 input창 중 하나는 적어도 2개의 문자열을 적어야 if문 비교값들이 찬 상태가 된다.

0개의 댓글

관련 채용 정보