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

useRef로 특정 DOM 선택하기

이전에 만든 InputSample에서 초기화 버튼을 클릭했을 때 input에 포커스가 잡히도록 해보겠음.

 

코드 작성하고  브라우저에서 인풋에 값을 입력하고 초기화를 눌러보면

이름에 포커스가 잡히는 것을 확인해볼 수 있음 !!!!!!!!!!!!!!!!!!!!!!

 

 

배열 렌더링하기

반복되는 코드를 사용하는 것은 비효율적임.

효율적인 배열을 위해 동적인 배열을 렌더링할 때 쓰이는 map 함수와 각 원소마다 가지는 고유값으로 설정된 key를 사용하여 배열을 렌더링할 것임.

 

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

이번에는 App 컴포넌트에서 useRef를 사용하여 변수를 관리해볼 거임.

용도는 배열에 새 항목을 추가하고, 그 새 항복에서 사용할 고유 id를 관리하는 용도임.

 

 

useRef에서 파라미터를 넣어주면 .current 기본 값이 됨. 그리고 이 값을 수정하고 조회할 때에는 .current 값을 수정하고 조회하면 됨.

 

배열에 항목 추가/  삭제/  수정하기

• 항목 추가

배열에 항목을 추가할 때 push, splice, sort등의 함수는 사용해서는 안됨 >> 배열의 붊변성을 지켜주어야하기 때문!!

따라서 불변성을 지키면서 새 항목을 추가하는 방법은 spread 연산자를 이용하거나 concat 함수를 사용하는 법이 있음.

근데 나는 concat 함수를 사용해서 배열에 새 항목을 추가해보겠음.

 

 

 

추가된 걸 볼 수 있음

 

• 항목 삭제

 

삭제를 위해 UserList에 onRemove를 추가해주겠음. 얘가 삭제는데 킥임.

또한 앞서 강조한 불변성을 지키면서 제거하기 위해 filter 배열 내장함수를 사용해줄 거임.

 

삭제가 잘 됨!!

• 항목 수정

UserList에 계정명을 클릭했을때 색상이 빨간색으로 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현을 해볼.

우선, App 컴포넌트의 users 배열 안의 객체 안에 active 라는 속성을 추가해주고, onToggle이라는 함수도 구현해줄 거임.

 

 

 

 

 

 

 

 

가내수공업

 

 

 

 

 

건민아 구라안치고 지피티 안돌렷다

ㅇㅣ번에 지피티 돌렸냐고 물어보면 나 운다 🥺