천천히 알아가는 세상

안녕하세요. 이번에는 React에서 사용하는 변수와 state의 차이에 대하여 알아보겠습니다. 1. State와 변수 우선 코드를 작성해서 확인을 합니다. App.js import './App.css'; import StateAndVariable from './components/StateAndVariable'; function App() { return ( ); } export default App; components/StateAndVariable.js import React, { useState } from 'react'; export default function StateAndVariable() { const [state, setState] = useState(0); let variable = ..

안녕하세요. 이번에는 React에서 삼항 연산자를 이용하는 방법에 대하여 알아보겠습니다. 1. 삼항 연산자 삼항 연산자를 이용하여 React 코드 작성하기 App.js import './App.css'; import Condition from './components/Condition'; function App() { return ( ); } export default App; components/Condition.js import { useState } from 'react'; export default function Condition() { const [condition, setCondition] = useState(true); return ( setCondition(!condition)}>컨디션 ..

React.Fragment를 간략하게 사용하는 방법입니다. 우선 components 폴더의 component 작성 시 wrapping 태그가 필요합니다. return 할 때 최상위 태그 1개에 묶여 있어야 합니다. 태그로 묶여 있는 코드 return ( inEnglish()}>영어로! {teacher} ); 방법 1 div, span 등 return ( your code ); 방법 2 == 해당 코드의 경우에는 콘솔 검사를 할 때 방법1의 처럼 남아있지 않습니다. return ( your code ); 방법 3 Fragment 사용하는 경우에는 import가 필요합니다. 해당 코드의 경우에는 콘솔 검사를 할 때 방법1의 처럼 남아있지 않습니다 import { Fragment } from 'react'; ..

안녕하세요. 이번에는 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"..