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

소리 한 번 지르고 시작.....

---

useRef

-리액트는 DOM을 직접 조작하지 않고 가짜를 사용하는데, 직접 조작해야할 때가 생긴다 이때!! ueseRef를 사용

(DOM을 조작하거나 변하지 않는 데이터를 기억할 때 사용하는 훅)

(리액트 훅은 컴포넌트에서 상태관리 state나 생명주기 관리 useEffect를 가능하게 하는 함수들이라고 한다)

 

-내부적으로 저장만 하고 싶을 때 사용한다 (화면에 보여주고 싶을 땐 useState사용)

 

gpt가 도와준 실습 코드.. ㅎㅎ

요랬는데

버튼을 눌렀더니 요로케

-> 무엇을 알수 있는가?!

useRef로 연결된 HTML 태그는 .current를 통해 언제든지 직접 조작할 수 있다!!

만약 useState로 하면 상태를 바꾸고 나면 컴포넌트가 다시 렌더링 되지만 useRef는 몰래 돔만 조작한다

---

map()

-여러 데이터를 담은 배열을 map()로 반복해서 보여주는 것이 배열 렌더링

(배열.map()을 써서 항목을 JSX로 바꾼다고 한다)

(cf. 렌더링은 데이터를 눈에 보이는 화면으로 바꾸는 과정,, ㅎㅎㅎ)

 

-리액트는 내부적으로 항목을 구분하기 위해 key가 필요하다

항상 map안에서 각 요소에 꼬옥 넣어주기

 

회장님.. 요정도는 지피티가 도와줘도 돼져..?........

 

->animal.map(...) 을 사용해서 각 동물을 <li>태그로 만들어준당.

그리고 key={index}를 사용해서 항목마다 고유한 번호로 구분해주기

---

컴포넌트 안의 변수 만들기(w. useRef)

-useRef는 DOM 이외에도 사용이 가능한데, 리렌더링 없이도 값을 기억하고 저장하는 변수처럼 쓸 때!!! 사용 가능하다

((값이 바껴도 화면은 그대로 이기 때문에))

 

countRef는 0인데, 버튼을 누르면 countRef.current가 +1된다. 콘솔에는 누른 횟수가 뜨지만 화면에는 숫자가 보이지 X -> useRef는 값이 바뀌어도 화면을 다시 그리지 않으니까!!!

---

배열 항목 추가 삭제 수정

1. 추가

 

-spred 연산자

기존 배열을 펼처서 새로운 배열 생성

const oldFruits = ['🍎', '🍌'];
const newFruits = [...oldFruits, '🍇'];

포도를 붙여서 새 배열을 만들었다! 원본은 변하지 않는다

 

-conact 함수

배열을 이어붙여 새 배열을 리턴

const oldFruits = ['🍎', '🍌'];
const newFruits = oldFruits.concat('🍇');

포도를 붙여 새 배열을 리턴, 원본 배열은 그대로 유지된다

 

->두 방식은 원본배열을 바꾸지 않고 새 배열을 반환한다는 공통점이 있지만,

spread는 객체에서 사용가능하고 코드를 짧게 하고 싶을 때 사용하면 좋다 (conact는 객체에서 사용X)

 

2. 삭제

-onRemove

이건 보통 항목삭제를 처리하는 함수를 의미 (약속된 키워드는 아니라고 한다)

-> map()으로 반복 렌더링하고, 

filter()로 새 배열 만들고 setItems()로 업데이트 (항목삭제)

onClick={() => onRemove(item)} 실행 (삭제 버튼 클릭)

 

3. 수정

**자료 예제** 이름을 클릭하면 색이 변하도록 만들기

{
  id: 1,
  username: 'velopert',
  email: '...',
  active: true  // ✅ 이거!
}

-> 사용자 객체에 active 속성 추가하기

const onToggle = id => {
  setUsers(
    users.map(user =>
      user.id === id ? { ...user, active: !user.active } : user
    )
  );
};

-> map()으로 배열을 돌면서 해당 id의 유저만 active값을 반대로 바꿔주고 나머지는 그대로

<b
  onClick={() => onToggle(user.id)}
  style={{
    cursor: 'pointer',
    color: user.active ? 'green' : 'black'
  }}
>
  {user.username}
</b>

-> 이름을 클릭하면 onToggle(user.id) 실행. user.active가 true면 초록 아니면 검정

 

=> 핵심?!

map + 조건 + 상태 업데이트

---

useEffect

-컴포넌트가 화면에 나타나거나 바뀌거나 사라질 때 자동으로 하게 해준다

 

-일단일단, < 마운트: 처음 화면에 뜰 때

업데이트: 화면에 변화 있을 때

언마운트: 화면에서 사라질 때 > 부터 알고 시작하장 

 

- 기본구조라는데...

useEffect(() => {
  // 🟢 여기: 마운트 + 업데이트 때 실행됨

  return () => {
    // 🔴 여기: 언마운트 시 실행됨 (정리)
  };
}, [의존성]);

 

-예제

 

1. 마운트

useEffect(() => {
  console.log('화면에 컴포넌트가 나타났어요!');
}, []); // 빈 배열! → 처음 1번만 실행

 

 

-> 컴포넌트가 처음으로 화면에 나타날 때딱 한 번만 이 코드가 실행

 

 

2. 업데이트

useEffect(() => {
  console.log('카운트가 바뀜!');
}, [count]); // count가 바뀔 때만 실행됨

 -> count라는 값이 바뀔 때마다 이 코드가 실행, 이전 렌더링과 비교해서 count가 바뀌면 반응

 

 

3. 언마운트

useEffect(() => {
  const timer = setInterval(() => {
    console.log('1초마다 실행!');
  }, 1000);

  return () => {
    clearInterval(timer);  // 🔴 컴포넌트 사라질 때 타이머 멈춤
    console.log('화면에서 사라짐! 정리 완료');
  };
}, []);

 

-정리정리! 

useEffect(() => { }, []) : 처음 한 번만

useEffect(() => { }, [값]): 바뀔 때

return () => { ... }: 사라질 때 정리

 

---

끗... ㅜ