본문 바로가기

Front end

 (9)
React) Hooks : useRef Hooks : useRef useRef는 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해줍니다. 아래 예제에서 register 버튼을 눌렀을 때 포커스가 input으로 넘어가는 코드를 작성했습니다. view 여기서 input에 숫자를 입력하고 register 버튼을 누르면 바로 직후에 아래와 같이 input으로 포커스가 넘어갑니다. example source code import React, { useState, useMemo, useCallback, useRef } from 'react'; const getAverage = list => { console.log('평균값 계산 중...'); if (list.length===0) return 0; const sum = list.reduce((a,b..
React) Hooks : useCallback 으로 렌더링 성능 최적화하기 Hooks : useCallback useCallback은 주로 렌더링이 자주 되는 상황에서 성능 최적화를 위해 사용됩니다. 컴포넌트는 랜더링될때마다 컴포넌트 내부의 함수들을 모두 새로 생성하는데 useCallback을 사용하면 useMemo에서 이전에 계산된 값을 재사용하여 불필요한 연산을 피했던 것 처럼, 생성해 둔 함수를 재사용해 불필요한 함수 생성을 줄일 수 있습니다. 컴포넌트 렌더링이 자주 발생하거나 렌더링 해야 할 컴포넌트가 많은 경우 이를 이용해 성능 최적화를 해주는 것이 좋습니다. const example = useCallback(() => {생성할 함수...},[배열]); 두번째 파라미터로 주어지는 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 알려주는 것입니다. examp..
React) 컴포넌트의 수명주기 Lifecycle 컴포넌트의 수명주기 LifeCycle 리액트 컴포넌트에는 수명주기 Lifecycle이 있습니다. 수명은 페이지가 렌더링 되기 전 준비과정부터 페이지가 사라질 때가지를 말합니다. 프로젝트를 하다보면 컴포넌트를 렌더링 하기 전에 처리해야할 작업이 있고, 렌더링 이후에 업데이트 하기 전 후 처리해야 할 작업 등이 있습니다. 이렇게 컴포넌트 수명 주기에 따른 처리를 위해 사용하는 것이 라이프사이클 매소드 입니다. 이것은 클래스형 컴포넌트에서만 사용할 수 있고, 함수형 컴포넌트에서는 Hooks를 사용하여 비슷한 기능을 사용할 수 있습니다. 라이프 사이클의 종류 마운트 Mount 업데이트 Update 언마운트 Unmount 마운트 Mount DOM이 생성되고 웹 브라우저 상에 컴포넌트들이 나타나는 것을 마운트라고 ..
React) 사용자 입력 받아 데이터 추가, 제거하기 사용자 입력 받아 데이터 추가, 제거하기 view 초기 화면은 다음과 같습니다. input에 사용자가 텍스트를 입력하고 add 버튼을 누르면 이렇게 추가됩니다. 그리고 각 항목의 왼쪽 delete 버튼을 누르면 해당 항목이 제거됩니다. source code import React, { useState } from 'react'; const Iteration = () => { const [seasons, setSeasons] = useState([ { id: 1, name: 'spring' }, { id: 2, name: 'summer' }, { id: 3, name: 'fall' }, { id: 4, name: 'winter' } ]); const [inputText, setInputText] = use..
map() 함수 사용하기 자바스크립트 배열의 map() 함수 map() 함수는 자바스크립트 배열 객체의 내장 함수입니다. while 또는 for 로 반복문을 짜는 것처럼 자바스크립트에서는 map 함수를 이용해서 반복되는 컴포넌트를 렌더링 할 수 있습니다. 문법 arrayItem.map(callback, [argument]) arrayItem은 배열로 이루어진 데이터입니다. 이 값에 map 함수를 사용합니다. 이때 callback 함수에는 배열 내부 각 요소들로 생성하는 함수로 currentValue, index, array를 파라미터로 가집니다. cueentValue : 배열의 항목 중 현재 처리할 항목 index : currentValue의 인덱스 값 array : 현재 처리하고 있는 원본 배열 그리고 콜백 함수 내부에서 사용..
React) Ref란? Ref What is Ref ? HTML에서는 DOM 마다 id로 이름을 달 수 있습니다. 리액트는 id 대신 reference의 줄임말인, ref로 이름을 달 수 있습니다. id는 unique해야 하는데 리액트에서는 컴포넌트 재사용이 많은데 이런 상황에서 id가 중복이 발생하기 때문에 리액트에서도 id를 사용할 수 있지만 사용을 권장하지는 않고 있습니다. 특수한 경우, id를 사용해야 한다면 id 뒷 부분에 추가 텍스트를 붙여 (btn 1, btn2,...) 중복 id 발생을 방지해야 합니다. When to use ref는 DOM을 직접 건드려야 할 때 사용하는 것입니다. 예를 들어 특정 input에 focus 주기 스크롤 박스 조작하기 canvas 요소에 그림 그리기 등 의 작업을 할 때에는 DOM에..
React) 간단한 비밀번호 검증 예제 Password Validation Password Validation source code /* validation.css */ .success{ background-color: lightgreen; } .failure{ background-color: lightcoral; } import React, { useState } from 'react'; import './validation.css'; const staticPassword = '0000'; const Validation = () => { const [password, setPassword] = useState(''); const [clicked, setClicked] = useState(false); const [validated, setValidated] = useState..
React) onKeyPress와 input 여러개 일 때onChange 이벤트 핸들링 onKeyPress and onChange with multiple input Event Handling source code import React, { useState } from 'react'; const EventHandling = () => { const [form, setForm] = useState({ username:'', message:'' }) const { username, message } = form; const handleChange = e => { const newForm = { ...form, // 기존의 form을 이 자리에 복사 [e.target.name] : e.target.value }; setForm(newForm); } const handleClick = () =>..

티스토리툴바