Context API 작은 규모의 프로젝트에서 사용하면 좋은 React Hook Context 사용 방법 1. Context 만들기 createContext(기본값) - Provider가 없는 경우 사용할 default 값(initial X) // LevelContext.js import { createContext } from 'react'; export const LevelContext = createContext(1); 2. Context 제공하기 만들어놓은 Context.provider로 Context를 전달하고 싶은 자식 요소 감싸기 → 트리에 동일한 Context가 여럿 있을 때 자식 요소는 UI 트리에서 가장 가까운 Context 값을 사용 import { LevelContext } from..
rc-rate React Rate Component 리액트 별점 컴포넌트 라이브러리 원하는 모양으로 별점 컴포넌트를 만들 수 있다 1. 설치 npm i rc-rate 2. import import Rate from 'rc-rate'; import 'rc-rate/assets/index.css'; 3. 코드 console.log(v)} /> value: 값 지정. 상태를 줘서 사용 allowHalf: 별 반 점 허용 character: 원하는 모양(string, ReactNode)을 내려 주면 됨(color를 입힐 수 있어야 함. 문자, svg) onChange: 별점을 받아 실행할 함수를 할당 ... 4. 크기, 색상 변경 &.rc-rate { font-size: 20px; // width: 20px; ..
[React] react-chartjs-2로 만든 Bar chart에 데이터레이블 추가하기(플러그인)
react-chartjs-2로 Bar 차트 만들기 chartjs-plugin-datalabels 플러그인 적용은 6.부터 1. 라이브러리 설치 # 리액트차트js2, 차트.js, datalabels 플러그인 npm install react-chartjs-2 chart.js chartjs-plugin-datalabels 2. 기본 틀 만들기 // Bar.js 파일 import { Chart as ChartJS, CategoryScale, BarElement, LinearScale, } from 'chart.js'; ChartJS.register(CategoryScale, BarElement, LinearScale); 3. 옵션 설정 // Bar.js const options = { maintainAspect..
기존 원본을 변화시키는(mutable) 배열 메서드의 immutable 버전이 나옴 array.toReversed() ⓜ array.reverse() : 기존 배열의 순서를 뒤집음 → 기존 배열 참조 리턴 기존 배열의 순서가 반대인 새 배열 리턴 array.toSorted([함수]) ⓜ array.sort([함수]) : 기존 배열을 정렬 → 기존 배열 참조 리턴 기존 배열을 정렬한 새 배열 리턴 array.toSpliced(시작인덱스, 삭제할개수[, 추가할요소]) ⓜ array.splice(시작인덱스, 삭제할개수[, 추가할요소]) : 기존 배열 시작인덱스부터 두 번째 인자 개수만큼 삭제 → 삭제된 요소가 담긴 배열 리턴 기존 배열에서 시작인덱스부터 두 번째 인자 개수만큼 삭제된 새 배열 리턴 (삭제된 요..
7.4 임시 변수를 질의 함수로 바꾸기 배경 어떤 코드의 결괏값을 참조(재사용) 하기 위해 임시 변수를 사용하는데 이를 함수로 만들어 사용하는 게 더 나을 때가 많음 긴 함수의 한 부분을 별도 함수로 추출하려고 할 때 변수들을 함수로 만들면 수월해짐 추출한 함수와 원래 함수의 경계가 더 분명해져 부자연스러운 의존관계나 부수효과를 찾고 제거하는데 도움 됨 비슷한 계산을 수행하는 다른 함수에서도 사용할 수 있음 코드 중복이 줄어듦 클래스는 메서드들에 공유 컨텍스를 제공하기 때문에 클래스 안에서 적용할 때 효과가 가장 큼 - 클래스 바깥의 최상위 함수로 추출하면 매개변수가 너무 많아져서 함수를 사용하는 장점이 줄어듦 - 중첩 함수를 사용하면 관련 함수들과 로직을 공유하는데 한계가 있음 단점: 변수는 값을 한 ..
7.3 기본형을 객체로 바꾸기 배경 개발 초기 숫자, 문자열 같은 원시형으로 사용하다가 단순한 출력 이상의 기능이 필요해지면 그 데이터를 표현하는 전용 클래스를 정의 ex. 포매팅, 지역 코드 추출 관련된 새로운 데이터가 생기거나, 다른 기능이 필요해지면 클래스에 추가 절차 1. 아직 변수를 캡슐화하지 않았다면 캡슐화(6.6)한다.(세터, 게터 생성) 2. 단순한 값 클래스를 만든다. 생성자는 기존 값을 인수로 받아서 저장하고, 이 값을 반환하는 게터를 추가한다. 3. 정적 검사를 수행한다. 4. 값 클래스의 인스턴스를 새로 만들어서 필드에 저장하도록 1의 세터를 수정한다. 이미 있다면 필드의 타입을 적절히 변경한다. 5. 새로 만든 클래스의 게터를 호출한 결과를 반환하도록 1의 게터를 수정한다. 6. ..
7.2 컬렉션 캡슐화하기 배경 가변 데이터를 모두 캡슐화하면 - 데이터 구조가 언제 어떻게 수정되는지 파악하기 쉽고, 필요한 시점에 데이터 구조를 변경하기도 쉬워짐 컬렉션 자체를 반환해 컬렉션 원소가 변경되는 일을 방지하기 위해 add(), remove() 메서드 생성 + 게터가 원본 컬렉션을 반환하지 않도록 만들어 실수로 변경할 가능성 차단 절차 1. 아직 컬렉션을 캡슐화하지 않았다면 변수 캡슐화하기(6.6)부터 한다. 2. 컬렉션에 원소를 추가/제거하는 함수를 추가한다. - 컬렉션 자체를 통째로 바꾸는 세터는 제거(11.7)한다. 세터를 제거할 수 없다면 인수로 받은 컬렉션을 복제해 저장하도록 만든다. 3. 정적 검사를 수행한다. 4. 컬렉션을 참조하는 부분을 모두 찾는다. 컬렉션의 변경자를 호출하는..
7.1 레코드 캡슐화하기 배경 레코드 연관된 여러 데이터를 직관적인 방식으로 묶을 수 있어서 각각을 따로 취급할 때보다 의미 있는 단위로 전달할 수 있게 해줌 단점: 계산해서 얻을 수 있는 값과 그렇지 않은 값을 명확히 구분해 저장해야하여 번거로움 ex. 값의 범위를 표현하려면 시작, 끝, 길이를 알 수 있어야 함 불변 데이터인 경우 시작, 끝, 길이를 모두 구해서 레코드에 저장, 이름을 바꿀 때는 필드 복제하여 사용자가 모두 새 이름으로 옮길 때까지(기존 이름, 새 이름 모두 사용) 점진적으로 수정할 수 있음 필드 이름을 노출하는 형태, 필드를 외부로부터 숨겨서 원하는 이름을 쓰는 형태(주로 라이브러리에서 해시, 맵, 해시맵, 딕셔너리, 연관 배열 등의 이름으로 제공) 해시맵을 사용하는 곳이 많다면 불..
6.11 단계 쪼개기 배경 서로 다른 두대상을 한꺼번에 다루는 코드를 발견하면 각각을 별개 모듈로 나누는 방법을 모색 다른 단계로 볼 수 있는 코드들이 서로 다른 데이터와 함수를 사용하는 경우 진행 - 코드 수정 시 둘은 동시에 생각하지 않고 하나에만 집중하기 위해서 컴파일러(텍스트를 실행 가능한 형태로 변환) : 여러 단계가 순차적으로 연결된 형태로 작업이 분리되면 좋음 절차 1. 두 번째 단계에 해당하는 코드를 독립 함수로 추출한다. 2. 테스트한다. 3. 중간 데이터 구조를 만들어서 앞에서 추출한 함수의 인수로 추가한다. 4. 테스트한다. 5. 추출한 두 번째 단계 함수의 매개변수를 하나씩 검토한다. 그중 첫 번째 단계에서 사용되는 것은 중간 데이터 구조로 옮긴다. 하나씩 옮길 때마다 테스트한다. ..