본문 바로가기

Code/web-frontend

 (58)
[react] JSX 문법 메모 JSX 일단기본적으로 리액트컴포넌트에서 JSX 문법을 리턴합니다. // error function App() { const name = undefined return name } // ok function App() { const name = undefined; return {name || "react"}; } 조건문 JSX 내부의 자바스크립트 표현식에서 if 문을 사용할수 없습니다. -> 삼항 연산자 사용해야합니다. import React from "react"; function App() { const name = "리액트"; return ( {name === "리액트" ? ( 리액트 입니다! ) : ( 리액트가 아닙니다 )} ); } export default App; 이렇게 하면 됩니다. 리액트가..
[react] 개념설명 리액트 데이터가 변경되면 뷰도 변경을 해줘야합니다. 예를들어 js 변수 age = 20 이면 , HTML에도 나이: 19 19를 20으로 변경을 해줘야했습니다. 페북개발팀에서는 데이터를 HTML에 데이터를 포함하기로 합니다. 그러면 age가 20이 되면 , HTML에도 나이: { age } 따로 변경할 필요가 없어집니다. 리액트개발팀은 데이터가 변할때 마다 전체 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식을 사용하려 했지만, DOM 전체를 리렌더링하는것이 너무 느렸습니다.🤨 (만약 input값에 hello 를 입력한다면 h, e, l, l, o 총 5번 이나 전체 DOM이 리렌더링 되기때문) 하지만 리액트는 virtualDOM 을 사용해서 전체 DOM이 5번이나 리렌더링 되지 않고 필요한 부분만 ..
최적화 설정하기 (react-virtualized, immer) react-virtualized 2,500 개 컴포넌트 중 2,491 는 스크롤하기 전에는 보이지 않음에도 불구하고 렌더링이 이루어집니다. react-virtualized를 사용하면 리스트 컴포넌트에서 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게끔 할 수 있습니다. 만약 스크롤되면 해당 스크롤 위치에서 보여 주어야 할 컴포넌트를 자연스럽게 렌더링 시킵니다. yarn add react-virualized import React, { useCallback } from 'react'; import { List } from 'react-virtualized'; import TodoListItem from './TodoListItem'; import './TodoList.scss'; c..
[react] 스타일링 설정하기 Sass 사용하기 Sass 는 .sass 확장자와 .scss 확장자를 지원합니다. 보통 .scss 확장자를 사용합니다. yarn add node-sass 이 라이브러리는 Sass 를 css로 변환해줍니다. sass-loader 설정 커스터마이징하기 create-react-app 으로 만든 프로젝트는 구조의 복잡도를 낮추기 위해 세부 설정이 숨겨져 있습니다. 이를 커스터마이징하려면 프로젝트 디렉터리에서 yarn eject 명령어를 통해 세부 설정을 밖으로 꺼내 주어야 합니다. (commit 한후) yarn eject webpack.config.js 에서 "sassRegex" 두번째 탐색결과에서 use 부분을 아래와 같이 수정합니다. { test: sassRegex, exclude: sassModuleReg..
Reactjs code snippets 설정하기 VSCode 확장프로그램에서 설치를 합니다. 작성자가 charalampos karypidis 인 프로그램을 설치합니다. 코드를 작성할때 자주 반복적으로 작성하기 귀찮으니 단축키를 입력해서 쉽게 템플렛을 가져옵니다. 현재 저는 rsc 만 사용하고 있습니다.
ESLint와 Prettier 설정하기 ESLint ESLint는 문법검사 도구입니다. VSCode 확장프로그램에서 다운받으면 됩니다. Prettier-Code formatter 코드 스타일을 자동으로 정리해주는 도구입니다. VSCode 확장프로그램에서 다운받으면 됩니다. .prettierrc를 프로젝트의 루트 디렉토리에 만들어줘야 합니다. (설정예제) { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, } 정렬은 파레트명령어(F1 또는 ctrl + shift + p)에서 format selection(부분정렬) 또는 format document(전체정렬) 를 입력해야합니다. 단축키는, 부분 정렬 하려면 뭔하는 부분 드래그하고 ctrl + k + f 하면 됩니다. 자동정..
Object.create() 란 ES5 Object.create() 는 ES5 문법입니다. ES6 에서는 new 문법을 사용합니다. The Object.create() method creates a new object, using an existing object as the prototype of the newly created object. 새로 생성될 객체의 프로토타입 객체를 넣어주면, 새로운 객체가 생성됩니다. 아래의 예제를 보면 어떻게 작동하는지 쉽게 알수있습니다. const person = { isHuman: false, printIntroduction: function () { console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`); } }; const me..
JavaScript assign 문법 a = { a: '1', b: '2', c: '3' } // {a: "1", b: "2", c: "3"} Object.assign(a, function () { return { d: '4' }; }()); // {a: "1", b: "2", c: "3", d: "4"} Object.assign(a, {e: '5'}); // {a: "1", b: "2", c: "3", d: "4", e: "5"} Object.assign(a, {f: function() { return 'hello'}}); /* a: "1" b: "2" c: "3" d: "4" e: "5" f: ƒ () */ Object.assign(a, {g: function() { return 'hello'}()}); /* a: "1" b: "2" c..

티스토리툴바