🍒 [DAY 11]

[Event Bubbling]

*If the user wants to click anywhere of the box to move to the other page, use event bubbling.

: Executing from child component to parent component. (자식에서 부모로 이벤트 전파)
Meaning, even if onclick function is bined to parent, outside onclick is also executed when the clicking child.

• event.currentTarget.id
  Party of event bubbling. (당사자)
  --> eventTarget is the thing the user directly clicked.
  --> currentTarget is declaring the function directly.

• event.capturing
  Exectued from parent to child.

[Scope/Scope-Chain]

Scope: {}
Scope-Chain: Happens when the key cannot find its value inside its scope when doing "console.log". By scope-chaining, the key can find it's value in the outside scope.

---

🍊 [DAY 12]

[Initial Value]

const [count, setCount] = useState(0)
~
setCount(count + 1)
When the user types 0 in the intial value in useState ==> no error.
But when the user doesn't type anything in the initial value in useState, error occurs.

REASON:

Typescript deduces the type. If there isn't any types delclared, typescript deduces as "undefined" type.
--> Since it deduced as undefined, the typescript is looking for undefined but since (count + 1) is number type, it makes error.
Typescript deduces based on the initial value, so there should be 0 to tell that the state will be in number form.

[Prev]

To make that code upside to be working, the user must use prev method.

Refactoring a function

setCount((prev) => prev + 1)
setCount((prev) => prev + 1)
setCount((prev) => prev + 1)
setCount((prev) => prev + 1)
setCount((prev) => prev + 1)

Prev is original count value. If there is any saved values inside count, it is accumulating the saved values inside the pre-saving area.

To be specific,

• When the user commands the computer to add up 1 to the count, that countValue '1' is saved to the pre-saving zone.
• When second count + 1 is commanded, it is added up to the previous count value, which is 1; so ultimately count becomes 2. And so on and on and on...
• As a result, this code makes 5 count ups at a time.

---

🧀 [DAY 13]

[Layout Compromise]

• Layout is taking the role of whole UI structure of the project.
  --> Basically dividing the display screen in to header, navigation, banner, and footer. (or can be anything else)
• Can maintain a clear and simple structure in coding.

{props.children}

• Automatically sent.
• It's used within body tag inside the main layout.
  
• The main layout is fixed and the body contents are changing as the user moves the page. Body contents are the components that are shown on the screen.

---

🥒 [DAY 14]

[Pagination]

<span onClick={onClickPage} id="1"> 1 </span>
<span onClick={onClickPage} id="2"> 2 </span>
<span onClick={onClickPage} id="3"> 3 </span>

⬇️ Originally, we can make like this separately, but the code below is much more simple. ⬇️

{new Array(10).fill(1).map((_, index) => (
                <span  key={index + startPage} onClick={onClickPage} id={String(index + startPage)}> 
                {` ${index + startPage} `}
                </span>
            ))}

➡️ Here, the developer is using new Array() to make a new array that will be put into the page. Also, using state and setState, the user can go back and forth of pagination.

const lastPage = Math.ceil(dataBoardsCount?.fetchBoardsCount / 10)
Also to delete the paginations that don't contain any data should be deleted; so there we used Math.ceil() to round up the number of data and get the needed number of pagination.

[state, setState lifting]

What if one wants to show child component 1 's state in child component 2?
--> Since they aren't in a relationship of parent and child, the state must be spread through parent component by lifting state up. Then, it can be used by using props in child components.

---

🫐 [DAY 15]

[Shallow copy / Deep copy]

• When the user tries to copy something -- variables, arrays, objects, etc -- the original doesn't change but the copied changes.
• For arrays and objects, the placements are ㄴsaved in addresses, so if the user makes a change in copied one, the original one also changes.
• There must be a new area for copied array/object to be saved.
  --> So there we need JSON.stringify to make the array or object into string form. Then, with JSON.parse to make that string form into array/object form again.
• Basically, the copied string becomes a totally new object.

[Infinite Scroller]

Used with library. (react-infinite-scroller)

• hasMore = (true)
  --> Meaning, there are more data left to call.
• loadMore
  --> A function that is executed when the user scrolls down.
• https://www.npmjs.com/package/react-infinite-scroller