[Day50] useState, 고차함수

🔸 goTrip 실습 - React

디자이너와 와이어프레임으로 의견을 나눌 때 부터 개발해야하는 기능을 요약해두는게 좋음

goTrip 기능 요약

• 사용자가 입력 필드에 텍스트를 입력하면 상태에 저장됨
• 입력된 텍스트가 없거나 2글자 이하일 경우 경고 메시지 표시
• 유효성 검사를 통과한 텍스트는 새로운 항목으로 리스트에 추가됨
• 사용자가 엔터키를 누르거나 ADD 버튼을 클릭하면 항목 추가 기능 실행

---

useState와 상태 불변성

const changeText = () => {
  setData(prev => [...prev, 'test'])

  setAge(prev => prev + num) // ✅ 이전 값을 기반으로 업데이트
  setAge(age + num)          // ⚠️ 업데이트가 비동기라 예측 불가
}

작동 방식

• prev: 이전 데이터 상태
• [...prev, 'test']: 기존 데이터를 복제 후 새로운 값 추가
• setData(…) : 상태 업데이트 → 컴포넌트 재렌더링
• ❗️ 초기 상태(기존 배열)는 직접 변경하면 안 됨 → 불변성 유지 필수!

---

🚕 InputFild 컴포넌트

유효성 검사 리팩토링 (삼항 연산자 사용)

기존 코드 조건문

if (inputText.trim() === '') {
  alert('여행지를 입력하세요')
  document.querySelector('input').focus()
  return
} else if (inputText.trim().length < 2) {
  alert('2자 이상로 입력하세요')
  document.querySelector('input').focus()
  return
}

➡ 이걸 삼항 연산자로 리팩토링

if (inputText.trim().length < 2) {
  alert(inputText.trim() === '' ? '여행지를 입력하세요' : '2자 이상으로 입력하세요');
  document.querySelector('input').focus();
  return;
}

input과 label을 같이 사용하기도 함

input과 label을 함께 사용하면 접근성과 UX가 향상됨. label의 htmlFor는 input의 id와 연결됨

<div className="inputFild mw">
  <label htmlFor="fild">여행지 입력</label>
  <input
    placeholder="여행지를 입력하세요"
    type="text"
    id="fild"
    onChange={inputItem}
  />
  <button onClick={addItem}>입력</button>
</div>

• 사용자가 label 클릭해도 input에 포커스가 감
• 시각장애인용 스크린리더에 적절히 인식됨

InputFild.jsx 전체 코드

import React, { useState } from 'react'

const InputFild = ({ setData }) => {
  const [inputText, setInputText] = useState('');

  // 입력값을 상태에 실시간 반영
  const inputItem = e => {
    setInputText(e.target.value)
  }

  const addItem = () => {
    // 입력값 유효성 검사
    if (inputText.trim().length < 2) {
      alert(inputText.trim() === '' ? '여행지를 입력하세요' : '2자 이상로 입력하세요')
      document.querySelector('input').focus() // 포커스를 다시 input에 줌
      return
    }
    setData(prev => [inputText, ...prev]) // 기존 리스트 앞에 추가해서 새로운 배열로 반환
    setInputText('')
    document.querySelector('input').focus()
  }

  const handleKeyup = e => {
    if (e.key === 'Enter') addItem()
  }

  return (
    <div className="inputFild mw">
      <input
        type="text"
        placeholder="여행지를 입력하세요"
        value={inputText}
        onChange={inputItem}
        onKeyUp={handleKeyup}
      />
      <button onClick={addItem}>입력</button>
    </div>
  )
}

export default InputFild

🔑 onKeyDown vs onKeyUp

이벤트	발생 시점	특징
onKeyDown	키를 눌렀을 때	- 가장 먼저 발생 - 꾹 누르고 있으면 반복 발생
onKeyUp	키를 뗐을 때	- 한 번만 발생 - 누르고 있는 동안은 안 발생

---

🚕 삭제 기능

리스트에서 특정 항목 삭제 시 filter()를 활용

setData(prev => prev.filter(item => item !== area))

🛑 내가 계속 에러가 뜬 코드

setData(prev => {
    prev.filter(item => item !== area)
})

• 이 코드는 새로운 상태값을 리턴하지 않음.
• setData의 인자로 전달된 함수는 새로운 상태값을 리턴해야 하는데, filter 결과를 반환하지 않고 끝남 → undefined 리턴됨.
• 따라서 setData(undefined)가 호출돼서 비정상 동작

✅ 올바른 방식

setData(prev => {
    return prev.filter(item => item !== area)
})

// 또는
setData(prev => prev.filter(item => item !== area))

전체 코드 (src/components/List.jsx)

import React from 'react'

const List = ({ area, setData }) => {
  const removeItem = () => {
    setData(prev => {
      const newData = prev.filter(item => item !== area)
      localStorage.setItem('trip', JSON.stringify(newData))
      return newData
    })
  }
  return (
    <li>
      <p>{area}</p>
      <i className="fa-solid fa-trash-can" onClick={removeItem}></i>
    </li>
  )
}

export default List

---

✅ localstorage

• setItem : 값 저장 (JSON 문자열로 변환해서 저장)
• getItem : 값 읽기 (파싱해서 사용)

추가할 때

setData(prev => {
  const newData = [...prev, inputText]
  localStorage.setItem('trip', JSON.stringify(newData))
  return newData
})

삭제할 때

setData(prev => {
  const newData = prev.filter(item => item !== area)
  localStorage.setItem('trip', JSON.stringify(newData))
  return newData
})

불러올 때

const list = JSON.parse(localStorage.getItem('trip')) || []

---

로렘 픽숨 (Lorem Picsum)

랜덤 이미지 생성 url Lorem Picsum

랜덤 이미지 url 가져와서 사용하면 됨 !

---

CSS Modules

• CSS 모듈을 사용하면 컴포넌트 단위로 스타일을 캡슐화할 수 있음
• 클래스 이름이 자동으로 고유하게 만들어지기 때문에 충돌 걱정 없이 재사용 가능
• 파일명을 [컴포넌트이름].module.css 형식으로 저장하고 사용

sample.module.css

.imgCon {
  border: 1px solid red;
  width: 200px;
  height: 200px;
  margin: 1rem;
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
} 

.imgCon > * {
  position: absolute;
}

.imgCon img {
  opacity: 0.5;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

jsx파일에 적용 - App.jsx

import css from './sample.module.css'

<div className={css.imgCon}>
  <p>{userInfo.artwork.title}</p>
  <p>{userInfo.artwork.artist}</p>
  <img src={userInfo.artwork.imgUrl} alt={userInfo.artwork.title} />
</div>

전역 CSS와 함께 쓰기

<div className={`${css.imgCon} mw`}>

• css.imgCon: CSS Module로 불러온 클래스
• mw: 전역으로 선언한 클래스 (max-width 등)

CSS Modules 사용 이유

• 컴포넌트마다 고유한 클래스 이름이 자동으로 생성됨
  • 예: imgCon → InputFild_imgCon__3h9Ks처럼 변경
• 같은 이름을 다른 컴포넌트에서 써도 충돌 없음
• 글로벌 스타일이나 Styled-components처럼 별도 설정이 필요 없음

어떤 스타일 방법을 선택할까?

방법	특징 및 추천 상황
전역 CSS	앱 전체에 적용되는 리셋, 폰트, 색상 등 공통 스타일용
CSS Modules	컴포넌트별 스타일링이 필요하지만 별도 라이브러리 없이 사용하고 싶을 때
Styled-components	동적 스타일링이 많거나 컴포넌트와 스타일을 밀접하게 연결하고 싶을 때

실습 화면

이미지 hover시, 제목, 아티스트명 나옴

---

🔸 useState

• useState는 컴포넌트에 상태를 추가하는 Hook
• 화면에 보여주는 데이터를 저장하고 변경할 수 있게 해주는 기능

기본 사용법

const [state, setState] = useState(초기값);

• state: 현재 상태 값
• setState: 상태를 업데이트하는 함수
• 초기값: 처음 렌더링 시 사용할 값

핵심 특징

1. 상태 업데이트

상태를 업데이트하면 컴포넌트가 자동으로 다시 렌더링된다.

setState(새로운값); // 직접 값 전달
setState(prevState => prevState + 1); // 이전 상태 기반 업데이트

function 상품카드() {
  const [수량, 수량변경] = useState(1);
  
  return (
    <div>
      <p>선택 수량: {수량}개</p>
      <button onClick={() => 수량변경(수량 + 1)}>추가</button>
      <button onClick={() => 수량변경(수량 - 1)}>감소</button>
    </div>
  );
}

2. 중요한 규칙

• Hook은 컴포넌트 최상위 레벨에서만 호출
• 조건문, 반복문, 이벤트 핸들러 안에서 직접 호출 X
• 대신, 이벤트 핸들러에서는 콜백 안에서 setState는 호출 가능

// ❌ 잘못된 사용
if (조건) {
  const [x, setX] = useState(0);
}

// ✅ 올바른 사용
const [x, setX] = useState(0);
if (조건) {
  setX(5);
}

3. 객체와 배열 상태

상태로 객체나 배열을 다룰 때는 불변성(immutability) 을 지켜야 한다.
즉, 기존 값을 직접 수정하지 말고, 복사 후 변경하는 방식으로 업데이트해야 함

// ❌ 잘못된 방법 (직접 수정)
form.name = '김철수';

// ✅ 올바른 방법 (복사 후 변경)
setForm({ ...form, name: '김철수' });

// ✅ 배열에 항목 추가
setItems([...items, 새항목]);

// ✅ 배열에서 항목 제거
setItems(items.filter(item => item.id !== 삭제할ID));

예제: 회원가입 폼

function 회원가입폼() {
  const [회원정보, 회원정보변경] = useState({
    아이디: '',
    비밀번호: '',
    이메일: '',
    전화번호: ''
  });
  
  const 입력변경 = (e) => {
    // 기존 객체 복사 후 특정 속성만 변경
    회원정보변경({
      ...회원정보,
      [e.target.name]: e.target.value
    });
  };
  
  return (
    <form>
      <input 
        name="아이디" 
        value={회원정보.아이디} 
        onChange={입력변경} 
      />
      <input 
        name="이메일" 
        value={회원정보.이메일} 
        onChange={입력변경} 
      />
    </form>
  );
}

5. 상태 업데이트 특성

1. 비동기적

   setCount(count + 1);
   console.log(count); // 바로 반영되지 않음
   

   setState 호출 직후 상태가 즉시 변경되는게 아니라, 다음 렌더링 때 적용돼.

2. 일괄 처리(Batching) React는 여러 상태 업데이트를 한 번에 처리함. 그래서 여러 번 연속 호출해도 최신 상태를 기준으로 동작하지 않을 수 있음.

3. 이전 상태 기반 업데이트 이전 상태를 기반으로 업데이트할 때는 함수 형태를 사용

   setCount(prev => prev + 1);
   

---

자주 하는 실수

1. 상태 업데이트 후 이전 값 출력

function 클릭핸들러() {
  set개수(개수 + 1);
  console.log(개수); // 여전히 이전 값 출력
}

-> 상태 업데이트는 비동기적으로 처리되어 즉시 반영되지 않음

2. 객체/배열 변경이 화면에 반영되지 않음

// 잘못된 방법
const 항목들 = [...할일목록];
항목들[0].완료 = true;
set할일목록(항목들); // 참조가 같아 변경 감지 안됨 -> 객체 타입

// 올바른 방법
set할일목록(이전목록 =>
  이전목록.map((항목, 인덱스) =>
    인덱스 === 0 ? {...항목, 완료: true} : 항목
  )
);

3. “Too many re-renders” 오류

// 잘못된 방법
return <button onClick={핸들러()}>클릭</button> // ❌

// 올바른 방법
return <button onClick={핸들러}>클릭</button> // ✅
return <button onClick={() => 핸들러()}>클릭</button> // ✅

---

유용 tip

초기 상태를 계산하는 함수 사용

무거운 계산이 필요한 초기값은 함수로 전달하면 첫 렌더링에만 실행됩니다.

// 매 렌더링마다 실행 (비효율적)
const [items, setItems] = useState(createExpensiveList()); // ❌

// 초기화 시에만 한 번 실행 (효율적)
const [items, setItems] = useState(() => createExpensiveList()); // ✅

key를 사용한 상태 초기화

컴포넌트에 다른 key를 전달하면 React는 컴포넌트를 새로 생성하고 상태를 초기화합니다.

function 앱() {
  const [사용자ID, 사용자ID변경] = useState(1);
  
  return (
    <>
      <button onClick={() => 사용자ID변경(사용자ID + 1)}>
        다음 사용자
      </button>
      <프로필 key={사용자ID} /> {/* key가 변경되면 상태 초기화 */}
    </>
  );
}

---

🔸 배열과 함께 사용하는 고차함수

고차함수(Higher Order Functions)는 다른 함수를 인자로 받거나 함수를 반환하는 함수

1. map() - 배열의 모든 요소를 변환하여 새 배열 반환

// 숫자 배열의 각 요소를 2배로 만들기
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// 객체 배열에서 특정 속성만 추출하기
const users = [
  { id: 1, name: '김철수', age: 25 },
  { id: 2, name: '이영희', age: 30 },
  { id: 3, name: '박민수', age: 28 }
];
const names = users.map(user => user.name);
console.log(names); // ['김철수', '이영희', '박민수']

2. filter() - 조건에 맞는 요소만 포함하는 새 배열 반환

// 짝수만 필터링하기
const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4, 6]

// 특정 나이 이상인 사용자만 필터링하기
const users = [
  { name: '김철수', age: 25 },
  { name: '이영희', age: 30 },
  { name: '박민수', age: 18 }
];
const adults = users.filter(user => user.age >= 20);
console.log(adults); // [{ name: '김철수', age: 25 }, { name: '이영희', age: 30 }]

3. reduce() - 배열의 요소를 하나의 값으로 줄이기

// 배열 요소의 합계 구하기
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 15

// 객체 배열의 특정 속성 합계 구하기
const cart = [
  { item: '노트북', price: 1200000 },
  { item: '마우스', price: 35000 },
  { item: '키보드', price: 45000 }
];
const totalPrice = cart.reduce((total, product) => total + product.price, 0);
console.log(totalPrice); // 1280000

4. forEach() - 배열의 각 요소에 대해 함수 실행

// 배열의 각 요소 출력하기
const fruits = ['사과', '바나나', '오렌지'];
fruits.forEach(fruit => console.log(fruit));
// 사과
// 바나나
// 오렌지

// 배열 요소의 합계 계산하기 (부수 효과 사용)
let total = 0;
[1, 2, 3, 4].forEach(num => {
  total += num;
});
console.log(total); // 10

5. find() - 조건을 만족하는 첫 번째 요소 반환

// 특정 ID를 가진 사용자 찾기
const users = [
  { id: 1, name: '김철수' },
  { id: 2, name: '이영희' },
  { id: 3, name: '박민수' }
];
const user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: '이영희' }

6. some() - 하나라도 조건을 만족하면 true 반환

// 배열에 음수가 있는지 확인
const numbers = [1, 2, 3, -1, 4];
const hasNegative = numbers.some(num => num < 0);
console.log(hasNegative); // true

7. every() - 모든 요소가 조건을 만족하면 true 반환

// 모든 사용자가 성인인지 확인
const users = [
  { name: '김철수', age: 25 },
  { name: '이영희', age: 30 },
  { name: '박민수', age: 18 }
];
const allAdults = users.every(user => user.age >= 20);
console.log(allAdults); // false

8. flatMap() - map() 후 결과를 1레벨 평탄화

// 문장을 단어 배열로 변환
const sentences = ['Hello world', 'I love JavaScript'];
const words = sentences.flatMap(sentence => sentence.split(' '));
console.log(words); // ['Hello', 'world', 'I', 'love', 'JavaScript']

9. sort() - 배열 요소 정렬

const numbers = [3, 1, 4, 1, 5];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 1, 3, 4, 5]

// 객체 배열 정렬
const users = [
  { name: '김철수', age: 25 },
  { name: '이영희', age: 30 },
  { name: '박민수', age: 18 }
];
users.sort((a, b) => a.age - b.age);
console.log(users); // 나이순으로 정렬됨

10. findIndex() - 조건을 만족하는 첫 번째 요소의 인덱스 반환

const fruits = ['사과', '바나나', '오렌지', '포도'];
const index = fruits.findIndex(fruit => fruit === '오렌지');
console.log(index); // 2

11. flat() - 중첩 배열을 평탄화

const nestedArray = [1, [2, 3], [4, [5, 6]]];
const flattened = nestedArray.flat(2); // 깊이 2까지 평탄화
console.log(flattened); // [1, 2, 3, 4, 5, 6]

12. reduceRight() - 오른쪽에서 왼쪽으로 reduce 실행

const array = ['a', 'b', 'c', 'd'];
const result = array.reduceRight((acc, curr) => acc + curr);
console.log(result); // 'dcba'

13. at() - 양수 또는 음수 인덱스로 요소에 접근 (ES2022)

const array = [5, 12, 8, 130, 44];
console.log(array.at(2)); // 8
console.log(array.at(-1)); // 44 (마지막 요소)

14. Array.from() - 유사 배열 객체나 이터러블을 배열로 변환

// 문자열의 각 문자를 배열로 변환
console.log(Array.from('hello')); // ['h', 'e', 'l', 'l', 'o']

// 매핑 함수 사용 (두 번째 인자)
console.log(Array.from([1, 2, 3], x => x * 2)); // [2, 4, 6]

15. Array.of() - 주어진 인자로 새 배열 생성

console.log(Array.of(1, 2, 3)); // [1, 2, 3]
console.log(Array.of('a', 'b', 'c')); // ['a', 'b', 'c']

16. entries(), keys(), values() - 배열의 반복자 메서드

const array = ['a', 'b', 'c'];

// entries() - [인덱스, 값] 쌍의 반복자 반환
for (const [index, element] of array.entries()) {
  console.log(index, element);
}

// keys() - 인덱스 반환
for (const index of array.keys()) {
  console.log(index);
}

// values() - 값 반환
for (const element of array.values()) {
  console.log(element);
}

---

🔸 복습

✅ array, object state 변경 시 주의사항

💡 React에서 배열과 객체는 불변성을 지키며 상태를 업데이트해야 함 (원본 직접 수정 ❌)

배열(Array) 상태 변경

const addTodo = (newTodo) => {
  setTodos([...todos, newTodo]);
  // 스프레드 연산자(...)로 기존 배열을 복사하고 새 항목 추가
};

// 2. 배열에서 항목 제거하기
const removeTodo = (index) => {
  setTodos(todos.filter((_, i) => i !== index));
  // filter로 해당 인덱스를 제외한 새 배열 생성
};

// 3. 배열의 특정 항목 수정하기
const updateTodo = (index, newText) => {
  setTodos(todos.map((todo, i) => i === index ? newText : todo));
  // map으로 특정 인덱스의 항목만 새 값으로 변경
};

객체(Object) 상태 변경

const [user, setUser] = useState({
  name: '홍길동',
  age: 30,
  email: 'hong@example.com'
});

// 1. 객체의 특정 속성 변경하기
const updateEmail = (newEmail) => {
  setUser({
    ...user,  // 기존 객체의 모든 속성을 복사
    email: newEmail  // 변경할 속성만 덮어쓰기
  });
};

// 2. 중첩된 객체 속성 변경하기
const [product, setProduct] = useState({
  name: '노트북',
  specs: {
    cpu: 'i7',
    ram: '16GB',
    storage: '512GB'
  }
});

const upgradeRam = (newRam) => {
  setProduct({
    ...product,
    specs: {
      ...product.specs,  // 중첩 객체도 복사
      ram: newRam  // 변경할 속성만 덮어쓰기
    }
  });
};

배열 속 객체 변경하기

const [students, setStudents] = useState([
  { id: 1, name: '김철수', grade: 'A' },
  { id: 2, name: '이영희', grade: 'B' },
  { id: 3, name: '박민수', grade: 'C' }
]);

// 특정 학생의 성적 변경하기
const updateGrade = (id, newGrade) => {
  setStudents(
    students.map(student =>
      student.id === id
        ? { ...student, grade: newGrade }
        : student
    )
  );
};

• 불변성을 지키면 React가 변경 사항을 감지하고 효율적으로 렌더링함
• 중첩 구조가 복잡해지면 immer 같은 라이브러리 추천

✅ Props 전송

기본 개념

• Props는 부모 → 자식으로 데이터 전달 방식
• 마치 함수의 인자처럼 작동하며 읽기 전용

기본 전달 예시

// 부모 컴포넌트
function ParentComponent() {
  const userName = "홍길동";
  const userAge = 30;

  return (
    <ChildComponent name={userName} age={userAge} />
  );
  }

// 자식 컴포넌트
function ChildComponent(props) {
  return (
    <div>
      <h2>이름: {props.name}</h2>
      <p>나이: {props.age}세</p>
    </div>
  );
}

Props 전송 패턴

1. 구조 분해 할당

// 더 깔끔한 구조 분해 할당 방식
function ProfileCard({ name, age, isVerified = false }) {
return (
  <div className="profile-card">
    <h2>{name} {isVerified && '✓'}</h2>
    <p>나이: {age}세</p>
  </div>
);
}

2. children prop 활용

function Card({ title, children }) {
  return (
    <div className="card">
      <h2 className="card-title">{title}</h2>
      <div className="card-content">
        {children}
      </div>
    </div>
  );
}

// 사용 예시
function App() {
  return (
    <Card title="회원 정보">
      <p>이 카드에는 어떤 내용이든 넣을 수 있습니다.</p>
      <button>수정하기</button>
    </Card>
  );
}

3. 객체 형태로 props 전달

function UserProfile() {
  const userDetails = {
    name: "김철수",
    age: 28,
    email: "kim@example.com",
    role: "개발자"
  };

  return <ProfileDetails {...userDetails} />;
}

function ProfileDetails({ name, age, email, role }) {
  return (
    <div className="profile">
      <h2>{name}</h2>
      <ul>
        <li>나이: {age}</li>
        <li>이메일: {email}</li>
        <li>직업: {role}</li>
      </ul>
    </div>
  );
}

내용을 좀 더 구체적으로 알고 싶어서 자세한 props에 대해서는 따로 포스팅했다 !
[CS] Props?

---

공부 방법
- useEffect : 영문 버전 docs 보면서 공부하면 좋음
- 성능 향상에 필요한 훅 : useCallback, useMemo

참고 docs
[모던 JS 튜토리얼 - 코어 자바스크립트](https://ko.javascript.info/)
또는
모던 자바스크립트 책 열번보기 ~

---

🔸 의문점: setCount(count + 1)는 불변성을 지키는가?

Q.

useState에서 setCount(count + 1)와 같은 방식은 직접 값을 변경하는 것처럼 보이는데, 이처럼 직접 값 변경이 허용되는 경우와 불변성을 반드시 지켜야 하는 경우의 차이점은?

---

✅ A.

요점을 먼저 말씀드리면 불변성을 깨는 모든 업데이트는 지양합니다. 겉보기엔 count를 직접 수정하는 것처럼 보여도, 실제로는 새로운 값을 만들어서 React에게 전달하는 것이기 때문에 불변성을 지킵니다.

핵심 개념 요약

• count + 1은 새로운 숫자 값을 계산합니다 (원시 타입 → 값 자체 복사됨)
• setCount()는 이 새 값을 React에게 전달하여 상태를 업데이트하도록 요청합니다
• React는 내부적으로 이전 값과 비교 후, 필요 시 리렌더링

숫자, 문자열, boolean과 같은 원시 타입(primitive types)은 값 자체가 저장되므로, 새 값을 계산할 때 자동으로 불변성이 유지됩니다.

🔎 원시 타입 vs 참조 타입 차이

타입	불변성 유지 여부	예시
원시 타입	자동 유지	setCount(count + 1)
참조 타입	직접 유지 필요	setUser({ ...user, name: '홍길동' })

• 원시 타입: 숫자, 문자열, boolean → 값을 바로 수정해도 자동 불변성 유지
• 참조 타입: 객체, 배열 → 직접 복사(...) 후 수정해야 안전

---

END