React useState
-
React Import & ExportFront-end/React 2023. 6. 7. 11:42
React Import & Export React 에서 export 또는 import 를 사용할때는 javascrpit export, import 사용방법이 같다. // data.js let data = [ { id: 0, title: "White and Black", content: "Born in France", price: 120000 }, { id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000 }, { id: 2, title: "Grey Yordan", content: "Born in the States", price: 130000 } ] export default data; src 폴더에 data.js 파일을 생성 한 후 expo..
-
React - useState - 3Front-end/React 2023. 4. 26. 20:02
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 - 2Front-end/React 2023. 4. 26. 18:18
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 - 1Front-end/React 2023. 4. 26. 01:42
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..