목요일 - 목표
📍미니 과제 제출하기
📍useRef
📍useContext
📍memoization
👀 과제 제출 완
어제는 오늘 댓글이라던가 포트폴리오 페이지 스타일링 등 더 다양하게 디자인 하려고 마음 먹었었는데, 오늘 오전이 되니까 내일만 리액트를 공부할 수 있는 시간이 주어진단걸 깨닫고 일단 마무리해서 제출했다. 건너뛴 다른 강의를 들으면서 적용해서 디벨롭 시켜봐야지
▶️ useRef
useRef란 레퍼런스에서 따온 말로 렌더링과 상관없이 특정값을 저장하는 훅이다.
useState와 차이점을 알아보기 위해 똑같이 누르면 +1이 되는 버튼을 만들고 차이점을 확인해보았다.
state 버튼은 누를때마다 1씩 바로 증가 되는데 보인다. 누를때마다 렌더링이 된다는 뜻인데 ref버튼은 아무리 눌러도 변화가 없다. 그치만 특정값은 계속 바뀌고 있었기 때문에 state 버튼을 누르면 state값이 1 증가하면서 동시에 바뀌고 있던 ref 값이 렌더링 되어 보여진다.
DOM 요소로도 접근할 수 있다. 아이디와 비밀번호를 넣을 수 있는 ref 속성을 가진 input태그를 각각 만든다.
더보기
++ ref속성을 가진 태그가 어떤 것들이 있는지 궁금해져서 지피티한테 물어봐서 가져와봤다.
1. HTML 태그
HTML 표준 태그는 대부분 ref 속성을 사용할 수 있습니다. 이를 통해 DOM 요소에 접근할 수 있습니다.
구조 및 컨테이너 태그
<div>: 기본 블록 컨테이너
<span>: 인라인 컨테이너
<header>: 페이지 헤더
<footer>: 페이지 푸터
<main>: 주요 콘텐츠 영역
<section>: 페이지의 구역
<article>: 독립적인 콘텐츠
<aside>: 보조 콘텐츠
<nav>: 내비게이션 컨테이너
텍스트 관련 태그
<h1>~<h6>: 제목 태그
<p>: 문단
<a>: 링크
<strong>: 강조된 텍스트
<em>: 기울임 텍스트
폼 관련 태그
ref를 활용하여 폼 요소에 직접 접근하여 값을 설정하거나 동작을 제어할 수 있습니다.
<form>: 폼 컨테이너
<input>: 텍스트, 체크박스, 라디오 버튼 등의 입력
<textarea>: 여러 줄 입력
<button>: 버튼 요소
<select>: 드롭다운
<option>: 드롭다운 항목
<label>: 폼 요소 레이블
<fieldset>: 폼 그룹화
미디어 태그
<img>: 이미지
<video>: 동영상
<audio>: 오디오
<canvas>: 캔버스
<iframe>: 외부 콘텐츠 임베딩
테이블 태그
<table>: 테이블 컨테이너
<thead>: 테이블 헤더
<tbody>: 테이블 본문
<tr>: 테이블 행
<td>: 테이블 데이터 셀
<th>: 테이블 헤더 셀
2. SVG 태그
SVG 태그도 ref를 통해 참조할 수 있습니다.
주요 SVG 태그
<svg>: SVG 컨테이너
<circle>: 원
<rect>: 사각형
<line>: 선
<path>: 경로
<polygon>: 다각형
<text>: SVG 텍스트
3. React 컴포넌트
기본 컴포넌트
React에서 기본 DOM 요소와 마찬가지로 React.Fragment, React.StrictMode 등 일부 특수 컴포넌트도 ref를 사용할 수 있습니다.
<React.Fragment>: 다중 요소를 묶는 컨테이너
<React.StrictMode>: 애플리케이션의 잠재적인 문제를 감지
<Suspense>: 동적 컴포넌트 로딩 시 대기 화면 처리
useRef를 사용하여 렌더링이 되었을 때 인풋필드가 포커싱이 되도록 만들 수 있다. 렌더링이 일어났을 때 처음만 포커싱이 되도록 useEffect에서 [] 빈배열을 활용해여 코드를 작성한다.
pwRef도 useRef로 선언해준다. 그리고 useState를 활용한다. 이벤트가 발생할때 호출되는 함수 수식을 쓰고 언제 발생될지 useEffect를 하나 더 작성한다. id의 길이가 10보다 작거나 같다면 비밀번호 input태그로 포커싱이 바뀐다. 마지막으로는 retrun에 ref와 value값, onChange를 써주어야 한다. 처음엔 아이디에만 value와 onChange를 넣어더니 오류가 났다. 다시 보니 비밀번호 input태그에도 ref값을 넣어서 먼저 선언한 pwRef와 연결해주어야 했던 것인데 안 써서 오류가 났던 것이다.
▶️ useContext
useContext의 필요성!
일반적으로 부모컴포넌트 → 자식 컴포넌트로 데이터를 전달해 줄 때 props를 사용하여 전달한다. 그런데 간단하게 전달할 때는 문제가 되지 않지만 깊이가 너무 깊어지면 prop drilling 현상이 일어난다. prop drilling 현상이 일어나면 오류가 났을 때 어디에서 오류가 났는지 파악이 어려워서 대처가 늦어질 수 밖에 없다.
-> 그래서 등장한 것이 바로 react context API. useContext hook을 통해 우리는 쉽게 전역 데이터를 관리할 수 있다.
할아버지 컴포넌트에서 자식 컴포넌트에게 전달하기 위해 아빠 컴포넌트도 거쳐서 props를 내려주고 있다. 지금은 단계가 적기 때문에 뭐가 문제지 할 수 있지만 이 단계가 많아지면 비효율적일 수밖에 없다.
FamilyContext.js 파일을 하나 만들어서 useContext를 활용하여 효율적으로 관리 수 있다.
할아버지 컴포넌트에서 <FamilyContext.Provider>를 통해 요소를 넣고 value 값도 작성해준다. 자식 컴포넌트에서는 바로 useContext 훅을 사용해서 값을 전달받을 수 있다. 그렇기 때문에 중간에 아빠 컴포넌트에는 전달받은 내용을 삭제해도 된다.
*주의점*
useContext를 사용할 때, Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 됩니다. 따라서 value 부분을 항상 신경써줘야 해요!
💭
hook 사용하는 것도 점점 재밌당