리액트공부4 [React] 03. 상태 만들기 const [userInput, setUserInput] = useState({ "current-savings": 10000, "yearly-contribution": 1200, "expected-return": 7, duration: 10 }); 하나의 상태를 만들었다. 모든 input에 대한 상태를 만들어야 하므로 객체형태로 만들고 각각의 키값과 value를 설정하였다. const inputChangeHandler = (input, value) => { setUserInput((prevInput) => { return{ ...prevInput, [input] : value, }; }); }; 이전 상태를 기반으로 상태를 새롭게 업데이트 하기위해 스프레드 연산자를 사용하였고, 동적으로 키값을 정하기 위.. 2023. 8. 28. [React] 02. 이벤트 처리하기 const submitHandler = (event) => { event.preventDefault(); // 다시 로드되는 것을 막음 //... console.log("SUBMIT"); }; // Calculate 버튼을 눌렀을 경우 실행됨 const resetHandler = () => { //... console.log("RESET"); }; // Reset 버튼을 눌렀을 경우 실행됨 const inputchangeHandler = (input, value) => { console.log(input, value); }; // 사용자가 input 창에 입력을 하면 실행됨 현재는 console.log()를 통해 콘솔창에 출력하는 기능밖에 없지만 Usestate, 정보 내리기, 올리기 등을 통해 기능을 .. 2023. 8. 27. [React] 01. 사용자 컴포넌트로 분할하기 헤더, 폼, 테이블은 중요한 논리적 구성 요소이기에 별도의 사용자 컴포넌트로 분할한다. import logo from '../../assets/investment-calculator-logo.png'; const Header = () => { return ( Investment Calculator ); }; export default Header; //Header.js 파일 const ResultsTable = () => { return ( Year Total Savings Interest (Year) Total Interest Invested Capital YEAR NUMBER TOTAL SAVINGS END OF YEAR INTEREST GAINED IN YEAR TOTAL INTEREST GAINE.. 2023. 8. 27. [React] 00. 연습 프로젝트를 통해 React 학습 시작 Udemy에 있는 React 강의를 여태까지 섹션 8까지 들으면서 기본적인 바닐라 자바스크립트, JSX 또한 특수한 React의 구문에 대해 학습하였다. 이제부터 웹 어플리케이션을 하나 완성시켜가면서 배웠던 것을 복습하겠다. import logo from './assets/investment-calculator-logo.png'; function App() { const calculateHandler = (userInput) => { // Should be triggered when form is submitted // You might not directly want to bind it to the submit event on the form though... const yearlyData = []; .. 2023. 8. 26. 이전 1 다음
