본문 바로가기

웹 개발

 (97)
React) 불변성 React Component의 불변성 불변성이란, 기존의 값을 수정하지 않는 것을 말합니다. 리액트 컴포넌트는 상태가 변하더라도 이 기존의 값을 수정하지 않고, (불변성을 지키면서) 새로운 값을 만들어내도록 해야 합니다. 그래서 기존의 데이터에 변화가 필요할 떄 직접 그 데이터를 수정하지 않고, 해당 데이터를 복사 후 수정하여 새로운 객체로 만들어줍니다. Example 다음 예시에서는 newArray에 array를 복사하여 새로운 객체를 할당한 것이 아니라 newArray로 array의 이름만 바꾼 것이라고 생각하시면 됩니다. 그래서 newArray의 요소에 직접 접근하여 수정을 한 것이 array에도 마찬가지로 반영이 되어 [0] 번 요소를 바꾼 뒤에도 array와 newArray가 같다는 결과가 나옵..
React) react-icons 사용법 react-icons react-icons 설치 React 프로젝트의 package.json이 있는 폴더에서 터미널을 열고 다음 명령어를 입력합니다. npm install react-icons --save 완료되면 package.json을 열어 설치가 잘 되었는지 확인합니다. 설치가 잘 되었다면 package.json 파일의 dependencies 내부에 다음과 같은 값이 추가되었을 것입니다. 사용할 아이콘 선택 이 사이트에서 사용하고 싶은 아이콘을 선택합니다. React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you ..
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) Hooks : useMemo를 이용하여 연산 최적화하기 Hooks : useMemo useMemo는 이전에 계산한 값을 재사용하는데 사용하는 Hook 입니다. useMemo(() => 연산할 함수, deps 배열); 여기서 deps 배열 안에 넣은 내용이 바뀌면 등록한 함수를 호출하여 연산하고, 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용합니다. 즉, 매번 연산을 수행하는 것이 아니라 두번째 파라미터로 전달한 배열의 값이 바뀔 때에만 연산을 하는 것입니다. 이를 통해 불필요한 연산을 하지 않을 수 있습니다. 다음은 리스트에 숫자를 추가하여 리스트 값들의 평균을 보여주는 함수형 컴포넌트입니다. view source code import React, { useState, useMemo } from 'react'; const getAverage = list ..
React ) Hooks : useReducer 사용하기 Hooks : useReducer useReducer는 리액트에서 reducer를 사용하게 해주는 Hook 입니다. 현재 상태, 업데이트에 필요한 정보를 담은 action 값을 전달받아 새로운 상태를 반환하는 함수입니다. action 상태를 변화시키기 위해 필요한 정보를 담은 액션은 다음과 같이 형태로 이루어져 있습니다. 뒷장에서 배울 리덕스에서는 액션안에 이 type 객체가 반드시 있어야 한다고 합니다. { type: 'ACTIONTYPENAME', ... } 카운터 구현 view 첫화면은 다음과 같습니다. 아래 +1 버튼을 누르면 current value 값이 1 증가하고, -1 버튼을 누르면 1 감소합니다. source code import React, { useReducer } from 'reac..
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..

티스토리툴바