React4 setState, useState State 상태관리에 대해 알아보자. 다음과 같이 count 변수를 선언하고 버튼을 클릭하면 숫자가 올라가게끔 구현하고싶다. 다음과 같이 작성하면 버튼을 클릭할때마다 count 의 숫자는 올라가고있지만 화면이 리렌더링되지않아 화면에서는 숫자가 올라가는것을 확인할 수 없다. 숫자를 더할때마다 render함수를 함께 호출하는 방법도 있지만 그닥 좋은 방법은 아니다. const root = document.getElementById("root"); let count = 0; function plusCount() { count++; } const App = ( count : {count} click me! ); ReactDOM.render(, root); 이러한 불편함을 해결해주는 기능이 바로 useState이.. 2023. 9. 17. JSX(JavaScript XML) Component JSX(JavaScript XML) React와 함께 사용되는 JavaScript의 확장 문법 JSX는 React 애플리케이션을 빌드할 때 주로 사용되며 JSX로 작성한 코드는 Babel과 같은 도구를 사용하여 JavaScript 문법으로 변환해야한다. 첫글자는 대문자로 ! 중괄호 {}를 사용하여 JavaScript 표현식을 JSX에 포함할 수 있음 하나의 부모요소안에 여러 태그를 묶어 return함 또는 를 사용하여 여러 요소를 묶는 방법도 있음 아래는 JSX로 컴포넌트를 만들어서 사용하는 예시이다 function HelloWorld() { return Hello, World!; } const HelloWorld = () => ( Hello, World!; ) 컴포넌트를 만들어서 재사용도 얼마든지 가능.. 2023. 9. 17. React Router사용환경 세팅과 BrowserRouter,Switch, Route, Link컴포넌트 사용법 React Router 사용환경 세팅 create-react-app 설치한 프로젝트파일안으로 들어가서 React Router 라이브러리 설치 $ npm install react-router-dom@5.3.0 package.json 파일 "dependencies"하단을 보면 react-router-dom 설치가 잘 되었는지 확인할 수 있다. App.js상단에 react-router 컴포넌트 꺼내오기위한 import구문 작성 import React from "react"; import { BrowserRouter, Switch, Route, Link } from "react-router-dom"; BrowserRouter 새로고침하지않고도 주소를 변경할 수 있도록 해줌 BrowserRouter가 상위에 작성.. 2022. 1. 6. Create React App설치 & You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0) 오류해결 Create React App SPA를 쉽고 빠르게 개발할수 있도록 만들어진 툴 체인 react 를 안쓴지 오래되어서 복습할 겸 기록을 남겨본다. 먼저 빈 디렉토리 하나를 생성해준다. Create React App생성 실행하고싶은 디렉토리안에서 Create React App를 생성해보자 우선 사전에 node, npm설치가 되어있어야한다 // sample 폴더안에서 실행 $ cd smaple // react-random-proverb 라는 프로젝트명으로 create-react-app 생성 $ npx create-react-app react-random-proverb 여러가지 패키지들이 설치되는것을 볼수 있고 이와같이 출력되면 설치가 완료이다 오류해결 간혹 아래와 같은 오류가 뜬다면😦 $ npm uninst.. 2022. 1. 6. 이전 1 다음
