패스트 캠퍼스 MGS 3기 - 5월 4일(React 맛보기)

• DOM: 논리 트리
• 컴포넌트: 엘리먼트의 집합
• 엘리먼트: 요소
  
  

1. UseState

---

컴포넌트의 상태를 다루는 훅이다.

여기서 APP()은 button이나 input 등 여러 요소들을 포함하고 있으므로 컴포넌트이다.
useState를 사용해서 어제 만든 검색창 예제를 다음처럼 바꿀 수 있다.

<script type="text/babel">
  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);
</script>

정리

• 엘리먼트: 작은 태그들, 컴포넌트: 그 태그들이 모인 것.
• useState: 상태값을 관리해주는 Hook. useState에 기본값을 넣어서 주면 배열로 된 두 가지의 값이 나온다. [state(진짜 값), setState(state를 업데이트 할 수 있는 함수)]
  
  

2. useEffect

---

컴포넌트의 사이드 이펙트를 다루는 훅이다.
보통 사이드 이펙트라고 하면 부작용을 생각하는데, 부수 효과라는 의미를 가지기도 한다. 리액트에서 어떤 변경이나 효과가 일어날 때 그 효과를 다른 곳으로 전파하거나 다른 곳에도 부수적인 효과를 내주기 위한 도구이다.

이전에 만든 검색창 예제에 검색을 할 때, 키워드가 로컬 스토리지에 저장될 수 있도록 만들어보자.

• 첫 번째 인자로 실행할 함수
• 두 번째 인자로 배열
  • 두 번째 인자를 주지 않으면 모든 변화에 반응한다. (= 변화가 일어날 때마다 첫 번째 인자를 계속 실행한다.)

useEffect(() => {
  실행할 내용
}, [사이드 이펙트를 일으키고 싶은 대상]);

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

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

    React.useEffect(() => {
      window.localStorage.setItem("keyword", 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} value={keyword} />
        <button onClick={handleClick}>search</button>
    	<p>{typing ? `Looking for ${keyword}...` : result}</p>
 	  </>
  );
};

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

정리

• useState는 lazy initailize를 할 수 있다. useState의 인자로 함수를 넣어주면 된다.
  • 예를 들어, 로컬 스토리지에 있는 값을 꺼내서 useState에 넣어주려고 할 때, IO에 대한 시간의 소요가 있으므로 그 값을 바로 가져오는 것이 불가능 할 수 있다. 이때 조금 간격을 두고라도 동작할 수 있게 하는 것이다. (= 안전하게 사용할 수 있게 한다.)
• useEffect: dependency array가 있다. (useState엔 없음!) 말그대로 동작이 의존하는 값들을 넣어주는 것이다.
  • 아무 값도 주지 않거나, 빈 배열을 주거나, 값이 든 배열을 주거나.