React Hooks 또는 온라인 수업?

상태 관리:

모든 대학생이 온라인 수업 중에 하는 것과 같습니다. 나는 진지하게 농담하지 않는다!!!

상태는 'ON'과 'OFF'의 두 가지 상태가 있는 스위치의 간단한 예를 통해 이해할 수 있습니다.


온라인 수업이나 대학 강의 중에 우리는 출석 또는 결석 쉬는 시간에만 참석하여 스스로 공부합니다.

반응으로 상태를 정의하여 관리하고 시나리오에 따라 계속 업데이트합니다.

후크 방식에서는 상태를 관리하기 위해 "useState"를 사용합니다.

상태 후크:
학생을 위한 상태 후크를 정의해 보겠습니다.

// State hooks for student

const [student,setStudent] = useState('');

초기 값은 빈 문자열이며 학생을 인쇄하면 다음과 같습니다.

console.log(student) // Output will be blank as string is empty.

이제 상태를 변경하려면 값을 다음과 같이 업데이트해야 합니다.

setStudent('Present")

console.log(student) // Output will be 'Present'

여기서 "student"는 상태를 저장하는 데 사용되고 "setStudent"는 상태를 업데이트하는 데 사용되는 상태 핸들러입니다.

상태는 사용 사례와 만들고자 하는 대상에 따라 숫자, 문자열, 배열 또는 개체와 같은 모든 형식이 될 수 있습니다.



효과 후크:
React에서 모든 구성 요소에는 기본적으로 세 가지 수명 주기 접근 방식이 있습니다.

마운팅

업데이트 중

마운트 해제 중

다시 말하지만, 우리가 참석해야 하는 상황이 무엇이든 강의 예는 "마운팅"작업과 유사하게 작동하며, 우리가 반응 앱을 시작할 때마다 마운트되고 렌더링됩니다. Hooks 사용에 대해 이야기하면 다음과 같이 할 수 있습니다.

useEffect(
()=>{

//Operation to be performed

},[])

앱이 시작될 때 원하는 상태를 마운트하는 상태 변수가 없는 "UseEffect"메서드(예: "온라인 수업 참여 및 참석").

이제 상태 또는 업데이트 주기 업데이트:

상태가 존재하면 스위치를 켜면 꺼야 하는 것처럼 값을 업데이트해야 합니다.

useEffect(()=>{

//Operation to be performed

},[state])

여기서 상태는 상태 변수를 나타냅니다. 값이 변경될 때마다 상태가 업데이트되고 내부 작업이 수행됩니다.

다음은 Hooks 기반의 간단한 애플리케이션입니다.
here과 함께 놀 수 있습니다.



이 게임에서는 네모 상자 안의 점 좌표를 찾아야 합니다. 짜잔!

내가 한 것은 사용자가 좌표를 시작하거나 생성할 때 시간이 시작되고 이동에 따라 상태가 업데이트되는 것입니다. 생성된 좌표와 일치하는 즉시 상태가 false로 설정되고 게임이 종료됩니다.

후크 개념을 간단하고 쉽게 구현합니다.

코드를 찾을 수 있습니다here.

이것은 원래 내 개인blog에서 작성되었습니다.