nomadcorders_ReactJS로 영화 웹 서비스 만들기_DAY4

2023-05-11
#6.0 EFFECTS

state가 변경되어 렌더링 될 때마다 함수를 실행하는 것이 아니라,
가장 처음 컴포넌트가 렌더링 될 때만 함수를 실행하고, state의 변화로 인한 리렌더에는 실행되지 않도록 하기
우리의 코드가 초기에 단 한번만 실행되도록 보호해준다. 

useEffect(function, deps)
function : 단 한번만 실행할 함수.
deps : 내 코드의 특정 부분만이 변화했을 때, 원하는 코드들을 실행할 수 있는 방법
           deps[] 배열 안에 들어 있는 값이 변화하는 경우에만 function을 실행하도록 할 수 있다.

import {useState, useEffect} from "react";

function App() {
    const [counter, setValue] = useState(0);
    const [keyword, setKeyword] = useState("")
    const onClick = () => setValue((prev) => prev + 1);
    const onChange = (event) => setKeyword(event.target.value);
    // console.log('I run all the time');
    useEffect(() => {
        console.log("I run only once")
    }, []);
    useEffect(() => {
        console.log("I run when 'keyword' changes.");
    }, [keyword]);
    useEffect(() => {
        console.log("I run when 'counter' changes.");
    }, [counter]);
    useEffect(() => {
        console.log("I run when keyword & counter changes.");
    }, [keyword, counter]);
  return (
      <div>
          <input value={keyword} onChange={onChange} type="text" placeholder="Search Here..."/>
        <h1>{counter}</h1>
        <button onClick={onClick}>click me</button>
      </div>
  );
}

export default App;

 

 

정리

• 리액트를 사용하는 이유: 최소 단위의 렌더링을 위해
• useState(): 변수, 변수를 제어하는 함수로 구성되며 변하는 값을 제어, 해당 부분의 리렌더링을 위함
• props: 태그의 속성 값을 함수의 아규먼트 처럼 컴포넌트에 값을 전달해준다.
• useEffect(): 코드의 실행 시점을 관리할 수 있는 선택권을 얻는 방어막 같은 존재
  • 디펜던시가 없을 경우 최초 1회 실행, 있을 경우 해당 값이 변할 경우 실행한다.
  • 이 때 디펜던시는 여러개 입력이 가능하다.

🏴 부모 컴포넌트에서 리렌더링이 일어날 경우 모든 자식들이 리렌더링이 된다.(wa can use memo)
🏴 propType을 설치하고 props의 타입을 지정해 줄 수 있다. 이 때 isRequired로 필수값을 지정 가능