useEffect

useEffect는 언제 사용하나?

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 쉽게말해 어떤 컴포넌트가 화면에 보여졌을때 내가 무언가를 실행하고 싶다면, 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면 useEffect를 사용한다.
브라우저에서 우리가 App 컴포넌트를 눈으로 보는 순간, 즉 App 컴포넌트가 화면에 렌더링될 때 useEffect 안에 있는 로직이 실행된다. 컴포넌트가 렌더링 될 때 실행된다. 이것이 바로 useEffect핵심 기능이다.

의존성배열

의존성 배열이란 (dependency array)란?
useEffect에는 의존성 배열이라는 것이 있다. 쉽게 말해 '이 배열에 값을 넣으면 그 값이 바뀔 때만 uiseEffect를 실행할게' 의미.

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

import React, { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log("hello useEffect");
  }, []); // 비어있는 의존성 배열

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

useEffect를 사용하는데, 어떤 함수를 컴포넌트가 렌더링 될 때 단 한번만 실행하고 싶으면 의존성 배열을 [ ] 빈 상태로 넣으면 된다.

clean up

컴포넌트가 사라졌을 때 무언가를 어떻게 실행 이 과정을 클린 업(clean up)이라고 표현.
클린 업을 하는 방법은 간단합니다. useEffect 안에서 return 을 해주고 이 부분에 실행되길 원하는 함수를 넣으면 됩니다.

import React, { useEffect } from "react";

const App = () => {

	useEffect(()=>{
		// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수를 넣어주세요.

		return ()=>{
			// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수를 넣어주세요.
		}
	}, [])

	return <div>hello react!</div>
};

export default App;

정리

• useEffect는 화면에 컴포넌트가 mount 또는 unmount 됐을 때 실행하고자 하는 함수를 제어하게 해주는 훅이다.
• 의존성 배열을 통해 함수의 실행 조건을 제어할 수 있다.
• useEffect 에서 함수를 1번만 실행시키고자 할때는 의존성 배열을 빈 배열로 둔다.

use strict란?

• Strict Mode의 선언방식 이다.
• 이 문구는 ES5부터 적용되는 키워드로, 안전한 코딩을 위한 하나의 가이드라인 이다.

Strict Mode란?

• Strict Mode는 코드에 더 나은 오류 검사를 적용하는 방법입니다.
• Strict Mode를 사용하면, 예를 들어 암시적으로 선언한 변수를 사용하거나 읽기 전용 속성에 값을 할당하거나 확장할 수 없는 개체에 속성을 추가할 수 없습니다.
• Strict Mode는 ECMAScript 5 버전에 있는 새로운 기능으로써, 당신의 프로그램 또는 함수를 엄격한 운용 콘텍스트 안에서 실행시킬 수 있게끔 합니다. 이 엄격한 콘텍스트는 몇가지 액션들을 실행할 수 없도록 하며, 좀 더 많은 예외를 발생시킵니다.

Strict Mode의 장점

• 흔히 발생하는 코딩 실수를 잡아내서 예외를 발생 시킵니다.
• 상대적으로 안전하지 않은 액션이 발생하는 것을 방지합니다.
• 정확하게 고려되지 않은 기능들을 비활성화 시킵니다.

실제 적용 예제코드

전역 컨텍스트(함수 범위 밖)에서 선언되는 경우 프로그램의 모든 코드에 strict 모드가 적용됩니다.

"use strict";
function testFunction(){
  let test =1;
  return test;
}
// syntax error
test =5

함수 내에서 선언되는 경우 함수의 모든 코드에 strict 모드가 적용됩니다.

function testFunction(){
  "use strict";
  //syntax error
  test =4;
  return test
}
test = 5