[REACT_MEMO] 파워노트10

# Handing Events
? Event = 특정 사건
이벤트를 처리하는 것 = 이벤트를 핸들링 한다
어떤 이벤트가 발생했을때 해당 이벤트를 처리하는 함수 = Event Handler(이벤트 핸들러)
계속 듣고있다는 의미로 Event Listener라고도 부른다.

함수의 대한 bind는 자바스크립트에서도 나오는 동일한 이슈로
반드시 넣어줘야한다.
https://ko.javascript.info/bind

함수 바인딩

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Function.prototype.bind() - JavaScript | MDN

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

# Conditional Rendering 컨디셔널 렌더링
리액트로 개발 할 때 자주 사용되는 기능

Condition = 조건
Conditional Rendering = 조건에 따른 렌더링(조건부 렌더링)
결론 적으로 어떠한 조건에 따라서 렌더링이 달라지는 것
즉 조건문이라고 이해
(true or false)


// truthy
true
{} (empty object)
[] (empty object)
42 (number, not zero)
"0", "false" (string, not empty)

// false
false
0, -0(zero, minus zero)
0n (BigInt zero)
'', "", `` (empty string)
null
undefined
NaN(not a number)


#렌더링 막기
null리턴하면 렌더링 되지 않음

 

 

 

 

 

# List and Key
- key의 값은 같은 List에 있는 Elements사이에서만 고유한 값이면 된다.
ex) 학교별로 학생당 학번이 부여된다.
학번이 같아도 학교가 다르기 때문에 문제가 없다.
즉 key값은 학번이고 같은List에 있는 Elements는 각 학교들로 볼 수 있다.

 

map() 함수 안에 있는 Elements는 꼭 Key가 필요하다.
리액트 개발을 처음할때 가장 많이 하는 실수로 키값을 넣지 않는것.