React 완벽가이드 Session 10

모듈 소개

Effects, Reducers & Context

 

"Side Effects"이란 무엇이며 useEffect를 소개합니다

• 애플리케이션에서 일어나는 모든 것
• 리액트에서는 state값이 변하는 등의 작업이 일어날 때 리렌더링 됨
• 만약 사이드 이펙트가 계속 리액트에 관여하게 된다면 무한 루프에 빠질 가능성이 크다.
• 이것을 해결하기 위한 방법으로 useEffect 가 있다.

1) useEffect :  컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook

useEffect(()=>{ ...}, [ dependecies]);

• 첫번째 인자는 함수로, 모든 컴포넌트 평가 후에 실행되어야 하는 함수
• 두번째 인자 배열이 변경될 때마다 함수가 실행된다.

ⓐ 두번째 인자가 빈 배열일 때

useEffect(()=>{
    // 컴포넌트가 처음 렌더링 될 때 한번만 실행하고 싶을 때
    }, [ ]);

ⓑ 두번째 인자가 생략 될 때

useEffect(()=>{
    // 리렌더링 될 때마다 실행됨
    });

ⓒ 두번째 인자의 배열 안 요소가 여러개일 때

useEffect(()=>{
    // a 또는 b 또는 c 가 변경될 때 실행된다
    }, [ a, b, c ]);

• 주의사항

종속성에 추가할 수 있는건 state, props 등 이 있음

state에서 setData 같이 상태 업데이트가 되는 함수는 추가할 필요가 없다. (왜냐하면 절대 변경되지 않도록 보장함)

 

 

 

useEffect() 훅 사용하기

useEffect() Hook

이럴 때 useEffect 훅을 사용할 수 있다.내장 훅

useEffect(() => {}, [])두 개의 매개변수, 두 개의 인수와 같이 호출됨

첫 번째 인수는 함수모든 컴포넌트 평가 후에 지정된 의존성이 변경된 경우에 실행되어야 하는 함수지정된 의존성은 두 번째 인수로 넣어줘야 한다[]첫 번째 함수에 어떤 side effect code도 넣을 수 있음.그러면 그 코드는 의존성이 변경된 경우에만 실행될 것

useEffect는 사이드이펙트를 처리하기 위해 존재사이드이펙트는 http 요구같은 것, 아니면 키 입력을 받고 응답하고 다른 액션을 실행하는 것,,,이런 식의 사이드이펙트가 존재한다(사용자 입력 데이터의 사이드이펙트)무언가에 대한 응답으로 실행되는 코드를 다루는데 도움이 된다.어떤 액션에 대한 응답으로 실행되는 액션이 있다면 useEffect가 크게 도움된다.

 

useEffect 사용예시

 

처음의 웹사이트

login을 하면 새로고침해도 여전히 인증 상태에 있다는 것을 확실하게 하고 싶다.

해결법

이 앱이 재실행될 때마다 데이터가 유지되었는지 확인하는 것이다.

const [isLoggedIn, setIsLoggedIn] = useState(false);
 useEffect(()=> {
  const storeUserLoggedInInformation = localStorage.getItem('isLoggedIn')
  
  if (storeUserLoggedInInformation === '1') {
    setIsLoggedIn(true)
  }
 }, [])

 

useEffect & 종속성

useEffect

사이드 이펙트를 처리하기 위해 존재한다.

사용

무엇가의 응답으로 사용되는 경우

 

useReducer 및 Reducers 일반 소개

useReducer

state 관리를 위해 존재한다.

복잡한 state관리를 도와주는 hook

하나의 state가 다른 state 들 값에 의존하고 있다면 버그 가능성 있음

컴포넌트 함수 밖에서 선언이 가능하다.

대부분의 경우에는 useState를 사용하는 것이 좋다.

 

필요성

예를 들어 enteredEmail과 emailIsValid 라는 useState가 있을 때이 둘은 서로 중첩되기 때문에 useReducer을 사용할 수 있다.

필요할 때

• 함께 속하는 state들이 있는 경우
• 다른 state에 의존하여 state를 업데이트 하는 경우

 

리액트 Context(Context API) 소개

자신의 부모가 아닌 컴포넌트에게 데이터를 전달하기 위해서는 부모를 통해서 전달해야했다. 하지만

리액트 Context는 그럴 필요가 없다.

 

리액트 Context

컴포넌트 전체에서 사용할 수 있는 리액트에 내장된, 내부적인 state 저장소