몽땅뚝딱 개발자

컴포넌트 단위로 element를 return 할 때 하나의 태그로 전체를 감싸지 않으면 에러가 발생한다. 이 때 태그로 감싸면 태그나 기타 의미없는 구분용 태그(가령 )를 추가하지 않아도 된다. ◽ 태그 사용하기 를 사용하기도 한다. import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React, { Component, Fragment } from "react"; class ChildComp extends Component { render() { return ( P TAG ) } } export ..

함수형 컴포넌트는 class형 컴포넌트와 달리 아래와 같은 특징이 있다. 1. state가 없다. 2. 생명주기 함수를 사용할 수 없으며 hook을 이용한다. 3. 상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용한다. 4. render() 함수가 없으므로 return을 사용하여 화면을 그려준다. ◽ 함수형 컴포넌트 사용하기 import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React from "react"; function ChildComp(props) { let { co..

◽ Class형 컴포넌트 Class형 컴포넌트에는 Component외 PureComponent가 있다. ◽ 차이점 두 컴포넌트 모두 props와 state의 변경에 따라 render() 함수를 호출하는데, 변경에 대한 기준이 다르다. 1. Component 비교 대상이 완전히 동일하지 않으면 변경이 발생했다고 본다. setState() 함수로 실행된 값은 이전에 있던 state 변수값과 동일하더라도 컴포넌트에서는 새로운 state 변수가 같은 이름으로 생성됐다고 인식한다. // 1. Component를 import한다. import React, { Component } from "react"; // 2. 상속받는다. class ChildComp extends Component { // 코드 ... } 2..

◽ z-index란? HTML 요소가 겹치는 순서를 정의하는 CSS 속성으로 인덱스가 높은 요소는 인덱스가 낮은 요소 위에 배치된다. ◽ z-index의 적용 방법 z-index는 position의 속성이 relative, absolute, fixed처럼 위치가 지정된 요소에서만 작동된다. static에서는 동작하지 않으므로 주의하자! 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ state 사용하기 import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React, { Component } from "react"; class ChildComp extends Component { constructor(props) { super(props); this.state = { stateString: this.props.val_string, stateNumber: 200 } } render() { return ( {this.state.stateString} ); } } export d..

드뎌.. 리액트 공부 다시 시작..! 🥺 ◽ Props 데이터를 수정해야할 경우 props 자체가 아닌 컴포넌트 내부 변수(예제에서는 "props_value"라는 변수)에 옮겨 가공한다. import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( // JSX Start React ); } export default App; import React, { Component } from "react"; class ChildComp extends Component { render() { // props 인자 받아오기 let props_value = this.props.test_..

ES5에서는 객체를 구현하기위해 prototype을 사용하고, ES6에서는 같은 개념인 class를 사용한다. 가독성도 좋고 쉽게 선언할 수 있는게 차이점인 듯! ◽ ES5: Prototype 프로토타입에서는 함수명.prototype.함수명 형태로 선언하여 객체 외부에서 객체내부에 선언된 함수를 사용할 수 있다. // ES5의 프로토타입(Prototype) let examCountFunction = (function () { function examCount(num) { this.number = num } examCount.prototype.showNum = function () { console.log(this.number); } return examCount; }()); let cnt = new ex..

◽ 적용하기 export const hexToRgba = (hexType: string, alpha: string): string => { let r = parseInt(hexType.slice(1, 3), 16), g = parseInt(hexType.slice(3, 5), 16), b = parseInt(hexType.slice(5, 7), 16) return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')' } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ 세자리마다 콤마(,) 적용 parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',') ◽ 소수인 경우 세자리마다 콤마(,) 적용 // 소수점을 기준으로 split const parts = returnTarget.toString().split('.') parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',') // 정수만 추출하여 3자리마다 콤마 적용 returnTarget = parts.join('.') 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

Chart.js에서 기본적으로 제공하는 데이터 레이블이 구현하는데 한계가 있어 이 플러그인을 사용했다. chartjs-plugin-datalabels chartjs-plugin-datalabels.netlify.app ◽ Scriptable 옵션은 스크립팅이 가능한 경우도 있고 아닌 경우도 있어서 문서를 확인해보면 된다. Scriptable 항목이 'Yes'이면 동적으로 옵션을 줄 수도 있다. (하지만.. 문서에 스크립트를 사용할 수 없다고 작성되어 있었음에도 동작하는 것들이 있었다.) ◽ Option const dataLabelOption = { offset: 0, // 레이블의 패딩 적용 (기본값이 4이기 때문에 0으로 조정) borderRadius: '5', // 레이블을 감싸는 영역에 border..