React에서 통계는 매우 매우 중요합니다.
화면에서 발생하는 모든 변화는 변수(상태)로 표현될 수 있으며, 업데이트는 종종 이렇게 발생합니다.
렌더링(새로 고침) 중에 항상 최신 데이터(상태)를 유지해야 합니다.
아주 간단하지만 공식 문서를 참고하여 명확하게 이해하려고 노력했습니다.
React(93) useState에 대해 자세히 알아보기(공식 문서)
useState는 React의 내장 함수로 상태를 나타내는 변수로 사용할 수 있습니다.
useState는 반응 후크이므로 구성 요소의 맨 위에서 호출해야 합니다. 조건문이나 반복문에 사용하면 안 됩니다.
(strict 모드에서는 순수 함수인지 확인하기 위해 두 번 실행되지만 프로덕션에서는 아무런 효과가 없습니다.)
// inititalState 를 넣어주면 첫 렌더시에만 name에 'Dongmin' 이라는 값이 들어간다
const (name, setName) = useState('Dongmin');
↑
initialState
useState의 파라미터로 initialState가 있습니다. 첫 번째 렌더링에 입력할 값(모든 유형)을 입력합니다.
useState의 반환값으로 Destructuring과 Assignment(value, setValue) ←←← 추출하여 사용한다.
– 값 현재 상태 값입니다. 첫 렌더링 시 InitialState를 표시합니다.
– 설정 값 값을 다른 값으로 업데이트하는 데 사용됩니다. 또한 다시 렌더링을 위한 트리거 역할도 합니다.
기능 설정
모든 유형의 값을 setValue의 매개변수로 받을 수 있습니다. 본인 기능또한 가능합니다.
(함수로 가져오려면 순수해야 하고 상태를 반환 값으로 내보내야 합니다. 적극 권장하지 마십시오.)
(React는 이 업데이트 기능을 큐에 넣고 구성 요소를 다시 렌더링합니다.)
setValue는 다음 렌더링에서 값을 업데이트합니다.
따라서 setValue 함수를 실행해도 값이 즉시 변경되지 않습니다.
현재 값과 업데이트된 값이 같으면 React는 다시 렌더링하지 않습니다.
스택 값 업데이트.
모든 이벤트 핸들러와 해당 설정 함수가 호출된 후 화면이 업데이트됩니다.
이렇게 하면 이벤트 중에 여러 번 다시 렌더링하는 것을 방지할 수 있습니다.
다시 렌더링하는 동안 setValue를 호출하는 것은 현재 렌더링 중인 구성 요소 내에서만 가능합니다.
원래 반환 값이 갑자기 취소되고 새 값이 반환 값으로 대체되어 렌더링됩니다. (거의 필요하지 않음)
부끄럽지만 과거의 기록을 되새기며 ↓ ↓ ↓
React(24) React Hook useState란 무엇입니까?
2021년 10월 18일 업데이트됨 React Hook은 기능 구성 요소에 기능을 추가하는 기능입니다. 기능적 구성 요소에서는 상태 값을 사용하고 자식에 액세스할 수 있습니다. 내가 이해하는 가치를 제공합니까? 사용자 웹
devbirdfeet.tistory.com