๐Ÿฑ Week3 Summary

j00b33ยท2022๋…„ 1์›” 29์ผ
0

CodeCamp FE 05

๋ชฉ๋ก ๋ณด๊ธฐ
15/33

๐Ÿ’ [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)

profile
์ฝฑใ…†l

0๊ฐœ์˜ ๋Œ“๊ธ€