React

React 완벽 복습

고급: Reducer 사용 & ContextAPI 사용

Effect(Side Effect)

• Main Job: Render UI & React to User Input

  • JSX와 DOM렌더하고 평가
  • State와 Props 관리
  • 사용자의 이벤트 및 input에 반응
  • 컴포넌트 State와 Props 변경시 JSX code 재평가 및 real DOM 필요한 만큼 조작

• Side Effects: Anything Else, 화면에는 직접적으로 나타나지 않는 것들

  • 백엔드 서버에 Http 요청 보내기
  • 브라우저 저장소에 데이터 저장, 로컬 스토리지
  • Timer, Interval 설정 및 관리
  • 이러한 작업은 외부에서 이루어짐 함수 내부에서 직접적으로 입력되면 버그를 만들 확률이 높고 너무 많은 http request를 보내 무한 루프를 야기할 수 있음
  • 이러한 부분을 해결해 주는 것이 useEffect() Hook

useEffect() Hook

useEffect(() => { ... }, [ dependencies ])

• 함수 컴포넌트에서의 useEffect

• 라이프사이클을 대체하는 훅

• 함수 컴포넌트에서는 특정 데이터에 대해서 라이프사이클이 진행

• 클래스 컴포넌트에서는 componentWillMount, componentDidMount, componentDidUpdate, componentWillUnmount를 컴포넌트 당 한 번씩만 사용했다면

• useEffect는 데이터의 개수에 따라 여러 번 사용

• useRef를 활용한다면 useEffect에서 componentDidUpdate 효과를 낼 수 있다.

  • componentDidMount를 무시하는 방법

• useEffect에서 cleanup 함수 사용은

  • return 을 이용
  • setTimeout한 것을 return에서 clearTimeout하여 사용

useReducer() Hook

• Example

• useState와 비슷하게 상태관리하는 훅, 하지만 더 복잡한 상황일 때 유용

• state가 많을 경우, state를 하나로 합치는 역할

• const [state, dispatch] = useReducer(reducerFn, initialState, initFn)

  • state는 현재 가르키고 있는 상태
  • dispatch는 액션을 발생시키는 함수
  • state를 바꾸기 위해 action을 만들고, 이벤트를 통해 action을 dispatch하여 reducer함수의 action을 불러와 state값 변경

• 컴포넌트에서 관리하는 state 수가 적다면 useState로 관리하는 것이 더 간편하지만

• 컴포넌트에서 관리하는 state가 많고, state를 변경하는 함수가 많다면 useState를 여러개 사용하는 것 보다 useReducer로 state를 더 편하게 관리할 수 있다.

Context(Context API)

• Flux 패턴

• 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리

• 이 값은 함수일수도 있고, 어떤 외부 라이브러리 인스턴스일수도 있고 심지어 DOM 일 수도 있다.

  • 로그인 데이터, 웹 내 사용자가 쓰는 설정파일, 테마, 언어 등등 다양하게 컴포넌트간 공유되어야할 데이터

• Context에 저장된 데이터를 사용하기 위해서는 공통 부모 컴포넌트에 Context의 Provider를 사용하여 데이터를 제공

  • 데이터를 사용하려는 컴포넌트에서 Context의 Consumer를 사용하여 실제로 데이터를 사용

• Context 사용법

  • React.createContext()

• Context 를 만들면, Context 안에 Provider 라는 컴포넌트가 들어있는데 이 컴포넌트를 통하여 Context 의 값을 정할 수 있다.