20240328 react

리액트는 참 신기하다.

내가 수정하는 코드가 바로바로 동기화가 된다!

 

 

 

 

짠!

아주 부드러운 변화는 대부분 리액트라고 하셨는데

정말 그렇다.

나는 리액트를 맛보고 코딩이 즐거워졌다 ^^

 

신기신기~~>.<

 

 

after afternoon we're goint to learn about array of object!

import './App.css';

export default function App() {
  const foods = ['피자', '삼겹살', '불고기'];
  return (
    <div className='card'>
      <ul>내가 좋아하는 음식</ul>
        {
          foods.map((food, idx) => (
            <li>${food}</li>
          ))
        } 
        <button>메뉴 추가</button>
    </div>
  );
}

 

위 코드를 이용해서 서버를 띄우면,

 

이렇게 뜬다.

 

 

점점 빠르게 느껴지는 강의 속도... 어지럽다 헤롱헤롱!! 정신차리자~!

선생님 따라서 계속 코드를 작성해보니 나도 결과가 나왔다 두둥!

 

밑에 올린게 전체 코드

import { useState } from 'react';
import '../apps/App.css';


export default function User() {
  const initUsers = [{ id: 1, name: 'admin', email: 'admin@human.com' },
                     { id: 2, name: 'james', email: 'james@naver.com' }];
  const [users, setUsers] = useState(initUsers);
  return (
    <div className='card'>
      <h1>User List</h1>
      <table border={1}>    {/* {user.map 이하} = 자바 스크립트 코드 */}
      <tr><th>ID</th><th>name</th><th>email</th></tr>
        {
          users.map(user => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.email}</td>
            </tr>
          ))
        }
      </table>
      <br />
      <button onClick={() => {
        const id = prompt('id 값을 입력하세요');
        const name = prompt('name 값을 입력하세요');
        const email = prompt('email 값을 입력하세요');
        setUsers([...users,{id, name, email}]);
      }}>추가</button>
      <button onClick={() =>{
        const id = prompt('Id 값을 입력하세요');
        const newUsers = users.filter(user => user.id != id)
        setUsers(newUsers);
      }}>삭제</button>
    </div>
  );
}


// 사용자 리스트 화면
// 1. admin admin@human.com
// id 값 입력받고, name입력받고, email 입력받아 admin 아래에 추가하기
{/* 'for' with label in html '<label for~~>
<label for="jb-input-text">Input - Text</label> */}

 

이 코드 작성 시 서버에 보이는 화면은 아래와 같다 !

 

이쁘게 모양 잘 나왔다 ^^

선생님께서 중간중간 코드 수정을 직접 해보라고 하신다 ^^;;

 

이럴 때 실력이 느는것이다...!!

 

 

오늘의 과제는 '리액트'로 '계산기' 만들기!

--1교시--
think like box componant. when you figure out making a new tag.
Start the letter Capital.


--2교시--
react 
card 시연
proops 시연

App04_counter.jsx
1. 이벤트 처리과정
2. 이벤트 처리 되었을 때 바뀌는 부분
react 참조형변수 
let newNumbers = [...numbers, count+1, ' ']; - 리액트 화면 갱신

-7교시-
parameter
line 15 : const MainContainer
line 12 : const ButtonContainer
line 16 : const Button 
line 17 : const CalButton 
line 18 : const ZeroButton 


계산기 만들기
App99_calculator
import { useState } from 'react';
import logo from '../logo.svg';
import './App.css';
import Calculator from '../components/Calculator';

export default function App() {
  return (
    <div>
      <Calculator />
    </div>
  );
}

Calculator
import React, { useState } from 'react';
import '../apps/App.css';

const Calculator = () => {
  const [displayValue, setDisplayValue] = useState('');
  const [result, setResult] = useState('');

  const handleClick = (value) => {
    if (value === '=') {
      calculate();
    } else if (value === 'C') {
      clearDisplay();
    } else {
      setDisplayValue(prevValue => prevValue + value);
    }
  };

  const calculate = () => {
    try {
      const sanitizedInput = displayValue.replace(/[^-()\d/*+.]/g, '');
      // eslint-disable-next-line no-eval
      const calculatedResult = new Function(`return ${sanitizedInput}`)();
      setResult(calculatedResult.toString());
    } catch (error) {
      setResult('Error');
    }
  };

  const clearDisplay = () => {
    setDisplayValue('');
    setResult('');
  };

  return (
    <div className="calculator">
      <input
        type="text"
        value={displayValue}
        onChange={(e) => setDisplayValue(e.target.value)}
        className="calculatorDisplay"
        readOnly
      />
      <div className="keypad">
        <button className="keystyle" onClick={() => handleClick('7')}>7</button>
        <button className="keystyle" onClick={() => handleClick('8')}>8</button>
        <button className="keystyle" onClick={() => handleClick('9')}>9</button>
        <button className="keystyle" onClick={() => handleClick('/')}>/</button>
        <br />
        <button className="keystyle" onClick={() => handleClick('4')}>4</button>
        <button className="keystyle" onClick={() => handleClick('5')}>5</button>
        <button className="keystyle" onClick={() => handleClick('6')}>6</button>
        <button className="keystyle" onClick={() => handleClick('*')}>*</button>
        <br />
        <button className="keystyle" onClick={() => handleClick('1')}>1</button>
        <button className="keystyle" onClick={() => handleClick('2')}>2</button>
        <button className="keystyle" onClick={() => handleClick('3')}>3</button>
        <button className="keystyle" onClick={() => handleClick('+')}>+</button>
        <br />
        <button className="keystyle" onClick={() => handleClick('0')}>0</button>
        <button className="keystyle" onClick={() => handleClick('.')}>.</button>
        <button className="keystyle" onClick={() => handleClick('=')}>=</button>
        <button className="keystyle" onClick={() => handleClick('-')}>-</button>
        <br />
        <button className="keystyle" onClick={() => handleClick('C')}>C</button>
      </div>
      {result && <div className="resultCalculator">{result}</div>}
    </div>
  );
};

export default Calculator;

 

useState 별도의 관리 - Hook 낚아채는 것 /  내일 배울 것 : useEffect 생애주기 관리
component 한테 넘겨줄 때
props