새로고침해도 데이터를 남기고 싶을 때

1. local Storage
2. session Storage
3. cookie

등 브라우저 내의 저장공간에 저장할 수 있습니다.

local storage에 저장하기

lazy initialize

// 불러오는 데이터가 많다면 딜레이가 발생할 수 있습니다.
React.useState(window.localStorage.getItem("keyword"));

// useState에 함수로 전달하면 늦더라도 결과값을 가져옵니다.
React.useState(() => {window.localStorage.getItem("keyword")});

React.useEffect

Onchange로 input엘리먼트의 값이 바뀔때마다 해당 처리를 해줄 수도 있지만,
다른 특정 이벤트에서만 동작하게 만들 수도 있습니다. 두번째 인자로 배열이 들어갑니다.

// 두번째 인수로 전달한 값이 변할 때에만, 첫번째 인수로 전달한 함수가 동작합니다.
React.useEffect(() => {window.localStorage.setItem("keyword", event.target.value)}, [keyword]);

useEffect의 두번째 인수

전달하는 인수 없음 : 모든 이벤트에서 동작합니다.
[ ] : 컴포넌트의 첫 실행시에만 단 한번 동작합니다.
[ state ] : 해당 state의 값이 바뀔 때마다 동작합니다.
[ state1, state2] : state1 또는 state2 둘 중 하나라도 바뀐다면 동작합니다.