Study/React, JS
-
map(), 맵 함수Study/React, JS 2023. 10. 9. 23:18
배열의 각 요소에 대해 특정 작업을 수행하고 그 결과를 새로운 배열로 반환함 특징 = 배열 순회, 매핑함수 적용, 원래 배열은 변동 x 매핑함수 적용 : 사용자가 정의한 함수를 각 요소에 적용. 이 함수는 각 요소를 매개변수로 받아서 작업 수행 및 반환 const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map((number) => { return number * 2; }); // doubledNumbers에는 [2, 4, 6, 8, 10]
-
Props (Properties)Study/React, JS 2023. 10. 9. 23:15
컴포넌트 간에 값을 전달할때 사용됨 특징은 읽기 전용으로 전달되며, 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할때 사용한다. 문자열, 숫자, 객체, 함수 등 모든 형태의 데이터를 넘겨줄 수 있다. // 상위 컴포넌트 A.js const A = () => { const data = [1, 2, 3, 4, 5]; return( ); }; export default A; // 하위 컴포넌트 B.js. 함수형 컴포넌트 const B = (props) => { return( const datas = props.datas; ); }; // 하위 컴포넌트 C.js. 클래스형 컴포넌트 import {Component} from 'react'; class C extends Component{ render() { con..
-
useStateStudy/React, JS 2023. 10. 9. 23:01
함수형 컴포넌트에서 상태를 관리하기 위해 사용 컴포넌트 내부에서 상태 변수를 정의하고 이를 간편하게 업데이트 할 수 있음 const [상태변수, 상태변수를 업데이트할 함수] = useState(초기값); 예시 import React, { useState } from 'react'; function Counter() { // count 상태 변수와 setCount 업데이트 함수를 정의 const [count, setCount] = useState(0); const increment = () => { // setCount 함수를 사용하여 count 상태를 업데이트 setCount(count + 1); }; return ( 카운트: {count} 증가 ); } export default Counter; 여기에..