전체 글

useMemo 를 사용하여 연산값 재사용하기

useMemo useMemo → Memoization Memoization 이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 적절히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있다. 만약에, 함수가 내부적으로 매우 복잡한 연산을 수행해서 결과값을 리턴하는데 시간이 몇초 이상 오래 걸린다면 컴포넌트의 리렌더링이 필요할 때 마다 함수가 호출되므로 사용자는 지속적으로 UI에서 지연이 발생하는 경험하게 될 것이다. 이를 memorization 기법을 적용하면 React의 useMemo Hook 함수를 이용하여 개선시킬 수 있다. 사용법 첫번째 파라미터에는 (어떻..

useEffect 로 마운트/언마운트/업데이트 시 작업 처리

용어 정리 - 마운트: 처음 화면에 나타날 떄 - 언마운트: 화면에서 사라질 때 - deps: 의존하는 값. dependence. useEffect useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect 는 컴포넌트가 mount 됐을 때, unmount 됐을 때, update 됐을 때 특정 작업을 처리할 수 있다. *즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다. 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열(deps)이 들어간다. useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { ..

배열 항목 관리

배열에 항목 추가하기 (Create) 배열에 변화를 줄 때에는 객체와 마찬가지로 불변성을 지켜야 한다. 따라서 push, splice, sort 등의 함수는 사용하면 안된다. 사용해야 한다면 기존의 배열을 한 번 복사하고 나서 사용해야 한다. 불변성을 지키면서 배열에 새 항목을 추가하는 방법 spread 연산자 사용 ([...복사할배열이름, 배열이름]) setUsers([...users, user]) 기존의 배열을 수정하지 않고 복사해온 뒤, 값을 설정해준다. concat 함수 사용 (배열이름.concat(합치고 싶은 배열)) setUsers(users.concat(user)) 기존의 배열에 변화를 주지 않으면서, 배열을 합칠 때 새로운 배열을 만들어낸다. CreateUser.js import React..

useRef 로 컴포넌트 안의 변수 만들기

useRef 역할 DOM을 선택하는 용도 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리 useRef 로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다. 변수를 사용하여 관리할 수 있는 값 setTimeout, setInterval 을 통해서 만들어진 id 외부 라이브러리를 사용하여 생성된 인스턴스 scroll 위치 리액트 컴포넌트에서의 상태는, 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회할 수 있다. useRef( ) 를 사용할 때 파라미터를 넣어주면 이 값이 .current 값의 기본값이 된다. 더보기 +원문 댓글 추가 리액트 컴포넌트 setState 를 통해서 값이..

Github 프로젝트 페이지 배포하기

Github 저장소에 올려둔 프로젝트 파일을 배포하는 방법을 알아보자. 1. gh-pages 패키지 설치 먼저 프로젝트에 gh-pages 패키지를 설치한다. npm install gh-pages --save-dev && yarn add gh-pages 2. package.json 수정 설치가 완료되면 프로젝트 내 package.json 파일을 열어 "homepage" 주소를 추가한다. .... "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "gh-pages": "^4.0.0" }, "homepage": "http://사용자이름.github.i..

정수인지 확인하기

Number.isInteger( ) 인자가 정수인지를 확인하는 메소드 전달된 값이 정수이면 true를 아니라면 NaN, Infinity와 같은 값은 모두 false 를 반환한다. Number.isInteger(1); // true Number.isInteger(3.14); // false Number.isInteger('문자'); // false Number.isInteger(true); // false 출처/참고 [자바스크립트] 전달된 값이 정수인지를 확인하는 메소드

루트와 제곱 구하기

루트 Math.sqrt 루트값을 구하는 방법은 인자로 값을 넘겨주면 루트값을 반환한다. Math.sqrt(4);// 2 Math.sqrt(100);// 10 Math.sqrt(16);// 4 제곱 Math.pow 제곱의 값을 구하는 경우 Math.pow 를 사용해서 거듭 제곱 등을 쉽게 구할 수 있다. Math.pow(값, 제곱승) Math.pow(2, 2); // 4 Math.pow(10, 2); // 100 Math.pow(4, 2); // 16 출처/참고 [자바스크립트] 루트와 제곱 구하는 방법

배열 렌더링하기

참고 import React from 'react'; function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; return ( ); } export default UserList; 이러한 배열을 컴포넌트로 렌더링 하고자 할 때, 배열이 고정적이..

useRef 로 특정 DOM 선택하기

useRef Javascript 에서 특정 DOM을 선택하는 방법: DOM Selector 함수 - getElementById, querySelector 리액트에서 특정 DOM 을 선택하는 방법: ref 함수형 컴포넌트에서 ref 를 사용할 때에는 useRef 라는 Hook 함수를 사용한다. 더보기 리액트에서 DOM을 직접 선택해야 하는 경우 특정 엘리먼트의 크기를 가져와야 하는 경우 스크롤바 위치를 가져오거나 설정해야 하는 경우 포커스를 설정해줘야 하는 경우 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리 D3, chart.js 같은 그래프 관련 라이브러리 위와 같은 외부 라이브러리를 사용해야 하는 경우 포커스 설정 이전에 만들었던 InputSample.js 에서는 초기화 ..

input 상태 관리하기

input 상태 관리하기 input 에 onChange 를 사용하면 이벤트에 등록되는 함수에서는 이벤트 객체 e 를 파라미터로 받아올 수 있다. e.target 은 이벤트가 발생한 DOM인 input DOM 을 가리킨다. e.target.value 를 조회하면 현재 input 에 입력한 value 값을 알 수 있다. 변경되는 값은 useState 로 관리한다. input의 상태를 관리할 때는 input 태그의 value 값도 설정해주어야 상태가 바뀌었을 때 input 내용도 업데이트 된다. function InputSample() { const [text, setText] = useState(''); // input 관리할 상태 생성 (기본값 공백으로 설정) const onChange = (e) => {..

useState 로 컴포넌트에서 바뀌는 값 관리하기

리액트 16.8 이전 버전은 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 리액트의 Hooks 중 하나인 useState 함수는 상태(state: 동적인 값)를 관리한다. 이벤트 설정 리액트에서 이벤트를 설정해줄 때에는 on이벤트이름={실행하고싶은함수} 형태로 작성한다. 이 때 함수는 함수 실행 형태로 작성 시 렌더링 되는 시점에 함수가 호출되기 때문에 함수형태로 작성해야 한다. Counter.js import React from 'react'; function Counter() { const onIncrease = () => { console.log('+1') } const onDecrease..

배열의 최대값 최소값 찾기

Math 함수 Math.max.apply(null, 배열) // 최대값 Math.min.apply(null, 배열) // 최소값 주의! 배열 내에 비교 불가능한 값이 있다면 결과는 NaN으로 나온다. 대부분의 경우는 Math 객체를 이용해도 결과를 얻을 수 있지만 큰 배열 (~10^7 elements) 정도 되면, Math.min 과 Math.max 를 사용할 경우, “RangeError: Maximum call stack size exceeded” 오류가 나게 된다. Math 객체를 이용하지 않고 더 메모리 소모도 적은 reduce 함수를 이용한 방법도 있다. reduce 함수 let array = [1, 10, 5, 11, 2] // 최대값 let max = array.reduce((previous,..