React 5 useEffect

useEffect

 - 리 렌더링 단계 시 렌더링 되지 않게 한다.(간단. 웹에 처음 접속 할때만 호출하고 클라이언트에 의해 웹리 리렌더링 될 시 랜더링 되지 않게 한다.) 공식 문서

useEffect(didUpdate);
// 상세
useEffect(함수, []);
// 또는
useEffect({
  함수;
}, []);

 

예

const [counter, setValue] = useState(0);
const [keyword, setKeyword] = useState("");

const onClick = () => setValue((prev) => prev+1);
const onChange = (event) => setKeyword(event.target.value);

// useEffect 사용
useEffect(() => {
  console.log('계속 실행');
}, [counter]);

useEffect(() => console.log("api 호출"), []);

useEffect(() => console.log('text', keyword), [keyword]);

 

또 다른 코드를 숨기거나 나타내는데 사용할 수 있다.

예)

import { useEffect, useState } from 'react';

function Hello() {
  useEffect(() => {
    console.log('안녕');
    return () => console.log('잘가')
  }, [])
  return <h1>hello</h1>;
}

function App() {
  const [showing, setShowing] = useState(false);
  const onclick = () => setShowing((prev) => !prev);

  return (
    <div>
      <button onClick={onclick}>{showing ? 'Hide' : 'show'}</button>
      {showing ? <Hello /> : null}
    </div>
  );
}

export default App;

  위와 같이 코드를 작성하면버튼을 누를 시 버튼의 이름이 바뀌며 Hello가 나왔다 사라졌다 한다. 콘솔창을 보면 Hello나 나오면 '안녕'이 나오고 한번 더 누르면 '잘가'가 나온다.

  그리고 요소창을 보면 태그 h1이 나왔다 사라졌다 하는 것을 볼 수 있다.

 

---

공부 내용 작성 코드 github 주소

공부한 곳! - 노마드 코더 'ReactJS로 영화 웹 서비스 만들기'