노마드코더15 3. Getting Username ※username 값을 받아 브라우저에 표시 -로그인 상태 여부 확인 -로그아웃 버튼 추가 -삼항 연산자를 이용해서 true(로그인) false(로그아웃)마다 브라우저에 표시되는 div 분리 componenet -Input.JSX -Button.JSX module -Login.JSX css -List.css module - Login.JSX import React, {useState} from 'react' import '../css/List.css' import Input from '../component/Input' import Button from '../component/Button' function Login() { const [loginValue, setLoginValue] = useState.. 2024. 1. 24. 2. Form Submission ※ onSubmit 함수로 입력값 form으로 제출 -제출했을 시 input 값 초기화 -maxLength로 입력 길이 지정 -required로 필수 입력 지정 -preventDefault()로 새로고침 방지 componenet -Input.JSX -Button.JSX module -Login.JSX css -List.css component - : maxLength로 입력 길이 지정, required로 필수 입력 지정 import React from 'react' function Input({className, type, value, onChange, maxLength}) { return ( ) } export default Input module - : form으로 입력값 제출, 새로고침 방지, in.. 2024. 1. 24. 1. Input Values ※입력값을 받아 콘솔 창에 출력하기 -Input 컴포넌트 생성 -Button 컴포넌트 생성 -Login 모듈 생성 componenet -Input.jsx -Button.jsx module -Login.jsx css -List.css component - : Input 컴포넌트 생성 import React from 'react' function Input({className, type, value, onChange}) { return ( ) } export default Input component - : Button 컴포넌트 생성 import React from 'react' function Button({className, name, onClick}) { return ( {name} ) } export.. 2024. 1. 24. 이전 1 2 3 4 다음
