프로젝트 오답노트

랜덤 뽑기

Math.floor(Math.random() 30)
0부터 29까지
Math.floor(Math.random() 30)+1
1부터 30까지

*30은 최대값을
+1은 최소값을 설정한다

Math.floor(Math.random() * 17) + 4;

4부터 20까지이다.

Math.random() 함수는 0 이상 1 미만의 부동소수점 수를 반환 이를 30과 곱하면 0 이상 30 미만의 수가 나오게 되고, Math.floor() 함수를 이용해 소수점 이하를 버리면 0부터 29까지의 정수가 나오게 됩니다. 이에 1을 더해주면 1부터 30까지의 정수가 랜덤으로 반환됩니다.

form

<form onSubmit={onSubmit}>
  <input type="text" ref={answerinputRef} placeholder="정답을 입력해주세요" />
  <button type="submit">입력</button>
  <button type="button" onClick={handleButtonClick}>기능 추가 버튼</button>
</form>

버튼의 기본 동작은 폼을 제출하는 것이므로, 'submit' 타입의 버튼을 사용하면 폼 제출과 함께 버튼도 눌리게 됩니다. 그러나 'button' 타입의 버튼을 사용하면 폼 제출과는 별개로 버튼 클릭 이벤트만 발생하므로, 원하는 기능을 구현할 수 있습니다.

따라서, 추가하려는 버튼이 폼 제출과는 관계가 없다면 'button' 타입을 사용하고, 폼 제출과 함께 처리해야 한다면 'submit' 타입을 사용하면 됩니다. 예를 들어, 아래와 같이 코드를 작성할 수 있습니다

PascalCase , camelCase

이벤트 바로 함수 호출 안하는 이유

onClick = {function()} 을 하면 렌더링될때마다 함수가 읽힌다.

반대로
onClick = {()=>function()}하면 함수 통제가 된다.

useRef 타입

Ref값을 받아서 수정하여 사용하는 경우에는
React.RefObject을 사용하면 된다.
Ref는 사용하는 방법에 다르니 참고하여야한다.

useRef current 값은 HTMLElement로 처리하면 된다.
current: HTMLInputElement | null;