강의에 따라 클래스 컴포넌트를 사용해 구구단을 만들어보고, 혼자 함수형으로 변환하면서 느낀 포인트를 정리했다.

1.6 - 1.10

Class 클래스형으로 구구단 만들기

1) state, 상태가 변하는 것들

구구단의 기본 구조 설정했다면 여기에서 변하는 값들을 모두 체크하자.

• 첫번째 숫자 ( = first )
• 두번째 숫자 ( = second )
• input value ( = value )
• 결과값 확인창 ( = result )

변하는 값 => state

즉, 총 네개의 값이 state가 됨을 알 수 있다.

onChange, onSubmit 등 로직을 표현하는 함수는 한계 없이 길어질 수 있다. 이러면 가독성이 심각하게 떨어질 뿐더러 데이터와 데이터 로직이 혼재돼 있는 건 지양해야 한다. 그래서 상단의 onSubmit처럼 분리가 필요하다.

2) 클래스의 메서드

이 때 사용하는 것이 클래스의 메서드다.

엥스러웠지만 저렇게 쓰는 게 맞다. (클래스 문법을 내가 너무 안 써서 어색하게 느낄지도..)
constructor() {...} 괄호가 끝난 다음 function이고 뭐고 없이 냅다 onSubmit = () onChange = () 갈겨버리면 된다.

⚠️ 주의

onSubmit = function(e) {...}

화살표 함수(arrow func)을 쓰지 않고 function(){}을 쓰게되면 this가 가리키는 것이 달라져버리기 때문에 함수가 작동하지 않는다. (더 이상 this가 현재 클래스를 가리키지 않는다. bind()를 써서 해결할 수도 있긴 하지만 번거로우니..)

내가 만든 함수 => 무조건 arrow function 쓰자.
(return문은 arrow가 아니어도 상관없음)

3) ref

JS에서 사용하는 focus()기능을 사용하고 싶다면 ref를 사용한다. JS에서는 document.getElementById().focus()를 사용하지만, React를 사용할 때는ㄴ document를 직접 건들이지 않고( => DOM 직접 조작 ❌ ) 리액트가 컨트롤 할 수 있도록 하는 것이 좋다.

리액트가 화면을 만들고, 우리는 데이터를 조작/관리

클래스에 input을 선언하고 return하는 input 태그에 ref 속성을 부여하면 된다.

42번 라인 : ref를 이용해 focus()를 사용할 수 있게 되었다.

ref에 대한 더 자세한 내용은 추후에 정리해야 할 듯하다.

📌 Tips

1) constructor().. 헷갈린다면?

그냥 냅다 빼버려도 된다. (정확한 이유는 아직 모름)
constructor, super, this... 다 빼고 state만 남겨라. 위처럼 작성해도 똑같이 돌아간다.

이것이 실무에서 클래스형으로 작성 시 가장 많이 쓰는 방법이다.

2) Fragment

render()는 가장 바깥의 하나의 <div></div>를 리턴한다. 감싸주는 큰 틀이 없으면 위처럼 오류가 발생한다.
div로 감싸는 건 어려운 일이 아니지만, 쓸데 없는 ( = 아무런 기능이 없는) div가 하나 생성되어 지고 ( => 효율 다운 ), CSS 적용 시에도 오류 발생 확률이 높다. 그래서 Fragment가 필요한 것이다.

div -> Fragment로 변경하면서 root div 다음 바로 컨텐츠가 보이게 되었다.

3) 현재값을 참조하기 : setState(()=>{return()})

여기서 내가 쓰고 있는 this.state.value는 현재값이다. 이 값을 setState({...})로직을 통해서 의도한 (미래의) state 값으로 변경시키게 되는데, setState()는 비동기이기 때문에 이 과정에서 this.state.value을 그대로 현재 값으로 쓰면 혼돈이 있을 수 있다.

이를 막기 위해서 setState()에 새로운 state값을 리턴해 주는 함수 api를 사용한다.
노마드 코더 무비앱 강의 노트 3. State 값 변경하기 에도 해당 부분에 대한 내용이 기재돼 있다.

함수의 형태로 인자로 받아와 변경하는 것이 안전하다.

📌 현재값(this.state.value)을 참조한다면 무조건 setState()안에서 api를 쓰자.

---

Function 함수형으로 만들어보기

복습 겸 추가 학습 겸 클래스 바탕으로 만든 구구단을 함수형으로 변환해 보았다.

Review

1) typeof(value) === string !

onSubmit()을 작동시키면 자꾸 오류가 났다. 왜 일까 보아도 모르겠더랬다. 이것 저것 콘솔을 찍어보다 타입을 확인했더니 내가 연산하고자 하는 두 개의 타입이 달랐다.

value는 인자로 받아온 input값을 그대로 가져온다. 숫자로 입력했지만 이것은 number가 아니다.

반면에 first, second는 Math객체로 생성한 랜덤 숫자, 즉 number이다. 그래서 value에 parseInt(value)로 변환하는 과정이 필요했다.

2) RANDOM_NUM

랜덤 숫자를 매번 중복하기 싫어서 상수로 넣어 적용하고 싶었는데, 하나의 상수로 만들어 넣으니까 1X1, 2X2, ... 매번 같은 숫자만 반복했다.

Tips의 3번째 문항을 참고해보면, setState는 비동기이기 때문에 렌더가 한꺼번에 같이 동작해서 매번 같은 숫자가 대입되는 듯했다.

api를 써 보면 되나? 싶어 return문으로 바꿔봤는데 아예 숫자도 안 뜬다. 그냥 저렇게 랜덤 메서드를 하나씩 써주는게 답인듯 하다.

방금 생각난 아이디어는 애초에 숫자를 하나 대입 시키고 (setState 초기 설정)
Tips-3처럼 현재 값을 참조해 거기 숫자를 연산하는 식으로 
랜덤 숫자를 출력해도 되지 않을까?...