천천히 알아가는 세상

안녕하세요. 이번에는 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에서 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 폴더 및 관련 파일이 중복으로 있으면 안 됩니다. (충돌 방..