728x90 Research/React40 React handling multiple inputs data with useState import { useState } from 'react'; const EventPractice = () => { const [username, setUsername] = useState(''); const [message, setMessage] = useState(''); const onChangeUsername = (e) => setUsername(e.target.value); const onChangeMessage = (e) => setMessage(e.target.value); const onClick = () => { alert(`${username} : ${message}`); setUsername(''); setMessage(''); }; const onKeyPress = (e) => { i.. 2023. 10. 24. React_state 그리고 useState props는 부모로부터 받아오는 데이터다. 구조적으로 의존적이다. 그리고 가져온 데이터는 읽을 수만 있고 수정은 불가하다고 한다. 왜 수정이 불가한 걸까. 무튼 props의 데이터는 부모로부터 온다고 했고, 받아온 읽기 전용이라 했으니 데이터를 수정하고 싶으면 부모의 층위에서 데이터를 바꿔주어야 한다. state는 컴포넌트에서 바꿀 수 있는 값을 말한다. 따라서 부모 컴포넌트에서 state로 데이터를 바꿔준 다음, props로 내리면 자식 컴포넌트에서도 수정된 데이터를 받아올 수 있게 된다. 클래스형 컴포넌트로 state 사용하기 // App.js import Counter from './Counter'; const App = () => { return ; }; export default App; //... 2023. 10. 23. React_ 함수형 컴포넌트와 클래스형 컴포넌트 내용 출처 : 책 함수형 컴포넌트 // App.js import MyComponent from './MyComponent'; const App = () => { return ( React{' '} ); }; export default App; // MyComponent.js import PropTypes from 'prop-types'; const MyComponent = ({ principle, children, name, favoriteNumber }) => { return ( {' '} My first principle is to {principle}.{' '} {children}. My name is {name} ); }; MyComponent.defaultProps = { principle: '.. 2023. 10. 23. React_Tictacto mvp 만들기 import { useState } from "react"; function Square() { const [value, setValue] = useState(null); function handleClick() { setValue("S"); } return ( {value} ); } export default function Board() { return ( ); } 2023. 10. 18. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 728x90
