[React 기초] Effects

* 리액트 앱을 사용한 실습 *

create-react-app으로 간단하게 리액트 앱을 설치한다.

리액트 앱 내에서 prop-types를 사용하고 싶다면 따로 설치하여 import 시켜줘야 한다.

그리고 css 적용 시 컴포넌트별로 css파일을 만들어 모듈화시켜줄 수 있다.

.module.css 파일을 생성하고 import 하여 사용하면 된다.

 

최초 렌더링에만 코드가 실행되게 하는 방법 : useEffect()

state값이 변화되어 리렌더링 되면 모든 코드가 재실행된다.

이때 API를 사용했을 때처럼 한번만 받아도 될 정보의 경우에도 리렌더링 할 때마다 계속 호출된다.

useEffect()를 사용하면 특정 코드가 최초로 render할 때만 실행되게 할 수 있다.

 

useEffect() 사용 예시는 아래와 같다.

useEffect(() => {
  if (keyword != "" && keyword.length > 5) {
    console.log("I run when 'keyword' changes");
  }
}, [keyword]);

이 경우에는 keyword가 변화할 때마다 첫번째 인자로 넣은 함수가 실행된다.

만약 최초의 렌더링에만 함수를 실행시키고 싶다면 두번째 인자인 [ ]를 빈 배열로 두면 된다.

 

 

 

컴포넌트 소멸 시 실행되는 함수 : cleanUp

function Hello() {
  useEffect(() => {
    console.log("created");
    return () => console.log("destroyed"); //clean up 함수
  }, []);
  return <h1>Hello</h1>;
}

useEffect()의 첫번째 인자인 함수가 리턴 값으로 가진 함수는 컴포넌트가 소멸될 때 실행된다.

이 경우에 Hello 컴포넌트가 생성될 때 콘솔에 "created"가 찍히고 컴포넌트가 소멸되면 "destroyed"가 찍힌다.