분류 전체보기55 리액트의 배열 배열에 항목 추가 : 배열에 변화를 줄 때, 객체와 마찬가지로 불변성을 지켜주어야 함 ➣ 기존의 배열을 한 번 복사하고 나서 사용 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 ··· 11 12 13 14 다음
