본문 바로가기

전체 글92

✅ 배열 내장 함수(자바스크립트) forEach : for문 대체, 배열 안에 있는 모든 원소들을 모두 출력 const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; //for문으로 배열 안에 있는 모든 원소 출력 for (let i=0; i { console.log(hero); }); - forEach 함수의 파라미터로 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어줌 - 콜백함수: 함수형태의 파라미터를 전달하는 것 map : 배열 안의 각 원소를 변환할 때 사용, 새로운 배열이 만들어짐 const array = [1,2,3,4,5,6,7,8]; const squared = []; //for문 이용 for (let i=0; i { squared.push(n*n); }); console.. 2022. 11. 17.

리액트의 배열 배열에 항목 추가 : 배열에 변화를 줄 때, 객체와 마찬가지로 불변성을 지켜주어야 함 ➣ 기존의 배열을 한 번 복사하고 나서 사용 App컴포넌트에서 상태관리하고, CreateUser컴포넌트에서는 input값 및 이벤트로 등록할 함수들을 props로 넘겨받아 사용하는 예제 import React from "react"; function CreateUser({ username, email, onChange, onCreate }) { return ( 등록 ); } export default CreateUser; 1. spread 연산자 사용 import React, { useRef, useState } from "react"; import UserList from "./UserList"; import Crea.. 2022. 11. 17.

useRef useRef useRef로 특정 DOM 선택하기 ★ DOM(문서 객체 모델): XML이나 HTML문서에 접근하기 위한 일종의 인터페이스, 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법 제공 자바스크립트에서는 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM. Selector 함수를 사용해서 DOM 선택 리액트에서는 ref사용 함수형 컴포넌트: useRef라는 Hook 함수 사용 클래스형 컴포넌트: 콜백 함수 사용하거나 React.createRef라는 함수 사용 useRef사용 이유 값 저장: 현재 저장하고 싶은 값을 리렌더링 없이 저장 DOM 참조: DOM참조가능, 현재 DOM에서 element의 scroll위치, ima.. 2022. 11. 16.

리액트 Hooks - 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서 상태를 관리할 수 없었지만, 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리할 수 있게 됨 이벤트 설정 import React from "react"; function Counter() { const onIncrease = () => { console.log("+1"); }; const onDecrease = () => { console.log("-1"); }; return ( 0 +1 -1 ); } export default Counter; - 이벤트 설정해줄 때, on이벤트이름={실행하고싶은함수} 형태로 설정 import React from "react"; import Counter from "./Counter.. 2022. 11. 15.

이전 1 ··· 20 21 22 23 다음

티스토리툴바