8️⃣.1️⃣ useState 가장 기본적인 Hook 함수형 컴포넌트에서 state 사용시 사용한다. 예시 코드 더보기 import { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); // useState 함수의 파라미터에 상태의 기본값을 넣어줌 // 함수는 배열을 반환하는데 배열의 첫 번째 원소는 상태값, 두 번째 원소는 상태를 설정하는 함수 return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 ); }; export default Counter; 여러번 useState 사용시 한번에 하나의 상태값만 관리하기..
REACT
6️⃣.1️⃣ 자바 스크립트 배열의 map() 함수 map함수는 파라미터로 전달된 함수를 이용해 배열 내 각 요소를 원하는 규칙대로 변환후 새로운 배열로 반환한다. arr.map(callback, [this Arg]) -callback : 새 배열을 생성하는 함수, 3가지 --currentValue : 현재 처리중인 요소 --index : 현재 처리중인 요소의 index --arr : 현재 처리중인 원본 배열 -this.Arg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스 6️⃣.2️⃣ 데이터 배열을 컴포넌트 배열로 반환하기 key 값이 없이 배열을 랜더링 한다면, 에러가 발생한다. 6️⃣.3️⃣ Key 리액트에서 key는 컴포넌트 배열을 랜더링 했을때 어떤 원소에 변동이 있었는..
ref: DOM에 이름 달기 ref는 어떤 상황에 사용해야 하나? ref는 꼭 DOM을 직접적으로 건드려야 할 때 사용한다. 리액트에서는 굳이 DOM에 접근하지 않고 state로 구현가능하다. DOM을 꼭 사용해야 하는 상황 (state로 해결 불가능한 상황) 1. 특정 input 포커스 주기 2. 스크롤 박스 조작하기 3. Canvas요소에 그림 그리기 ref사용 사용 방법은 두가지가 있다. 1. 콜백 함수를 통한 ref 설정 가장 기본적인 방법으로, ref를 달고자 하는 요소에 ref라는 콜백함수를 props로 전달한다 (콜백 함수안 this.____ 에서 ____에 들어갈 ref 이름 설정이 자유롭다.) {this.input=ref}} /> 2. creatRef를 통한 설정 리액트 내장 함수인 cr..
이벤트 핸들링 이란? 사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것을 이벤트라고 함 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 HTML 이벤트와 동일하기에 사용법이 비슷하다. onChange 이벤트 햄들링하기 -설정- 1️⃣ e객체는 syntheticEvent로 웹브라우저의 이벤트를 감싸는 객체이다. 2️⃣ 네이티브 이벤트와 인터페이스가 같으므로 순수JS에서 HTML이벤트와 같이 사용가능하다. 3️⃣ syntheticEvent는 네이티브 이벤트와는 달리 이벤트가 끝나면 이벤트가 초기화되어 정보참조 불가능하다. 4️⃣ 비동기적으로 이벤트 객체 참조시 .persist() 함수를 호출하여 사용한다.(버전 17 부터는 폴링 안된다.) state에 input값 담기 const onChangeMess..
7장 컴포넌트의 라이프사이클 메서드 1) 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 2) 렌더링 되기 전 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 3) 라이프사이클 메서드는 클래스 컴포넌트에서만 사용 가능하다. (함수형 컴포넌트에서는 Hooks를 사용해 비슷하게 처리할 수 있다) 컴포넌트를 처음 렌더링 할 때 어떤 작업을 처리해야 하거나 업데이트 전후 작업을 처리, 불필요한 업데이트를 방지해야 할 수도 있다. 7️⃣.1️⃣ 라이프사이클 메서드의 이해 총 9가지 메서드가 있다. Will 접두사가 붙으면 작업 전 실행되는 메서드 Did 접두사가 붙으면 작업 후 실행되는 메서드 라이프사이클은 총 3가지, 마운트 - 업데이트 - 언마운트 카테고리로 나뉜다. 마운트 : DOM이 생성..
