[React] 간단실습.01 (로그인, 할일목록, 로또, 바꾸기)

 

 

1. 사용자의 로그인 상태에 따라 다른 메세지를 보여주는 컴포넌트 작성하기

>> Name을 적고 Login을 클릭해야 로그인 됨

import React from "react";

class Login extends React.Component {

    constructor(props) {
        super(props);
        this.state = { name: '', isLog: false };
        this.handleLogin = this.handleLogin.bind(this);
        this.handleLogout = this.handleLogout.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }


    handleLogin() {
        this.setState({isLog: true})
    }
    handleLogout() {
        this.setState({isLog: false})
    }
    handleChange(event) {
        this.setState({name: event.target.value});
    }
    handleSubmit(event) {
        if (this.state.isLog) {
            alert(this.state.name + '님 하이용');
            this.setState({isLog: true})
        } else {
            alert('로그인 먼저 해주셍');
        }
        event.preventDefault();
    }


    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <h2> [로그인] </h2>
                    <label> Name:
                        <input type="text" value={this.state.name} onChange={this.handleChange} />
                    </label>
                    <input type="submit" value="submit" />
                </form>
                {this.state.isLog ? (
                        <button onClick={this.handleLogout}> LogOut! </button>
                    ) : (
                        <button onClick={this.handleLogin}> LogIn! </button>
                    )
                }
            </div>
        );
    }

}

export default Login;

 

 

 

2. 배열에 있는 데이터로 리스트 아이템 생성하기

>> add를 클릭하면 리스트 밑에 추가됨

import React, {useState} from "react";


const ListItem = ({id, text}) => {
    return <li key={id}> {text} </li>
};

const ListSet = ({data}) => {
    return (
        <ul>
            {data.map((item) => (
                <ListItem key={item.id} id={item.id} text={item.text} />
            ))}
        </ul>
    );
};

const List = () => {

    const [items, setItem]  = useState([
        {id:1, text:'hi'}, 
        {id:2, text:'bye'}
    ]);
    
    const [input, inputValue] = useState('');

    const handleChange = (event) => {
        inputValue(event.target.value);
    };
    const handleAdd = () => {
        const newItem = {id: items.length+1, text:input};
        setItem([...items, newItem]);
        inputValue("");
    };

    return (
        <div>
            <h2>[리스트 생성 및 추가]</h2>
            <input type="text" value={input} onChange={handleChange}/>
            <button onClick={handleAdd}> add! </button>
            <ListSet data={items} />
        </div>
    )
}


export default List;

 

 

 

3. 로또 수동 // 자동  

[수동] 1부터 45까지만 기입가능, 빈값X, 중복X

[자동] 숫자 6개 랜덤지정, 중복X

import React, { useState } from "react";

const LottoLast = () => {
    const [mode,setMode] = useState("self");
    const [numbers, setNumbers] = useState([]); 
    const [isDuplicate, setIsDuplicate] = useState(false); //중복검사를 위한
    
    //수동
    const handleChange = (event, index) => {
        const newNumbers = [...numbers];
        const inputValue = Number(event.target.value);

        if (inputValue >= 1 && inputValue <= 45) {
            newNumbers[index] = inputValue;
            setNumbers(newNumbers);
        } else {
            alert("1부터 45 사이 숫자 넣어주세용")
        }
    };

    const handleSubmitLotto = () => { //중복 빈값 검사 // set: 같은 값 저장할 수 없음
        if (numbers.length === new Set(numbers).size) { //중복안되는
            setIsDuplicate(false);
            const sortedNumbers = numbers.sort((a,b) => a-b);
            if (sortedNumbers.some(numbers => !numbers)) { 
                //썸: 배열안에있는일부분이 괄호속에있는걸만족하는지안하는지 확인해줌
                //화살표함수 안에 느낌표 뒤집개
                //어떤값이 0 또는 false인지 확인해주는거
                // ![0,1,2,3,4] <- false // ![T,F,T,null,undef] <- ture
                // 숫자가 하나라도 들어있으면 false
                alert("숫자를 모두 입력해주세용")
            } else {
                alert("수동뽑기: " + sortedNumbers.join(", "));
            }
        } else { //중복되어버린
            setIsDuplicate(true);
            alert("중복된 숫자가 있어버리네용")
        }
    };

    //자동
    const createRandomNumber = () => {
        const randomNumber = [];

        while(randomNumber.length <6) {
            const number = Math.floor(Math.random()*45)+1;
            if(!randomNumber.includes(number)) {
                randomNumber.push(number); //데이터가 명확하게 해당 부분에서만 사용됨 (... 쓰기를 권장)
            }
        }
        const sortedNumbers = randomNumber.sort((a,b) => a-b);
        setNumbers(sortedNumbers);
    };

    //라디오버튼 온체인지함수
    const handleModeChange = (event) => {
        setMode(event.target.value);
        setNumbers([]);
        setIsDuplicate(false);
    };

    return (
        <>
        <div>
            <h2> [로또!] </h2>
            <label><input type="radio" value="self" onChange={handleModeChange} checked={mode === "self"}/> 수동 </label>
            <label><input type="radio" value="auto" onChange={handleModeChange} checked={mode === "auto"}/> 자동 </label>
        </div>
        <div>
            { mode === "self" && (
                <>
                <p> [수동] 숫자 입력하숑: </p> 
                {[0,1,2,3,4,5].map((index) => (
                    <input key={index} type="number" min="1" max="45" value={numbers[index] || ""}
                    onChange={(event) => handleChange(event, index)}></input>
                ))}
                <button onClick={handleSubmitLotto}> 제출! </button>

                {isDuplicate && (
                    <p> 중복된 숫자가 있어용 </p>
                )}
                </>
            )}
            { mode === "auto" && (
                <>
                <p> [자동생성] </p> 
                <button onClick={createRandomNumber}> Click! </button>
                {numbers.length > 0 && (
                    <>
                        <p> 뽑힌 숫자: </p>
                        {numbers.map((number) => (
                            <span key={number}> {number} </span>
                        ))}
                    </>
                )}
                </>
            )}
        </div>
        </>
    )

};

export default LottoLast;

 

 

 

4. 언어를 선택하면 인삿말이 달라지는

import React, {createContext, useContext, useState} from 'react';

const LanguageContext = createContext();

function LanguageProvider({children}) {
    const [lang, setLang] = useState('en');

    const switchLang = () => {
        setLang(prevLang => prevLang === 'en' ? 'ko' : 'en');
        //이전 상태를 체크 //만약 이전 언어가 'en'라면 'ko'로 바꿔줘
    };

    const handleChange = (event) => {
        setLang(event.target.value);
    }

    return (
        <LanguageContext.Provider value={{lang, switchLang, handleChange}}>
            {children}
        </LanguageContext.Provider>
    );
}

function SelectLang() {
    const {lang, handleChange} = useContext(LanguageContext);
    return (
        <select onChange={handleChange}>
            <option value="en">English</option>
            <option value="ko">한국어</option>
        </select>
    )
}

function SayHello() {
    const {lang} = useContext(LanguageContext);
    return <p> {lang === 'en' ? 'Hi' : '안뇽'} </p>;
}

function Language() {
    return (
        <>
            <h2>[언어 바꾸기]</h2>
            <LanguageProvider>
                <SelectLang />
                <SayHello />
            </LanguageProvider>
        </>
    );
}

export default Language;