리액트(컴포넌트)/커스텀 함수로 반복코드 없애기

element -> 태그
component 는 element 의 집합
childrend 은 태그가 감싸고 있는 문자열,숫자

 const rootElement = document.getElementById("root");

      const App = () => { //변수 선언 + 함수 + return
        // let keyword = "";
        const [keyword, setKeyword] = React.useState("");
        const [result, setResult] = React.useState("");
        const [typing, setTyping] = React.useState(false);
        
        function handleChange(event) {
          setKeyword(event.target.value); //새롭게 들어온 값들이 setKeyword로 들어와서 keyword를 업데이트 시켜줌
          setTyping(true);
        }
        function handleClick() {
          setTyping(false);
          setResult(`we find result of ${keyword}`);
        }
        return (
          <>
            <input onChange={handleChange} /> //텍스트박스에 변화가 있으면 실행
            <button onClick={handleClick} children="press me" />
            <p>{typing ? `Looking for ...${keyword}...` : result}</p>
          </>
        );
      };

      ReactDOM.render(<App />, rootElement); //App component 를rootElement 에 주입

LocalStorage

<script type="text/babel">
      const rootElement = document.getElementById("root");

      const App = () => {
        // let keyword = "";
        console.log("rendering"); //input 박스에 값이 변할때 마다 rendering글자 출력된다
         -> 미칀듯이 계속 rendering 된다
        const [keyword, setKeyword] = React.useState(
          window.localStorage.getItem("keyword") //localStorage 의 값을 keyword로 합니다
        );
        const [result, setResult] = React.useState("");
        const [typing, setTyping] = React.useState(false);

        function handleChange(event) {//input 태그에 값을 입력하면 localStorage 에 keyword 라는 이름으로 
        값이 저장됩니다. 값은 F12 -> application 에서 확인 가능
          window.localStorage.setItem("keyword", event.target.value);
          setKeyword(event.target.value);
          setTyping(true);
        }
        function handleClick() { 
          setTyping(false);
          setResult(`we find result of ${keyword}`);
        }
        return (
          <>
            <input onChange={handleChange} value={keyword} /> //localStorage 에 있는 값을 기본값으로 input 박스에 보여줍니다
            <button onClick={handleClick} children="press me" />
            <p>{typing ? `Looking for ...${keyword}...` : result}</p>
          </>
        );
      };

      ReactDOM.render(<App />, rootElement);
    </script>

LocalStorage 에 여러개 저장 시키기

핵심custom 함수를 만들어서 반복적인 동작을 하는 useEffect를 하나로 묶어 코드량을 줄이다

 <script type="text/babel">
      const rootElement = document.getElementById("root");

      function useLocalStorage(itemName, value = "") {
        console.log(itemName); //keyword, result,typing
        const [state, setState] = React.useState(() => {
          //return 값을 state에 넣다
          return window.localStorage.getItem(itemName) || value;
        });
        console.log(setState);
        React.useEffect(() => {
          window.localStorage.setItem(itemName, state);
        }, [state]);
        return [state, setState];
      }
      const App = () => {
        // let keyword = "";

        const [keyword, setKeyword] = useLocalStorage("keyword"); //return [123,]
        const [result, setResult] = useLocalStorage("result"); //빈 공백
        const [typing, setTyping] = useLocalStorage("typing", false); //false

        function handleChange(event) {
          setKeyword(event.target.value); //setKeyword 가 바뀔때 마다 keyword가 바뀜
          setTyping(true);
        }
        function handleClick() {
          //버튼 클릭하면 Typing 은 false  결과는 탬플릿 문자열
          setTyping(false);
          setResult(`we find result of ${keyword}`);
        }
        return (
          <>
            <input onChange={handleChange} value={keyword} />
            <button onClick={handleClick} children="press me" />
            <p>{typing ? `Looking for ...${keyword}...` : result}</p>
          </>
        );
      };

      ReactDOM.render(<App />, rootElement); //App 컴포넌트 실행
    </script>