[React 영화 서비스 만들기] useEffect

useEffect 를 알아보기 이전에 rendering이라는 개념 먼저 잡고 가자

렌더링이란?

- 브라우저 렌더링 : html과 css리소스를 기반으로 웹페이지에 필요한 ui를 그려내는 과정

- 리액트 렌더링 : 브라우저가 렌더링에 필요한 DOM트리를 만드는 과정

 

여기서 DOM이란?

React element 들을 HTML body에 둘 수 있도록 하는 것을 말한다.

 

리액트 앱의 모든 컴포넌트들이 현재 자신들이 갖고 있는 props와 state의 값을 기반으로

어떻게 ui를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할지 계산하는 일련의 과정이다.

 

리액트 렌더링은 언제 일어나는가?

-최초 렌더링

-useState() 의 두번째 요소인 setter가 실행될 경우

-컴포넌트의 props가 변경되는 경우

-부모 컴포넌트가 렌더링 될 경우

.

.

.

(더 있지만 여기까지만 나머진 아래 참고)

 

참고

[React] 리액트 렌더링 과정

 

만약 특정 기능을 한번만 렌더링 하고 싶다면 어떻게 해야할까?

이 때 필요한 것이 useEffect()의 기능이다.

• 사용

 useEffect(() => {
    console.log('빈 배열이면 최초 실행');
  }, []);
  
   useEffect(() => {
    console.log('useStat변수인 keyword 값이 변화할때마다 실행');
  }, [keyword]);// 배열에 여러 값을 넣을 수도 있다.

 

import { useState, useEffect } from 'react';

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState('');
  const onClick = () => setCounter((prev) => prev + 1);
  const onChange = (event) =>  setKeyword(event.target.value);
  useEffect(() => {
    console.log('최초 실행됨');
  },[]);
  useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log(keyword,'가 변화할 때 실행됨');
    }
  }, [keyword]);
  useEffect(() => {
    console.log(`${counter}가 변화할 때 실행됨`);
  }, [counter]);
  return (
    <div>
      <input
        onChange={onChange}
        value={keyword}
        type='text'
        placeholder='입력해주세요!'
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>click</button>
    </div>
  );
}

export default App;