React { useState, useEffect }

Component State Control by useState 

// 실습 코드 

const rootElement = document.getElementById("root")

const App = () => {
  const [keyword, setKeyword] = React.useState("");
  const [result, setResult] = React.useState("");
  const [typing, setTyping] = React.useState(false);


  function handleChange(event){
    setKeyword(event.target.value);
    setTyping(true);
  }

  function handleClick(){
    setTyping(false);
    setResult(`we find results of ${keyword}`);
  }
  return(
    <>
    <input onChange={handleChange}/>
    <button onClick={handleClick}>Search</button>
    <p>{ typing ? `Looking for ${keyword}....` : result}</p>
    </>
  );
};

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

앞에서 EventHandler에서 사용했던 실습 코드에서는 상태값을 따로 선언해줬었는데, useState로 바꿔주면서 상태관리를 하면 얼마나 편한지 몸소 체험했다. 

 

컴포넌트 - 요소들의 집합

useState - 상태관리를 관리해주는 훅

 

---

Component Side Effect 

// 실습 코드

const rootElement = document.getElementById("root")

const App = () => {
  const [keyword, setKeyword] = React.useState("");
  const [result, setResult] = React.useState("");
  const [typing, setTyping] = React.useState(false);

console.log("render");

React.useEffect(() => {
  console.log("effect")
  window.localStorage.setItem("keyword", keyword);
}, [])


  function handleChange(event){
    setKeyword(event.target.value);
    setTyping(true);
  }

  function handleClick(){
    setTyping(false);
    setResult(`we find results of ${keyword}`);
  }
  return(
    <>
    <input onChange={handleChange}/>
    <button onClick={handleClick}>Search</button>
    <p>{ typing ? `Looking for ${keyword}....` : result}</p>
    </>
  );
};

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

useState  : lazy initialize

어떤 큰 함수안에 초기화 함수가 있고 또 그안에 상태관리하면서 실시간으로 바뀐다면 그 전체함수가 콜백되서 

초기화 함수가 매번 실행되는 경우가 있는데, 이럴 경우에는 해당 함수를 상태값 관리해주는 useState에서 

콜백함수로 불러주면 된다.

 

useEffect 뒤에  dependency array(뒤에 있는 []) 가 있는데, 저렇게 빈 어레이일경우 처음 렌더링할때 실행되고 내가 부수효과를 주고싶은 상태변수를 넣으면 해당 상태변수가 변할때마다 useEffect안에 함수를 실행시켜줍니다. 아예 안적으면 모든 상태변화에 반응을 해버린다. 

 

UseEffect 한눈에 알기 

// 모든 변화에 반응한다. deps가 없으니까 

React.useEffect(() => {
    console.log("App useEffect, no deps");
  });

// 처음만 한번 호출되고 다시 호출되지 않는다. 
  
React.useEffect(() => {
    console.log("App useEffect, empty deps");
  }, []);
  
// show state값이 바뀔때마다 호출된다.   
  
React.useEffect(() => {
    console.log("App useEffect, [show]");
  }, [show]);