😮TIL 0118

[Review]

✔️ Re-rendering

• Redrawing the page when the state changes.
  --> The displayed screen seems like everything are linked to each other, but it's actually re-drawing the whole code for multiple times.

✔️ Button Click Event

 if(event.target.value && myPassword && myTitle && myContents){
        setIsActive(true)
      } else {
        setIsActive(false)
      }

• If the condition is true, the button's color changes into yellow.
• We're using event.target.value to make sure of all datas getting pre-saved into pre-save library.
• The data is currently inside the pre-saving zone, which will eventually be executed when all data are in.

✔️ Button / Cursor

background-color: ${(props) => props.isActive === true ? "yellow" : "none"};
  
  :hover {
    cursor: ${(props) => props.isActive === true ? "pointer" : "default"};
  }                     // 만약 false일떄 하려면 !props.isActive ? pointer ---
`;

• When {isActive} becomes true statement, the color changes into yellow.
• When all the information is put, the cursor changes into pointer so that the user can click the button and go on to the next stage.

✔️ Router Error

• If there are board-new page and board-detail page, same component could be used in both components.
• router.query.aaa will be activated in detail page, but errors occur in board-new page.
• The results can change by the pages.

✔️ Simple-Codes
/boards : View board lists (게시물 목록보기)
/boards/new : Post the board (게시물 등록)
/boards/:boardId : Detail pages (상세보기)

/boards/edit --> This doesn't work. There should be the board's own number, which is ID.
So it should go as: boards/:boardId/edit

/products : View product lists
/products/new : New product posted

• When naming the variables or functions, consider other users too.

---

[Map]

💭 Map is more efficient than for loop.

const classmates = ["Debbie","Dereck","Dmitri"]
classmates.map ((el) => ("Student" + el))

• el: element
• Approaching to elements inside the classmates array, and "student"+el eventually results:
  --> Student Debbie // Student Dereck // Student Dmitri

Same for objects

classmates.map((el)=>({name: ${name: `Student ${el.name}`}))

--> Making a new object and re-putting the object inside. (Triangle Form)

🖇 Connecting to HTML

const FRUITS = [
    { number: 1, title: "레드향" },
    { number: 2, title: "샤인머스켓" },
    { number: 3, title: "산청딸기" },
    { number: 4, title: "한라봉" },
    { number: 5, title: "사과" },
    { number: 6, title: "애플망고" },
    { number: 7, title: "딸기" },
    { number: 8, title: "천혜향" },
    { number: 9, title: "과일선물세트" },
    { number: 10, title: "귤" },
];

export default function MapFruitsPage(){
    const ccc = FRUITS.map((el)=>(<div>{el.number} {el.title}</div>))
    return(
        <div>{ccc}</div>
    )
}

• Or instead of putting {ccc}, directly writing const ccc code itself can be more efficient.

➰ Removing unnecessary brackets:

classmates.map((el)=> "Student"+el)

classmates.map((el)=>(name: `student + $(el.name)`)) 
  //--> wrong

const add 5 = ()=> {
  return {name: `student ${el.name}`}
  //--> Correct

• The user cannot delete the small bracket that encompasses {name}.

---

[Filter]

• When 3 values are being filted, there can't be more than 3 returned.
• The user may use filter precedingly then use map. The order doesn't really matter.

---

[Boards Checkbox / Delete]

import {gql, useQuery, useMutation} from '@apollo/client'
import styled from '@emotion/styled'

const FETCH_BOARDS = gql`
    query fetchBoards{
        fetchBoards{
            number
            writer
            title
            createdAt
        }
    }
`

const DELETE_BOARD = gql`
    mutation deleteBoard($number: Int){
        deleteBoard(number: $number){
            message
        }
    }
`

const Row = styled.div`
    display: flex;
`
const Column = styled.div`
    width: 20%;
`

export default function MapCheckboxDeletePage (){
    const [deleteBoard] = useMutation(DELETE_BOARD)
    const {data} = useQuery(FETCH_BOARDS)

    const onClickDelete = (event) => {
        deleteBoard({
            variables: {number: Number(event.target.id)},
            refetchQueries:[{query: FETCH_BOARDS}]
        })
    }

    return(
        <div>
            {data?.fetchBoards?.map((el)=>(
                <Row key={el.number}>
                    <Column><input type="checkbox"/></Column>
                    <Column>{el.number}</Column>
                    <Column>{el.title}</Column>
                    <Column>{el.writer}</Column>
                    <Column>{el.createdAt}</Column>
                    <Column><button id={el.number} onClick={onClickDelete}>삭제</button></Column>
                                                        {/* event handler */}
                </Row>
            ))}
        </div>
    )
}

📕 event.target.id
: Gets the written ID and request for deleting that row.

📔 Before using evemt.target.id,

• The data is deleted in database excel zone, but not in user's screen. To see that the row is deleted, the use had to refresh the browser.(refetch)

---

[Key / Index]

🔑 When the user checked the checkbox and deleted that row but the checkbox isn't getting deleted, use key.

• Key saves all data separately.
  --> To save the data in separate way, all data should contain it's own value.
  --> number is the only own value up there in the code since the number is created when the boards are created.
• Index cannot be insulted in key.
  --> Deleting is possible but the key still exists. --> Error occurs

---

[Algorithms - .reduce() and .slice() ]

🧀 slice

• Able to use in strings and arrays
• Can copy the array (slightly)

arr = [1,2,3,4];
arr.slice(1,3)
—>2부터 자르겠다

🥬 reduce

• Calculates all the data and returns them
• Only to use in arrays

arr = [2,3,4,5];
arr.reduce((cu, el) => {
//cu: current - piled data (누적값)
	console.log(cu, el);
	return cu+el
},0)
--> starts to pile up from this number = 0
sum;