천천히 알아가는 세상

안녕하세요. 이번에는 React의 useState 기능에 대하여 알아보겠습니다. 1. React - State 특수한 기능을 하는 변수라고 생각하면 된다. 컴포넌트에 대한 상태를 의미한다. State가 변경되면 해당 컴포넌트를 다시 렌더링 하기 때문에, 컴포넌트의 유동성 관리가 쉽다. 2. 일반 JS로 사용하였을 때 App.js import './App.css'; function App() { const teacher = '새싹'; function inEnglish() { const spanEl = document.querySelector('.App > span'); spanEl.innerHTML = 'sesac'; } return ( inEnglish()}>영어로! {teacher} ); } expor..

안녕하세요. 이번에는 React에서 ESLint 사용할 때 comma-dangle Error 해결하는 방법에 대하여 알아보겠습니다. 1. React comma-dangle 에러 .eslintrc.js 파일에 comma-dangle 추가 0 = 끄기 1 = 경고 2 = 에러 .eslintrc.js module.exports = { extends: ['airbnb-base'], rules: { 'linebreak-style': 0, 'no-console': 'off', 'comma-dangle': 1, }, }; package.json "devDependencies": { "eslint": "^8.31.0", "eslint-config-airbnb-base": "^15.0.0", "eslint-plugin"..

안녕하세요. 이번에는 React에서 Prettier + ESLint 설정 시 Error가 생기는 것을 해결한 세팅 방법에 대하여 알아보겠습니다. 실습환경 React : create-react-app 2ndreact Prettier + EsLint + TypeScript 세팅하기 (최신) 1. 폴더 구조 프로젝트 폴더 모음에서 제일 최상단 폴더에 설정을 합니다. react4, react5 폴더는 create-react-app 명령어로 만든 react 폴더입니다. (무시하셔도 됩니다) .vscode 폴더, settings.json, eslintrc.js, prettierrc 파일이 있으면 삭제 후 진행하시기 바랍니다. 단, 하위 폴더에 vscode 폴더 및 관련 파일이 중복으로 있으면 안 됩니다. (충돌 방..

안녕하세요. 이번에는 React의 Create-react-app으로 프로젝트를 생성한 후 ESLint를 사용할 때 Error가 발생하는 현상을 해결해 보겠습니다. create-react-app으로 생성한 폴더 Components에서 return ( token parase 관련 Error 때문에 빨간 줄이 안 없어지는 현상 확인 pacakge.json "devDependencies": { "eslint": "^8.31.0", "eslint-config-airbnb-base": "^15.0.0", "eslint-plugin": "^1.0.1", "import": "^0.0.6", "prettier": "^2.8.1", "typescript": "^4.9.4" } 1. .eslintrc.js 파일에서 pars..

안녕하세요. 이번에는 React의 Component에 대하여 알아보겠습니다. 그전에 VSCode에서 작업할 때 있으면 편리한 확장 프로그램을 설치하도록 하겠습니다. 1. VSCode 확장 프로그램 ES7 + React/Redux/React-Native snippets v4.4.3 React 관련 snippets 제공 2. Component Virtual DOM의 핵심이다. 기존의 웹 서비스들은 웹페이지에서 정말 작은 부분이 업데이트 되어도 페이지의 전체를 리로딩 해야한다. React는 컴포넌트 단위로 페이지 새로 고침이 가능하여 리소스 절약이 가능하고, 사용자에게 부드럽고 빠른 경험을 제공한다. 독립적으로 구성하여 재사용이 편리 합니다. 데이터는 속성(props) 으로 받고, 상태(state)에 따라 V..