타임테이블에서 useState 훅을 사용했다.
useState는 리액트에서 상태를 관리하기 위해 제공되는 훅(Hook)이다.
UI를 동적으로 업데이트하는데 사용하는 JS 라이브러리임!
useState 함수는 배열을 반환하는데,
첫번째 요소는 현재 상태의 값이고, 두번째 요소는 상태를 변경하는 함수이다.
타임테이블에서는 어떤 식으로 useState를 사용했는가 하면
day를 useState의 상태 변수로 사용했다.
선언 방법
먼저 이런식으로 선언한다.
const [day, setDay] = useState(30);첫번째 요소인 day 상태 변수,
두번째 요소인 setDay는 상태 변경 함수
간단하게 설명하면 내가 사용할 변수는 day이고
day의 값을 변경하고 싶으면 setDay함수를 이용해서 변경하면 된다.
day에 직접적으로 값을 할당하여 변경할 수 없음.
반드시 setDay를 통해 day의 값을 변경해야 하는 것.
useState(30); 부분에서 30은 초기 상태값을 말하는 것.
괄호 안에 초기 상태 값을 설정해주면 된다. 문자열, bool 형태로도 가능
나는 초기값을 30으로 설정했기 때문에
맨처음 타임테이블 화면은 30일의 정보가 나온다.
day의 값이 31로 바뀌면 화면은 31의 정보 페이지로 변경!
동적으로 값 변경
day의 값은 버튼으로 바뀌도록 구현했다.
<button onClick={() => changeDay(30)}>DAY1</button>
<button onClick={() => changeDay(31)}>DAY2</button> 위의 버튼을 클릭하면 changeDay()함수가 수행이되는데
DAY1을 클릭하면 파라미터에 값 30을
DAY2를 클릭하면 파라미터에 값 31을 전달
const changeDay = ( newDay ) => {
setDay(newDay);
}그럼 이 함수가 newDay로 값을 받아서 setDay에게 넘겨준다.
위에서 말했듯 setDay 함수는 상태 변경 함수이고
setDay는 버튼 클릭시 받아온 값으로 day 상태변수의 값을 바꾼다.
결론
- 버튼 누르면 changeDay함수 실행
- 해당 버튼에서 넘긴 값을 setDay 함수에게 전달
- setDay는 day의 값을 바꿈.
버튼 누르면 day의 값이 바뀌면서 화면의 데이터들도 동적으로 바뀜
넘나 편리한 훅이다 ~ :)
