frontend5 [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. [React] JSX 문법 - module.css 방법으로 style 적용 이는 컴포넌트 별로 별도의 module.css파일을 통해 독립된 스타일을 적용해주는 방법이다. 바로 예시를 통해 알아보자. -> 우선 별도의 css파일을 만들고 이 css를 적용할 컴포넌트 파일에 import를 해줘야한다.import styles from "파일명.module.css";- 위와 같이 작성해주면 되고 styles는 사실상 변수여서 아무 이름이나 해도 되지만 대부분의 사람들이 저렇게 작성하기 때문에 굳이 바꿀 필요도 없다.- 또한 파일명도 자신이 원하는 명을 적어주면 되는데 나는 보통 적용하려는 컴포넌트 파일의 명과 동일하게 작성하는 편이다. 1. 한개에 대해서 스타일 줄 때 restuarant_category에 대해서 style을 주고자 한다면 위와 같이 {styles.클래스명} 이렇게 작.. 2025. 4. 4. 이전 1 다음
