쭈링이.log 쭈링이.log

React useState useState에서 배열 또는 오브젝트 값을 변경할땐 배열의 값을 바꾼다고 값이 변경되지 않는다. /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let post = 'Restaurant'; let postId = 'postId'; let [title, setTitle] = useState(['Title1', 'Title2', 'Title3']); let [blogTItle, setBlogTitle] = useState('ReactBlog'); let [like, changeLike] = useState(0)..

React useState useState의 값을 변경하기위해선 등호( = )를 사용해서 변경 하는것보다 useState의 두번째변수인 상태값 갱신 함수를 사용하여 값을 변경해야 HTML에 재랜더링이 적용되어 변경된 값이 반영이 된다. App.js /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let post = 'Restaurant'; let postId = 'postId'; let [title, setTitle] = useState(['Title1', 'Title2', 'Title3']); let [blogTItle, setBlo..

React useState React useState 란 컴포넌트가 가질 수 있는, 또는 변할 수 있는 상태의 값이라고 한다. useState를 변수에 저장하기 위해 Distructuring 문법을 사용하여 저장할 수 있다. //useState 변수 선언 let [ 상태값 저장 변수 , 상태값 갱신 함수] = useState(상태초기값); 변수와 state의 차이점은 변수가 변경이 되면 html에 자동으로 반영이 안되지만, state는 자동으로 html이 재랜더링이 된다. // App.js import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let post = 'Restaur..

React JSX React JSX 란 Javascript 에 xml을 추가하여 확장한 문법이다 javascript 에 html 을 작성하여 react를 만드는데 효율적으로 만들 수 있다. // App.js import logo from './logo.svg'; import './App.css'; function App() { return ( // JSX 문법으로 js 파일에 html을 작성할 수 있다. Blog ); } export default App; html의 h4 태그속성이 적용되어 화면이 출력이 된다. className html 태그에 className을 부여하여 html의 class 속성처럼 사용하여 App.css 파일을 import 하여 App.css 파일에 스타일을 적용해 줄 수 있다. ..

React 설치 1) node.js 홈페이지 들어가서 다운로드 2) VSCode 설치 폴더를 하나 생성 후 폴더 경로로 react 설치하기위해 PowerShell 이나 git bash 로 연다. npx create-react-app 프로젝트명 원하는 프로젝트명을 입력 후 설치해준다. 이러한 화면이 나오면 성공적으로 설치된 것이다. 터미널을 종료 후 작업폴더를 들어가면 프로젝트명으로 생성된 리액트 프로젝트가 생성이 되어있다. VSCode를 실행 한 후 프로젝트명으로 생성된 폴더를 불러온다. 프로젝트명이 보이면 잘 불러온 것이다. 프로젝트명 아래 src폴더를 열면 App.js파일이 있는데 이 파일이 리액트의 메인페이지이다. 프로젝트를 실행하려면 VSCode 메뉴탭에 Terminal을 클릭 한 뒤 New Te..