리액트4 [React] 콜백함수란? - 콜백함수란 다른 함수에 인자로 전달되어, 특정 시점에 호출되는 함수를 말한다.- 컴포넌트 안에서 특정 이벤트나 조건이 발생했을 때 실행되도록 전달되는 함수라고 하기도 한다. => 즉 콜백함수란 필요한 시점에 호출되는 함수이며 onClick, onChange 이벤트나 map(), filter()와 자주 사용된다. 1. 이벤트 핸들링에서 콜백함수function handleClick() { alert("버튼이 클릭되었습니다!");}function MyComponent() { return 클릭;}-> handleClick 함수는 onClick에 콜백으로 전달된 함수이다.-> 버튼이 클릭될때만 실행된다. 2. 이벤트에서 값을 받아 처리하는 콜백함수function handleChange(e) { conso.. 2025. 4. 5. [React] useState() 사용해서 카테고리 정렬하기(map, filter사용) 리액트에서 컴포넌트의 상태(state)를 관리할 수 있게 해주는 훅(Hook)이다. const [state, setState] = useState(initialValue);- state: 현재 상태값 (ex) 선택된 카테고리)- setState: 상태를 변경하는 함수, state는 setState를 통해서만 접근가능- initialValue: 처음에 상태가 어떤 값이어야 하는지(초기값) import { useState } from "react";function Counter() { const [count, setCount] = useState(0); // count의 초기값은 0 return ( 현재 숫자: {count} setCount(count + 1)}>증가 .. 2025. 4. 5. [React] filter()를 활용한 정렬하기 - filter()는 JavaScript의 표준 내장 객체이다.- 배열에서 조건에 맞는 요소만 걸러서 새로운 배열로 반환한다. -> React에서는 주로 카테고리, 검색어, 조건에 따라 보여줄 리스트를 걸러낼 때 사용한다.const newArray = array.filter((item) => { 조건식;});-> 조건식에 대한 조건을 만족하는 item만 newArray에 들어간다. 1. 숫자 배열에서 짝수 골라내기const numbers = [1, 2, 3, 4, 5, 6];const evenNumbers = numbers.filter((num) => num % 2 === 0);console.log(evenNumbers); // [2, 4, 6] 2. 특정 카테고리만 뽑기const restaurant.. 2025. 4. 5. [React] map()함수의 개념과 사용 인자로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 다라 변환한 후 새로운 배열이나 리스트를 생성 1. JavaScript에서const array = [1, 2, 3, 4];const newArray = array.map((item) => { return item * 2;});console.log(newArray); // [2, 4, 6, 8]- array = 원본배열- item = 현재요소=> array.map()은 배열의 각 요소에 함수를 적용해서 새 배열을 만들어준다. return한 값으로 새로운 배열이 만들어진다. 2. JSX에서-> React에서 map()을 쓰는 이유는 컴포넌트나 JSX요소를 반복해서 렌더링을 하기 위해서const numbers = [1, 2, 3];return .. 2025. 4. 5. 이전 1 다음
