5/21 TIL

📚 진행한 공부

• React 숙련 1주차 강의 완강

어제에 이어 오늘 드디어 숙련 1주차 강의를 끝까지 다 들었는데
내가 이해를 못하는 건지 아니면 원래 처음엔 다 어려운 건지 모르겠는데

Props Drilling부터 시작해서 useEffect, useRef, useContext

memoization, custom hooks, redux 전부 다 한 번에 이해되는 게 없었다..

안 까먹기 위해 useContext까지만 간단하게 정의를 적어보겠음

1. Props Drilling

Props Drilling 이란 props 를 하위 컴포넌트로 전달하는 과정에서 몇개의 컴포넌트를 뚫고 들어가는 형태를 의미

이러한 Props Drilling 은 그 양이 적다면 문제가 되지 않지만, 만약에 10개, 100개가 넘는 Props Drilling 이 일어난다면 그 props 를 추적하는데 어려움을 겪을 수 있다.

해결 방법

• 전역 상태관리 라이브러리 사용

• Redux, Jotai, Recoil 등을 사용하여 해당 값이 필요한 컴포넌트에서 직접 불러올 수 있다.

• Children 을 적극적으로 사용

2. useEffect

리액트에서 기본적으로 제공해주는 함수로써, useEffect함수가 포함된 컴포넌트가 처음 마운트되거나 컴포넌트가 리렌더링 될 때, 또는 선언된 변수의 값이 변경되거나 redux store의 값이 변경될 때 실행할 구문들을 정의해놓은 함수

특징

• useEffect에는 해당 컴포넌트가 언마운트될 때 실행되는 cleanup함수라는 기능이 있다. cleanup함수는 컴포넌트가 사라질 때 호출되는 부분으로 메모리누수를 방지하여 메모리 관리를 하거나 컴포넌트가 사라질 때, 수행할 작업들을 추가하기 위해 사용한다.

• Mounting : 컴포넌트가 최초로 나타낼 때를 뜻함
• Rendering : 컴포넌트가 마운트 된 후 컴포넌트가 호출 될 때를 뜻함
• UnMount : 컴포넌트가 사라질 때를 뜻함

쉽게 정리를 해보자면 컴포넌트가 처음 나타날 때 = 마운트, 그 이후에 값이 변경되어 컴포넌트가 변경된 상태에서 나타날 때 = 렌더링

3. useRef

1 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것

2. 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻함

Java Script를 사용할 때, 특정 DOM을 선택하기 위해서 getElementById 혹은 querySelector를 사용한다. 이와 같이 React에서 특정 DOM을 직접
선택하는 것이 가능하게 해주는 hook이 useRef 다.

4. useContext

일반적인 React 어플리케이션에서 데이터는 props를 통해서 부모에서 자식에게 전달 되지만, 어플리케이션 안의 여러 컴포넌트들에게 props를 전달해줘야 하는 경우 context를 이용하면 명시적으로 props를 넘겨주지 않아도 값을 공유할 수 있게 해주는 것

요약 => 데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context 를 이용해 공유

context API를 사용하기 위해서는 Provider , Consumer , createContext 이렇게 세가지 개념을 알고 있으면 된다.

createContext : context 객체를 생성
Provider : 생성한 context를 하위 컴포넌트에게 전달하는 역할
Consumer : context의 변화를 감시하는 컴포넌트