[2025 1학기 React.js 스터디] 강민지 #4주차

1. useRef 기능 (1)

: ref를 사용하여 특정 DOM 선택하기 !

EX) 초기화 버튼 누르고 난 후, 커서가 이름 입력칸으로 포커스 되도록 기능 구현

 

Ref 객체 만들기 -> 원하는 DOM에 ref값 설정 -> 실행 순서!!

 

2. 배열 렌더링하기

 # 고정적인 배열 렌더링

배열의 인덱스 하나하나 조회

 

 # 동적인 배열 렌더링

 

-> map() 함수 사용 !

++++++++++

key(고유 식별값) props 설정

 

이렇게~```

 

만약 고유값이 없다면, index를 key로 사용 !

 

수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하기 때문에

key 는 꼭꼭 필요하다 !!!

 

3. useRef 기능 (2)

 : 변수를 관리 & 설정 후 바로 조회 O

/

값이 바뀌어도 컴포넌트가 리렌더링 되지 않음

 

EX) 배열에 새 항목을 추가할 때, 새 항목에서 사용할 고유 id 관리

->

nextId 변수

 

실습 이미지

● useRef(기본값)

● .current : 값 조회

● .current = 10 : 값 수정

 

4. 배열에 항목 추가하기

**불변성 지키기**

 

(1) spread 연산자 사용(...배열이름)

EX) ...inputs

 

(2) concat 함수 사용 (배열이름.concat(이어붙이고 싶은 배열))

EX) setUsers(users.concat(user))

 

5. 배열에 항목 삭제하기

 

**마찬가지로 불변성 지키기**

 

=>> onRemove 함수 구현

 

● 지울 id 받기

● 지울 id가 아닌 것들 모아서 새로 목록 만듬 (filter)

 

 

6. 배열에 항목 수정하기

EX) 계정명 클릭했을때 색상 바뀌게

(1) active 속성 추가

App.js

(2) UserList 컴포넌트 안에 style cursor: 'pointer' 추가

 

(3) onToggle 함수 구현 - 사용자의 id를 받아 active 값 반전시키기

App.js

●  map 함수 : 배열의 불변성 유지 & 배열을 업데이트

● user.id가 전달받은 id와 같으면, 해당 사용자의 active 값 반전시킴

● 다르면, 해당 사용자는 그대로 둠

 

=>

 

UserList 컴포넌트에 onToggle 전달

 

7. 마운트 / 언마운트

 

● 마운트 => 컴포넌트가 처음 DOM에 나타날 때

 

props로 받은 값 저장

인터넷에 정보 요청

라이브러리 사용

setInterval (반복작업) 또는 setTimeout (작업예약)

...

이런 일들을 한다

 

● 언마운트 => 컴포넌트가 DOM에서 사라질 때

 

setInterval, setTimeout 멈추기 (clearInterval, clearTimeout)

라이브러리 정리하기

....

 

 

함수 useEffect 사용 !

첫번째 파라미터에는 함수, 두번째 파라미터에는 배열 (deps) 넣기

 

만약, 위 사진처럼 빈 배열 [ ] 을 넣으면

마운트 시 한 번만 실행됨

 

and

cleanup 함수 호출됨 (= useEffect 뒷정리)

 

이 배열(deps)안에 특정 값을 넣으면 마운트가 될 때, 값이 바뀔 때 실행됨

생략하면 화면이 바뀔 때마다 계속 실행됨

 

그래서 특정 값을 넣는 것이 기본! 이라고 합니다 ~

 

 

 

오랜만이라 이전 내용 기억이 안 나서 계속 찾아봣다는,, 수고하셧습니다