[2025 1학기 React.js 스터디] 정채은 #4주차

나 지다

1장 10~16

 

10. useRef 로 특정 DOM 선택하기 

 

ref 가 뭔가?

 

React에서 DOM요소나 클래스형 컴포넌트에 직접 접근할수 있게 도와주는 기능 ! 

즉, 포인터 같은 역할 

 

[useRef]

 

함수의 Hook 중 하나, 함수형 컴포넌트에서 사용되고 DOM 요소나 값을 저장할 때 사용됨.

렌더링 유발 X

 

Hook 이 먼지 몰랏다. 

Hook 이란.. 클래스형 컴포넌트에서만 사용되던 상태 관리와 라이프사이클 메서드를 함수형 컴포넌트에서 간단하게 사용하게 만든것.

 

대표 훅 들... useState(상태 관리), useEffect(사이드 이펙트 관리), useRef(DOM 접근), useContext(전역 상태 관리) 

 

★ 클래스형 컴포넌트 vs 함수형 컴포넌트

구분	클래스형 컴포넌트	함수형 컴포넌트
선언 방식	ES6 클래스 기반	함수 기반
상태 관리	this.state, this.setState()	useState
라이프사이클 관리	여러 메서드 (componentDidMount 들)	useEffect 하나로 관리
코드 복잡성	복잡, 길어짐	간결, 직관적
this 키워드 필요 여부	필요	불필요
성능	무거움	가벼움
최신 React 지원 여부	지원하지만 권장하지 않음	최신 React에서 권장하는 방식
주요 사용 상황	기존 코드 유지보수, 복잡한 상태 관리	대부분의 신규 프로젝트, 간단한 상태 관리

 

InputSample.js 에 추가하기 ! 

const nameInput = useRef();

useRef()를 사용하여 Ref 객체 만듦

nameInput.current.focus();

.current 값은 DOM 가리킴

ref={nameInput}

ref 에서 DOM 요소와 ref 객체를 연결함

 

11. 배열 렌더링하기

 

UserList.js

 

※ map() 함수

배열 각 요소를 일정한 로직에 따라 변환하여 새로운 배열 생성하는 함수

arr.map(i => ) 의 형태로 하위 컴포넌트에게 값전달

 

코드에 map() 함수 추가 → 에러 ! 

 

해결방법 : key(고유값)  라는 props 설정해줘야함 , 만약 고유한 값 X : index

각 고유 원소에 key 가 있어야 배열 렌더링 Goooood.

 

map 에서 key가 필요한 이유!!!

• Map에 key 값이없다면 중간의 값이 바뀌었을때 그 하위 값들이 전부 변하기 때문인다. key값을 사용한다면 key를 이용해 중간의 값을 추가하게 됨

 

12. useRef 로 컴포넌트 안의 변수만들기

 

위에 10에서 배웠는데요. useRef의 두가지 용도 중 남은 한가지 컴포넌트 안 변수 관리 용도입니다.

useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 X

 

13. 배열에 항목 추가하기

input 두개와 button 하나로 이루어진 CreateUser.js 라는 컴포넌트 만들기

 

상태관리를 CreateUser 에서 하지 않고 부모 컴포넌트인 App 에서 하게 하고, input 의 값 및 이벤트로 등록할 함수들을 props 로 넘겨받아서 사용

 

※배열 변화줄 때

불변성 지켜줘야함 →  배열의 push, splice, sort 등의 함수사용 X. 만약에 사용해야 한다면, 기존의 배열 복사 후 사용

 

불변성을 지키면서 배열에 새 항목을 추가하는 방법

1.  spread 연산자 사용

2. concat 함수 사용 : 기존 배열 수정 X , 새로운 원소가 추가된 새로운 배열 만듦

 

14. 배열에 항목 제거하기

이때도 불변성 유지 중요! 

 

배열 항목 제거 방법 3가지

1. filter() 함수 사용
   조건에 맞지 않는 요소를 걸러내어 새로운 배열 반환
2. splice() 함수 사용 (주의)
   배열 자체 직접 수정 (불변성 해침)
3. slice() 함수 사용
   부분 배열을 복사하여 새로운 배열 생성
   - 앞부분과 뒷부분 합쳐서 새로운 배열 생성
   - 불변성 유지하면서 특정 인덱스 제거

UserList 에서 각 User 컴포넌트를 보여줄 때, 삭제 버튼을 렌더링

 

15. 배열에 항목 수정하기

App 컴포넌트의 users 배열 안의 객체 안에  active  라는 속성을 추가

active 값에 따라 폰트의 색상 바꿔주고, cursor  필드를 설정하여 마우스를 올렸을때 커서가 손가락 모양 변하게 하기

onToggle  함수를 만들어서 UserList 컴포넌트에 작성

 

엥 왜 이미지 삭제가 안되는거지

 

UserList 컴포넌트에서  onToggle 를 받아와서 User 에게 전달해주고,  onRemove  를 구현했었던것처럼  onToggle  에  id  를 넣어서 호출함

 

16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기

 

useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법

 

- 마운트 / 언마운트

 

useEffect  사용시 첫번째 파라미터 : 함수, 두번째 파라미터 : 배열 (deps)

 

함수 반환 가능 → cleanup 함수 : deps가 비어있는 경우 컴포넌트가 사라질 때 호출됨

 

마운트

• props 로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청 (REST API 등)
• 라이브러리 사용 (D3, Video.js 등...)
• setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

언마운트

• setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

<deps에 특정 값 넣기>

 

특정값 넣으면, 컴포넌트가 처음 마운트 될때도 호출되고, 지정한 값이 바뀔때에도 호출됨.

 

useEffect 안에서 사용하는 상태나, props 가 있다면, useEffect 의 deps 에 넣어주어야 합니다.

 

<deps 파라미터를 생략하기>

 

생략하면, 컴포넌트가 리렌더링 될 때마다 호출됨. 

 

1. 화면이 처음 떴을때 실행.
   • deps에 [] 빈배열을 넣을 떄.
   • life cycle중 componentDidmount처럼 실행
2. 화면이 사라질때 실행(clean up함수).
   • componentWillUnmount처럼 실행
3. deps에 넣은 파라미터값이 업데이트 됬을때 실행.
   • componentDidUpdate처럼 실행.