😫 TIL 0117

[Review]

• Basically when the user requests backend computer for submiting the posts, there appears a way called API for two computers to communicate.
• Then the backend computer puts the data inside the data base and figures out whether the data is successfully saved or not.
• Considering the result, backend computer responses to frontend computer.
• If (data) is true, then the data is printed. But if the data is false, the data can not be saved nor displayed.
• Global state is a state that can be used anywhere in the pages.
  --> const {data} is considered to be global states.

---

[Optional-chaining vs. Nullish-coalescing]

💡 Nullish-coaliescing: data ?? data.fecthProfile

• If data is false, the data is activated.

• It's the opposite concept from optional chaining .

• data || "Hello"
  --> If the data is literally false, the code is executed

• data ?? "Hello"
  --> If the data is empty, null, or undefined, the code is executed.

False Types:

0 --> All real numbers except zero are true.
'' --> Things that are empty are also considered "false"

• This is different from " ", which contains "space".
  false
  null --> Empty
  undefined --> Empty
• ex) If the user declared a as 3 but then he wants to delete it, he uses a=undefined. This is used especially when the user is working with other co-workers. Usually people use "undefined" rather than null.
  NaN --> Not a Number

Example Codes

true && "Hello"
-->'철수입니다.'
"ㅇ" && "Hello"
-->'철수입니다.'
//The data is true since it contains string

10 && "Hello"
--> '철수입니다.'
//This works since the number isn't zero

false || "World"
-->'영희입니다.'
"" || "World"
-->'영희입니다.'
12 || "World"
-->12
//Since the data is true and it's Nullish coaleascing, it doesn't work. It works only when the data is false. 
0 || "World"
-->'영희입니다.'
20 || "World"
-->20

null ?? "Hi"
'훈이입니다.'
undefined ?? "Hi"
'훈이입니다.'
0 ?? "Hi"
0
--> Hi는 null이나 undefined 일때만 실행됨

---

[Folder Structure]

💡 Container/Presenter
Presenter is the part where users can see the displayed screen.
Javascript zone becomes container and JSX zone becomes presenter.

• For the naming, the period matters only at the end of the file's name since it decides which kind of file it will turn out to be.

• When the user executes the source code, presenter goes into container's return statement. So eventaully the two files are connected via importing and exporting.

import BoardWriteUI from "./BoardWrite.presenter"

➡️ So here, the user is importing the presenter to container.

If the variables aren't used, there happends an error even though two files are connected successfully.
--> This means that the functions and variables inside presenter doesn't work in contianer. Therefore, the user must declare in container, which is the parent component.

🔔 Here comes the idea of parent component and child component. The container is like the head of the whole function, which means it's the most important part.
--> So to connect every single data of these compoents, props are needed. Also, there is no way for the parent components to directly inherit variables and functions to their child components.

---

---

Props

: A function that the parent functions is inheriting the variables and functions that they contain to their child components.

🛠 How it works

: After connecting thier child components in return statement, the variables and functions are sub-declared. An object is created, and the parent function goes into the object as a form of value. Here, the key is "props".
ex) props = {aaa: onChangeWriter, bbb: {writer}}
--> So the function is now available to use.

React
: The flow of data is in one way, one direction.
From top to bottom, parent component to child component.

Angular
: The flow of data is bidirectional.
But this makes hard for users to catch the flow.

Emotion component
Emotion is also a component, so it is possible to get through components.
For emotion, presenter becomes their parent component and there are bunch of emotion child components.

[Commons]

---

[Practice Codes]

⬇️ Container-Presenter

import BoardWrite from '../../src/components/units/board/write/BoardWrite.container'
export default function GraphqlMutationArgsInput(){

    return (
        <BoardWrite/>
    )

}

⬇️ Container.js

import axios from 'axios'
import {useState} from 'react'
import { useMutation} from '@apollo/client'
import BoardWriteUI from './BoardWrite.presenter'
import {CREATE_BOARD} from './BoardWrite.queries'

export default function BoardWrite(){
        const [isActive, setIsActive]=useState(false)

        const [myWriter, setMyWriter] = useState("")
        const [myTitle, setMyTitle] = useState("")
        const [myContents, setMyContnets] = useState("")

    
        const [aaa, setAaa] = useState("")
        const [qqq] = useMutation(CREATE_BOARD)
    
        const zzz = async () => {
            
        	const result = await qqq({ 
            	variables: { writer: myWriter, title:myTitle, contents: myContents } 
            })
            console.log(result.data.createBoard.message)
            setAaa(result.data.createBoard.message)
        }
    
        const onChangeMyWriter = (event) => {
            setMyWriter(event.target.value)
            if (myWriter && myTitle && myContents){
                setIsActive(true)
            }
        }
        const onChangeMyTitle = (event) => {
            setMyTitle(event.target.value)
            if (myWriter && myTitle && myContents){
                setIsActive(true)
            }
        }
        const onChangeMyContents = (event) => {
            setMyContnets(event.target.value)
            if (myWriter && myTitle && myContents){
                setIsActive(true)
            }
        }

        return (
           <BoardWriteUI
           bbb={aaa}
           ccc={zzz}
           eee={onChangeMyWriter}
           fff={onChangeMyTitle}
           ddd={onChangeMyContents}
           isActive={isActive}
           />
        )
       
    }

⬇️ Presenter.js

import * as S from './BoardWrite.styles'

export default function BoardWriteUI(props){

    return (
        <>                                 
            작성자: <S.MyInput type="text" onChange={props.ddd} /><br />
            제목: <S.MyInput type="text" /><br />
            내용: <S.MyInput type="text" /><br />
            <S.MyButton onClick={props.ccc} ggg={props.isActive}>GRAPHQL-API 요청하기</S.MyButton>
            <div>{props.bbb}</div>
        </>
    )
}

⬇️ Queries.js

import {gql} from '@apollo/client'

export const CREATE_BOARD = gql `
mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents){
        _id
        number
        message
    }
}
`

⬇️ Styles.js

import styled from '@emotion/styled'

export const MyInput = styled.input``

export const MyButton = styled.button`
    background-color: ${(props) => props.ggg === true ? "yellow" : "none"};
`