[ReactHooks] useRef, Time함수, 3항연산자, 렌더링

1. useRef

useRef는 2가지 쓰임이 있다.

 

• dom에 직접 접근할때
• hooks에서 this의 속성들을 ref로 한다.

      -state는 return이 다시 실행되지만 ref는 다시 실행안된다.

      -즉 값이 바껴도 렌더링을 다시 하고싶지 않은부분은 ref로 처리해준다.

 const timeout=useRef(null);
   const startTime=useRef();
   const endTime=useRef();
   
 startTime.current=new Date();
  clearTimeout(timeout.current);

이런식으로 사용해준다.

단 current를 써줘야 한다.

 

 

2. Time 함수

• setTimeout

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

-func|code : 실행하고자 하는 코드

-delay : 실행 전 대기시간

 

• clearTimeout

myVar = setTimeout("javascript function", milliseconds);

-setTimeout()으로 설정된 타이머를 지운다.

 

 

 

3. 3항 연산자

return 값안에서 if 문이 사용은 가능하지만 문법이 복잡해서 3항연산자를 자주 사용한다.

 

{result===0 ? null :  <div>시간: {result}ms</div>}

이렇게 {조건문 ?  참값 : 거짓값} 사용된다.

 

4. array2=[...array, 2]

state값중 배열을 변경시킨는 과정에서 push함수를 쓰면 state 변경이 일어난지 인식하지못한다.

그래서

array2=[...array, 2]

이런식으로 사용해서 새로운 배열을 만들어 줘야한다.

 

5. 렌더링 효율적

react 사용시 작은것하나 렌더링하는 작업을 하는데 다른것들도 같이 렌더링이 되는 현상이 종종발생한다.

• shouldComponentUpdate
• PureComponent
• memo(hooks인경우) 

를 이용해서 방지할 수 있다.