답변
리액트의 stste는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용합니다. useState훅을 사용하여 state를 만들고, setState를 사용하여 값을 변경합니다. props는 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 것들을 의미합니다. props로 넘겨준 값들은 불변하며, readOnly속성을 가지고있습니다. 따라서 자식 컴포넌트에서의 직접적인 props 변경은 불가하며, 내려받은 setState나 함수를 이용하여 props를 바꾸도록 부모 컴포넌트에게 요청할 수 있습니다.
꼬리질문
왜 변수가 아닌 state에 데이터를 저장하나?
변수로 저장해도 됩니다. 하지만 변수값이 바뀌었을 때 일반 변수는 리렌더링이 되지 못하지만, state에 저장된 데이터는 리렌더링이 되기 때문입니다. 리액트에서는 분리된 컴포넌트 별로 리렌더링을 하게하여 성능을 높일 수 있으므로, state를 주로 사용한다고 생각합니다.
Batching이라는 것에 대해 설명해주실 수 있나요?
배칭이란 여러개의 state 없데이트를 한개의 리렌더링으로 묶어 성능을 올리는 기능입니다. 한 함수에서 다양한 setState가 명령되었을 때 함수가 끝나게되면 한번에 모아 실행하고 리렌더링됩니다. 만약 배칭을 원하지 않는다면 flushSync()메소드를 사용하여 분리시킬 수 있습니다.
automaticBatching이란 기존 promise, setTimeout, 이벤트 콜백에서 batching이 이루어지지 않았습니다. 이를 리액트 18에서 빠짐없이 일괄처리되도록 변경하였습니다.
api.get(serverURL).then(()=>{
setUser(1)
setCount(2)
})이전에는 해당 작업에서 배칭이 진행되지 않았지만, automatic batching이 적용된 이후 promise, setTimeout, 이벤트 콜백에서도 배칭이 이루어졌습니다.
참고자료
https://gisele-dev.tistory.com/44
리액트에서 Variable과 State의 차이가 뭘까?
이게 왜 궁금해? data.index.status === Status.Approval or const isAppoval = data.index.status === Status.Approval;이라는 조건을 여러 곳에서 반복적으로 사용하게 되었다. 딱 봐도 길고, 반복적으로 사용하고, 여러 조
gisele-dev.tistory.com
https://lakelouise.tistory.com/260
[React] 리액트 State란?
🎯 리액트 State란? import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( 버튼을 {count}번 눌렀습니다. setCount(count + 1)}>클릭 ); } State는 컴포넌트 내에서 지속적으로 변경이
lakelouise.tistory.com
리액트 18의 신기능 - 동시성 렌더링(Concurrent Rendering), 자동 일괄 처리(Automatic Batching) 등
> 2022년 3월에 리액트 18이 발표되었습니다. 성능 향상과 렌더링 엔진 개선에 초점이 맞춰졌습니다. 리액트 18은 향후 출시될 리액트 기능의 토대가 될 동시성 렌더링 API의 초석을 다졌습니다. 이
www.freecodecamp.org
'1차 공부 > 기술면접 준비' 카테고리의 다른 글
| Semantic HTML의 필요성을 예시를 들어 설명해주세요. (0) | 2023.03.02 |
|---|---|
| <li>요소는 왜 <ul>요소의 자식 요소여야만 하나요? (0) | 2023.03.02 |
| 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여설명해주세요. (0) | 2023.03.01 |
| Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요. (0) | 2023.03.01 |
| useRef가 필요한 상황을 예시를 들어 설명해주세요 (0) | 2023.02.28 |