[React 숙련] 1주차_React Hook

오늘의 학습내용 :  useEffect, useRef, useContext Hook

 

◆ useEffect

 

 

useEffect는 side effect를 발생시킬 때 사용하는 React Hook이다. 쉽게 말해서 어떤 컴포넌트가 렌더링 된 이후마다 특정한 작업을 수행하도록 설정하고 싶을 때 사용하는 것이다. React 공식 문서에서 useEffect는 외부 시스템과 컴포넌트의 싱크를 맞춘다고 설명하는데, 렌더링이 끝난 다음에 실행되기 때문에 컴포넌트의 렌더링 과정을 순수하게 유지시킬 수 있다.

 

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

 

Side Effect란?
사이드 이펙트는 함수, 메서드의 실행이 프로그램의 상태에 영향을 주는 것을 뜻한다. 개발을 할 때 프로그램을 보다 쉽게 유지 보수하고 버그를 줄이기 위해서는 이런 사이드 이펙트를 줄일 필요가 있다. 이를 위해 순수함수를 사용하고, 입출력 사이에 사이드 이펙트를 배제한다. 하지만 당연하게도 사용자가 입력한 값이나 통신으로 받은 데이터를 사용하고 이에 맞는 결과를 반환하기 위해서는 사이드 이펙트가 발생할 수밖에 없다. 그래서 필요한 경우에 잘 관리된 방식으로 사이드 이펙트를 활용하기 위해 useEffect와 같은 Hook를 사용할 수 있다.

 

 

◆ useRef

 

Ref는 reference(참조)의 줄임말로, useRef는 useState처럼 특정한 값을 저장하기 위해 사용하는 React Hook이다. 자바스크립트 문법을 배울 때 특정 DOM을 선택하기 위해 document.querySelector를 사용했던 경험을 떠올려 보면, React에서도 비슷하게 DOM을 직접 선택해야 할 상황이 있다. 이럴 때 useState, useRef를 사용하여 특정한 DOM 요소에 접근하면 된다. useRef의 특징은 불필요한 재렌더링을 하지 않아서 자바스크립트 DOM API를 직접 사용하지 않고 DOM 요소를 다룰 수 있다는 점이다.

 

import "./App.css";
import { useRef } from "react";

function App() {
  const ref = useRef("초기값");
  console.log("ref", ref);

  return (
    <div>
      <p>hello</p>
    </div>
  );
}

export default App;

 

 

◆ useContext

 

useContext는 하위 컴포턴트에 context를 제공하는 React Hook이다. context는 각 컴포넌트가 참조할 수 있는 데이터의 모음으로 생각할 수 있다. React.creatCocntext가 나오면서 활발히 쓰이기도 했고, Redux를 useContext로 대체하려는 경우도 있다. 기존에 컴포넌트 간에 데이터를 전달하려면 props를 이용하여 부모 - 자식 관계에서 데이터를 내려보냈다. 만약 A, B, C가 각각 부모 - 자식 관계 컴포넌트일 때, A에서 C로 데이터를 보내려면 중간의 B를 거쳐야만 했기 때문에 비효율적이었다.

 

prop drilling의 문제점
- 데이터의 깊이가 깊어질수록 prop이 어떤 컴포넌트로부터 왔는지 파악하기 어렵다.
- 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들고, 유지보수하기에 비효율적이다.

 

import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext);
  // ...

 

 

질문 & 더 알아보기

:순수함수(pure function)란 무엇일까?

// (1)
function sum(x,y){
	return x + y;
};

sum(1, 2); // 결과값: 3
sum(2, 3); // 결과값: 5

// (2)
function sum(x){
	return x + Math.random()
}

 

두 가지 경우를 살펴봤을 때, (1) 위의 코드처럼 같은 매개변수가 주어질 때 항상 같은 결과값을 반환하는 함수를 순수함수라고 한다. 반면에 (2) 아래의 코드처럼 같은 매개변수가 주어지더라도 다른 결과값이 반환될 수 있다면 비순수한 함수이며, 사이드 이펙트를 발생시킬 수 있다. React에서 함수형으로 컴포넌트를 렌더링할 때, 그 과정이 순수하게 유지되지 않으면 같은 state, props를 받더라도 다른 UI가 그려지게 된다. 이러한 이유로 사이드 이펙트의 발생을 최대한 지양하는 것이다.

(참고: https://velog.io/@saemileee/useEffect-%EC%9E%98%EC%93%B0%EA%B8%B0)