Chapter 01: Taste "React" - JSX, Babel, Multi Elements, Re-rendering, Event Handling, Component State, Hook and Ref

The goals

💪🏻What & Why?

✌🏻Basic knowledge of React

👍🏻Try React!

 

 

DOM (Document Object Model)

메모리에 웹페이지 문서구조 표현->DOM으로부터 element개념이 등장

 

CDN (Content Delivery Network)

웹에서 사용되는 다양한 컨텐츠 (리소스)를 저장하여 제공하는 시스템

 

createElement를 이용해서 첫 인자로 "h1"을 주고 뒤에 props가 들어가는 부분에는 object로 각각 className과 children을 할당하고 또 "Hello, world!" 라는 값을 할당했는데 결과를 보면 <h1>태그 안에 class로 "title"이 들어가있고 children으로 "Hello world"할당.

과연 우리가 임의로 설정한 props.children이 적용된 것일까 아니면 따로 꺼내서 할당한 "Hello world'가 들어간 것일까

Even if we give props.children still just children works first.

And we can give many props.children there is no limit!

 

JSX

Babel -> JS compiler

 

We put 'React.createElement' as children and give children again.

And we can use as many children as we want.

So here we got the result

 

React Fragment

cf) <div></div> 

 

 

Custom Element

If we use it with small letter 'p' then it doesn't work, but if we use it with big lettet 'P' then it works!

 

Interpolation

Use JSX syntax and Javascript syntax together

 

 

Quick Review

 

Re-rendering

 

Math.floor(Math.random()+ (10-1) + 1) to get the random number between 1 and 10.

 

 

 

event.target.value -> bring our typing value

 

 

We separated className, style and children and showing children only on the screen.

Then we got the result like this.

 

Now we removed 'className' from props so it would be in '...rest'

So even if we only mention "className={'button'}{...rest}' still it works the same.

But if we change the order of props, then it doesn't work like above.

Because we already have className prop in '...rest' so we try to override it.

 

react가 스스로 관장하는 내에서 컨트롤이 들어가면 좀 더 효율적일 수 있기 때문

Error boundary

What is the purpose of making Error Boundary Component?

It works as like 'Catch and Error' syntax, so when the error occurs it will catch the error and in that case, we can utilize Fallback component.

 

 

Key and Value

If we set children value as {todo.value} then randomly when the item is selected by the set interval still this effect will follow the exact value, but if we set it {todo.index} then this effect just stays in the same spot and value would be keep changing

 

Managing states.

The more we lift up, the more we drill down -> making hard to manage the states of components.

If we have some components under the <app></app> then they are just brother relationship. (sibling)

And when they are just in sibling relationship they can't know what value they've got each other.

So in that case, we lift up value from each component to the parent component and we can drill it down to use it in another sibling component.

 

API call (Fetch API)