[TIL] Day41- Component Design(3)

web서버에서 Day36을 3번 써서 날짜를 제대로 돌려놓고 시작

• useRef 의 사용법

useRef 는 querySelector처럼 DOM에서 가져올 수 있다.
DOM기반 라이브러리를 사용해야할때 써야함
컴포넌트를 가져오는게 아니라 DOM을 가져와야할 때 useRef를 이용해야한다.
DOM 메소드를 어쩔 수 없이 써야할 때 사용하면 됨

사용하는 경우
focus
text selection
media playback
에니메이션 적용
d3.js, greensock 등 DOM 기반 라이브러리 활용

오늘은 Autocomplete / Click to edit 컴포넌트를 제작했다.
<div>&times</div> 이걸 작성하면 X(닫기)표시가 뜸
event.target.value 는 input이나 select 같은 이벤트의 값으로 나옴 잊지말자
onClick={() => function()} onClick 이벤트가 발생할때 함수가 실행
onBlur={function} 포커스가 사라질때 이벤트 발생
{istrue ? true : false} 조건부 랜더링 istrue 가 참이면 true 거짓이면 false
{istrue && true } 조건부 랜더링 istrue 가 참이면 true 거짓이면 무시

Styled-Component 추가적인 사항은 codestates를 더 살펴봐야할듯 하다