
[React] 참조형 State
2022. 5. 24. 01:35
개발이야기/React.js
이번엔 객체와 배열에서 state를 활용해보자. 어떠한 버튼을 클릭했을때, sethistory의 state값이 변경되면서 push 메소드를 활용하여 history값 뒤에 nextNum값 들을 추가해주는 코드이다. 이때 기존에 state 활용방식처럼 setHistory(history); 로 값을 넣어주었는데, 이 방법은 사실 잘못된 방법이다. 왜 일까? import { useState } from "react"; import Dice from "./Dice"; import React from "react"; import Button from "./Button"; const random = (n) => { return Math.ceil(Math.random() * n); }; const App = () =>..

[React] useState Hook
2022. 5. 23. 00:33
개발이야기/React.js
useState hook 사용법을 알아보자. 예쁜 주사위 이미지가 있다. 주사위에 '버튼'을 만들어서 랜더링을 할때마다 상태 값이 변하도록 만들어볼거다. 먼저 Button.js 컴포넌트를 만들어주고 const Button = ({ text }) => { return {text}; }; export default Button; 부모 컴포넌트로 이동! import Dice from "./Dice"; import React from "react"; import Button from "./Button"; const App = () => { return ( ); }; export default App; 버튼 컴포넌트에 text라는 props를 사용하고 App.js에 props로 전달해준다. (Button 컴포넌트..