header컴포넌트에 이벤트를 넣어보자.
위 예시는 Header를 클릭하면 Header의 onclick 발생 —> onClick함수 안에 있는 event.preventDefault()로 인해 새로고침은 막고 props로 인해 전달된 onChangeMode()함수를 실행시킨다. —> onChangeMode()함수는 alert(’Header’)를 띄운다.
state는 컴포넌트 내부에서 사용하는 데이터이다.
state를 사용할려면 import {useState} from ‘react’;를 해 주어야 한다.
**언더바 주의
만약 내가 mode 값에 따라 html을 바꾸고 싶다면??
conse _mode = useState(’WELCOME’);을 하면 상태를 만드는 것이다. mode가 변경되면 mode변수가 있는 컴포넌트를 변경된 mode에 맞게 재실행 시킨다.
이 때 _mode는 배열의 형태로 저장되어 있다. 첫번째 원소는 상태의 값을 읽을 때 쓰는 데이터.(WELCOME 또는 READ) 두번째 원소는 상태의 값을 변경할 때 사용하는 함수
const mode=_mode[0] 이라고 하면 상태의 값을 mode를 통해서 읽을 수 있다. const setMode =_mode[1] 이라고 하면 상태의 모드를 setMode를 통해 바꿀 수 있다.
위 두 문장을 하나의 문장으로 바꿀 수 있다. —> const [mode, setMode]=useState(’WELCOME’)
현재 상태의 값을 읽고 싶을 떄는 mode를 사용한다. —> ex) if mode==WELCOME~~
현재 상태를 바꾸고 싶을 때는 setMode를 사용한다. —> ex) setMode(’WELCOME’)