Ellen's Web Note

2500개의 리스트를 출력한다고 가정할 때 기본적인 코드는 아래와 같이 작성하게 된다. import { useState } from "react"; function setArray() { const array = []; for (let i = 1; i { const [arr, setArr] = useState(setArray); return ( {arr.map((obj, idx) => ({obj.num}))} ); }; export default App; 화면에는 10개의 데이터만 보이지만 실제로 2500개의 리스트가 한번에 렌더링되고, 불필요한 렌더링이 반복되면 프로그램이 느려지게 된다. 이럴 때 불필요한 리렌더링을 방지하는, 성능을 최적화하는 작업이 필요. 컴포넌트가 리렌더링 되는 경우는, 1. 전달..

리액트에서 컴포넌트를 스타일링 할 떄에는 다양한 방식을 사용할 수 있다. 여러 방식 중 딱히 정해진 방식은 없고, 개인의 편의나 회사의 스펙에 맞춰 사용하면 된다. 종류 : css, scss, css-module, styled-components css 기본적인 CSS 스타일링. class -> className sass (syntactically awesome stylesheet) - css전처리기로 복잡한 작업을 쉽게 할 수 있게 히줌. - 스타일 코드의 재활용성을 높여주고 코드의 가독성을 높요 유지보수에 도움. - 확장자는 .scss와 .sass 두가지를 지원. - node_modules 디렉터리의 라이브러리를 호출해서 사용 (경로에 ~를 사용하면 자동으로 node_modules디렉터리로 경로가 지..

React Hooks 클래스 컴포넌트를 대체하기 위한 목적으로 도입된 기능. useState 함수형 컴포넌트에서 state 사용. import React, {useState} from 'react'; const UseStateSample = (props) => { const [value, setValue] = useState(0); return( 현재 카운터 값음 {value} 입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 ) } export default UseStateSample; 첫번째 원소(value)는 상태 값, 두번째 원소(setValue)는 상태를 없데이트하기 위함 함수, useState(0)의 파라미터는 state의 초기값. useEffect..

라이프사이클 메서드 - 컴포넌트를 처음 렌더링할 때나 업데이트할 때 처리해야 할 작업을 실행시키는 메서드. - 라이프사이클 메서드는 클래스형 컴포넌트 에서만 사용. (단, 함수형 컴포넌트는 Hooks를 사용하여 비슷한 작업을 실행할 수 있음.) - Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행하는 메서드이고, Did접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행하는 메서드로 구분. 컴포넌트가 업데이트 되는 경우. 1. Props가 바뀔 때 2. state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. this.forceUpdate로 강제로 렌더링을 트리거할 때 1. constructor 컴포넌트 생성자 컴포넌트를 만들 때 처음 실행되는 메서드로, state를 초기화할 때 사용..

map()함수 map 함수를 사용하여 반복되는 컴포넌트를 렌더링. 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열 생성 arr.map(callback, [thisArg]) Parameters: Callback : 새로운 배열의 요소를 생성하는 함수 currentValue : 현재 처리하고 있는 요소 index : 연재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg : callback 함부 내부에서 사용할 this 레퍼런스 const number = [1,2,3,4,5]; const process = number.map(function(num){ return num*num; }) //process = [1,4,..

Ref란? - render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공. - id와 같은 역할을 하지만, ref에서는 컴포넌트 내부에서만 작동하기 때문에 id중복 문제를 해결할 수 있음. //jquery $("#input").val("abc"); $("#input").focus(); const getValue = $("#input").val(); //react const inputRef = useRef(); inputRef.current.value = "abc"; inputRef.current.focus(); const getValue = inputRef.current.value; ref를 사용해야 하는 경우. - 특정 input에 포커스 주기 - 스크롤박스 조작하기 - c..

이벤트 사용 시 주의사항 * 카멜 표기법 사용 onclick -> onClick onkypup -> onKeyUp * 이벤트에는 함수 형태의 값을 전달 onClick={() => console.log('click!')} * DOM요소에만 이벤트 설정 div, button, input등에는 이벤트를 설정할 수 있지만 컴포넌트에는 이벤트를 설정할 수 없음. 이면 MyComponent에 Onclick이라는 props를 전달하는 것. 1. 클래스형 컴포넌트에서 임시 메서드 사용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 ..

state란? - 컴포넌트 내부에서 바뀔 수 있는 값. - 부모 컴포넌트에서 state를 props로 넘겨줄 경우 하위 컴포넌트는 state를 읽는 용도로만 사용할 수 있음. - 부모 컴포넌트로부터 넘겨받은 state값을 수정해야하는 경우 부모 컴포넌트에서 직접 state를 수정해야 함. - 컴포넌트 타입에 따라 state 사용 방법이 다름. 1. 클래스형 컴포넌트 (state) - this.state에서 state값을 초기화 하고, 값을 변경할 때에는 this.setState를 사용. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 ..