1 분 소요

JavaScript 심화 개념

고차 함수

특징

  • 함수를 인자로 받거나 결과로 반환하는 함수

filter()

목적

  • 삭제할 항목 제외한 새로운 배열 생성

기능

  • 배열을 순회하며 조건을 만족하는 요소만 반환
const updatedTodos = todos.filter((_, i) => i !== index);

map()

목적

  • 배열의 각 요소를 변환하여 새로운 배열을 반환

기능

  • 기존 배열을 변경하지 않고, 새로운 배열을 반환함
array.map((element, index, array) => {
  return 변환된요소;
});
  • element: 현재 처리 중인 요소
  • index: 현재 요소의 인덱스
  • array: 원본 배열(선택)
<ul>
  {todos.map((todo, index) => (
  {/* todos 배열을 순회하며 각 요소(todo)를 <li>로 생성, index를 key로 사용하여 식별 */}
    <li key={index}> {/* 각 할 일을 표시하는 리스트 항목 */}
      <button
        className={`checkButton ${todo.completed ? 'checked' : ''}`} // 완료 상태에 따라 클래스 설정
        onClick={() => toggleComplete(index)} // 완료 상태 변경 및 완료된 항목을 아래로 정렬
      ></button>
      <span className={todo.completed ? 'completed' : ''}>
        {todo.text} {/* 할 일 텍스트 */}
      </span>
      <button className="deleteButton" onClick={() => deleteTodo(index)}>
        x {/* 삭제 버튼 */}
      </button>
    </li>
  ))}
</ul>

이벤트 핸들러

  • 이벤트 리스너와 이벤트 핸들러는 비슷한 개념이지만 다른 개념
  • 리액트에서는 일반적으로 onClick, onChange 같은 속성을 사용하여 이벤트 핸들러를 직접 연결함

이벤트 리스너와의 차이

[이벤트 리스너]

기능

  • 특정 이벤트를 감지 하는 역할
  • 이벤트가 발생하면 이벤트 핸들러를 실행

목적

  • 브라우저에서 이벤트가 발생했는지 감시

[이벤트 핸들러]

기능

  • 이벤트가 발생했을 때 실제로 실행되는 함수 (콜백 함수)
  • 이벤트 리스너가 실행하는 함수이므로 단독으로 정의될 수 있음

목적

  • 이벤트 리스너가 감지한 이벤트를 처리

onChange

목적

  • 배열의 각 요소를 변환하여 새로운 배열을 반환

기능

  • 입력 값이 바뀔 때 마다 상태를 업데이트 함 
    <input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Add a new task"
/>

    input

구조 분해 할당

삼항 연산자

로컬 스토리지

Array spread Syntax

댓글남기기

참고