🥜 TIL 0111

[React]

🌿 yarn install

• Makes new node_modules

Post Number

• When the user types yarn dev, terminal gives a link which the user can enter through command+click. http://localhost:3000 Here, 3000 is the post number. This number tells the user that this program is waiting for user's join. This post numbers can be checked in online games that groups of people join together but not for single play games. The numbers are between 0 to 65535.

# Why do people use react?
React is a cross-platform, which is written on react native component. It can be operated in both android and ios.
React.js - Facebook, Instagram, Twitter, Netflix, etc.
React.native - Faceboook, Instagram, Airbnb, Uber Eats, etc.
React + electron - Slack, etc.

---

🍀 [Component]

: Componentize all the functions and UIs to enable re-using it.

• If the user wants to change all the blue titles into red titles, the user can control the origin component of the whole title. This basically means that rest of the components are connected to the original component, so that the user can make an easy change inside.

Class form vs. Function form

*Class Form
: It is the most common way to use and the form itself can be saved permanently. (Savings fixed) The variables themselvse are components. Most of developers used class form components since functional form was unable to save the variables permanently.

*Functional Form
: The variables cannot be re-used and can change. But due to hooks, it became possible for functional forms to be a component. Functional components are much more simple and it doesn't require long codes than class components. Here, the variables of the component are called states.

Ex) const [state, setState] = useState()
--> const is different from the const we used in javascript. This const is considered as a kind of forumal. The parameters take initial values. state can't be changed directly by itself so it is changed through setState.

---

🌷 [state Count Up]

import {useState} from 'react'

export default function LetCount(){

    const[count, setCount]= useState(0)


    function zzz(){
        setCount(count + 1)
    }

    return(
        <div>
            <div>{count}</div>
            <button onClick={zzz}>Count Up</button>
        </div>
    )    
    }

--> Line 1: This decalres that the user is using useState that is provided from react.
--> setCount is having a function for count: The value of count changes through setCount.
--> Here, the initial value of useState is 0. SetCount is the function to change the value of count.
--> The function goes much simple and perhaps the change inside the function is clear and easy.

---

🌹 [state Signup Sheet]

import {useState} from 'react'
export default function StateSignup(){
    const[email, setEmail] = useState("")
    const[password, setPassword] = useState("")
    const [ mailError, setEmailError  = useState("에러메시지가 없습니다")

    function aaa(event){
        console.log(event.target.value)
        setEmail(event.target.value)
    }
    function bbb(event){
        setPassword(event.target.value) 
    }
    function ccc(){
        console.log("email: " + email)
        console.log("password: " + password)
        //checking whether the function is correctly responding.
        
        
        if (email.includes("@") ===false){
            setEmailError("이메일에 @가 없습니다. 잘못된 이메일이네요") }
        else {
            alert("회원가입을 축하합니다")
        }
    }

    return (
        <div>
            이메일: <input type="text" onChange={aaa}/> <br/> 
            <span>{emailError}</span> <br/><br/>
            비밀번호: <input type="password" onChange={bbb}/> <br/>
            {/* <span>{mypwError}</span> <br/><br/> */}
            <button onClick={ccc}>회원가입</button>
        </div>
    )
}

-->Initial value is emtpry string for states of email and password.
-->event: event-handler inserts the information of functions that start with -->on to event.
ex) aaa(event) => value from email input goes to the function aaa().
-->setEmail(event.target.value): saving the information of the target to email's state.

-->event.target brings whole < input type="text"/> tag.
-->console.log(event.target.value) -> Gets the value of the target's tag.
-->onChange(contains onInput function; They are used similarly) != onchange(html)
--> Variables that start with use are called hooks, and hooks help function to form components and save variable permanently.

---

🌻 [How Things Work]

• Backend computer is like Excel.
• state is my own variable savings.
• After receiving all the informations from the user, state saves them and that state is sent to backend computer.
  --> This is why state must contain the information and save it permanently to be sent to backend computer.
• To use state, the user must declare state with const. Then the user checks how const changes and turns out by using function().

🍇 [Algorithms - Array]

Array Command Functions:
.push => add data at the end of array
.unshift => add data at the first place in array

.pop => deleting the last data in array
.shift => deleting the first data in array

.indexOf() => getting index number of specific data.

• If the user tries to get index that isn't in the array, -1 is printed.
  (use .indexOf())

let array = ["red","yellow","green"]
	array,indexOf(4)
    outcome=> -1

.includes() => figuring out the presence of specific data. (Boolean type)

array.includes("yellow") 
outcome=> True

Notice

• These commands shouldn't be written with memory. It's better to write the code by googling < nvm javascript array >
• Name : 철수 = key : value