React 기초 그리고 입문2

리액트 강의를 보며 공부한 내용을 정리 및 작성한 글입니다.

 

1편: https://youngdev57.tistory.com/102

React 기초 그리고 입문

 

 

 

---

 

React Hooks

리액트 훅이란 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 하는 메소드이다.

(위의 useState(), useRef()도 리액트 훅이다.)

훅들의 특징은 use 라는 접두사가 붙는다. (예를 들어 useEffect(), useReducer() 등)

조건문과 반복문 내부에서는 훅을 호출할 수 없으며, 다양한 커스텀 hook도 생성할 수 있다. (당연히 이름 앞에 use를 붙여야 한다.)

또한 리액트 훅은 무조건 함수 컴포넌트 내부에서만 호출해야 한다.

보통 src/hooks 처럼 컴포넌트 디렉토리와 분리한다.

 

---

useRef()

useRef()는 새로운 Reference 객체를 생성하는 기능이다.

useState()와 다른 점은, 값이 변경되면 리렌더링이 일어난다는 점이다. (= useRef()는 리렌더링을 유발하지 않는다.)

 

굳이 전역변수가 아닌 useRef(), useState()를 사용하는 이유는 뭘까?

useRef(), useState() 변수는 사용하면 컴포넌트가 리렌더링 되어도 변수의 값이 리셋되지 않는다.

그렇기에 만약 변수를 전역 선언하여 사용하게 되면, 컴포넌트가 여러 개일 때 변수의 값을 공유하게 돼서 데이터가 변형될 가능성이 있다.

 

---

리액트의 Life Cycle와 useEffect()

Vue와 다르게 리액트의 생명주기는 정의된 메소드를 사용하는 게 아닌 직접 구현하여야 한다.

useEffect()는 리액트 컴포넌트의 사이드 이펙트를 제어하는 리액트 훅이다.

아래 내용은 리액트의 useEffect() 훅을 이용하여 라이프사이클을 손쉽게 제어하는 예제이다.

 

Mount

컴포넌트가 탄생하는 순간, 즉 화면에 처음 렌더링되는 순간을 캐치한다.

서버에서 데이터를 불러오는 작업 등에 활용한다.

// mount는 deps를 빈 배열로 선언한다.
useEffect(() => {

}, []);

 

Update

컴포넌트에 리렌더링이 발생하는 순간을 캐치한다.

값 변경에 따른 추가적인 작업이 이뤄지거나, 변경된 값을 console에 출력하고자 할 때 활용된다.

// update는 deps를 생략한다.
useEffect(() => {
  console.log("update");
});

 

UnMount

컴포넌트가 렌더링에서 제외되는, 즉 화면에서 사라지는 순간을 캐치한다.

컴포넌트가 사용하고 있던 메모리를 정리하거나, 이벤트 핸들러 등을 제거할 때 활용할 수 있다.

useEffect(() => {
  // cleanup, 정리 함수: useEffect()가 끝날 때 실행된다.
  return () => {
    console.log("unmount");
  };
}, []);

 

---

useReducer()

useReducer()는 상태를 변화시키는 기능을 가지고 있다.

컴포넌트 내부에 새로운 state를 생성하는 리액트 훅이며, 모든 useState()는 useReducer()로 대체할 수 있다.

또한 useReducer()로 만든 상태 관리 코드를 컴포넌트 외부로 분리할 수 있다는 차이점이 있다.

 

---

useMemo()

최적화 기법에 이용되는 리액트 훅이다. *최적화란, 웹 서비스의 성능을 개선하기 위한 모든 행위를 뜻한다.

useMemo()는 불필요한 연산을 방지하며, 메모이제이션 기법 기반의 최적화 방법이다.