자바 웹 공부 30 - typescript + React 복습

어제 복습을 이어서 해보자

 

Enum을 연습하게 src에 새 파일, 폴더 만들어주자

 

constants에 적어놨던 PAGES에

VIEW를 당연히 Import 해줘야 사용이 가능하다.

 

App.tsx로 와서

여기도 VIEW로 바꿔주자 다시 한번 말하지만 Import를 사용해야 한다.

 

view의 타입은 string인데 Enum은 열거형 타입이다.

그래서 useState에 string을 사용하지 않고 VIEW를 사용해도 무방하다.

 

setView를 컨트롤 눌러서 클릭해 주고

 

여기도 string이 되어있는데 이 녀석도 VIEW로 변경(Import)하면 에러가 사라진다.

 

열거형 타입이기 때문에 데이터 타입으로 지정 가능.

데이터 타입으로 지정했을 때 존재하지 않는 녀석이 들어온다면 에러를 뱉게 된다.

 

다른 값을 쓰면 에러가 뜬다.

옳게 바꿨다.

 

Hook에 대해 알아보자

views에 새로운 파일 만들어주고

 

rfc! 해준 뒤 Hook으로 이름 바꿔주자

 

Hook은 state, react 기능을 관리하는 메서드이다.

Hook 함수의 규칙
1. 무조건 함수형 컴포넌트 내에서만 호출 가능.
2. 무조건 함수형 컴포넌트 최상위단에서만 호출 가능
3. 조건부로 호출 불가능

 

1. 함수형 컴포넌트 외부에서 Hook 함수를 사용한 경우 

2. 함수형 컴포넌트 자손 함수에서 사용한 경우

컴포넌트 만들기 위한 함수가 아니라 일반 함수에서(onClick) 에러를 반환함.

 

 

1. useState

 

let을 쓸 적에 state2는 바꿀 수 없고 바꿀 수 없는 녀석인데 let을 쓰면 바꿀 수 있기 때문에

문법상으로는 상관없지만 개발할 때 개발자 입장에서는 쓰는 건 옳지 않다.

 

 

이걸 누르면 위에 1이 바뀌는 게 아니라

콘솔에서 1,1 이렇게 추가가 된다.

저 1은 set으로 적용시켜 줘야 바뀐다.

 

이걸 추가시켜주고

화면을 다시 보면?

그래도 똑같다..

console 1이 아닌

 

새로운 것을 추가시켜줘야 한다.

이번에 Add number을 눌러보자

 

console도 바뀌고 화면도 바뀌고 있는 것을 확인할 수 있다

새로운 배열을 만들어서 추가해 주는 역할이다.

 

 

주의할 점
배열 or 객체를 갖고 있는 참조변수의 경우
실제 값을 변경, 다시 set메서드로 적용시켜 준다 하더라도 참조변수가 가지고 있는 주소는
변경되지 않기 때문에 state가 변경되었다고 인식하지 못해서 랜더링이 다시 되지 않는다.

새로운 배열 혹은 객체를 생성해 새로운 주소를 할당한 다음
새 주소를 가지고 있는 참조 변수로 변경해야 리랜더링이 된다.

 

2. useEffect

console.log가 읽혀서 1이 일단 뜬다.

지금은 저 버튼 2개가 바뀔 때도 실행이 된다.

objectState가 바뀔 때만 실행을 하고 싶다고 했다.

 

 

useEffect를 사용하는 방법
import { useEffect } = 'react';
  
호출 방법
useEffect(() => {}, []); 함수를 인자로 넘겨주고 배열 추가
useEffect((특정 상태가 변경되었을 때 실행되는 함수) => {}, [추적할 상태의 배열]);

이러면 objectState가 바뀔때만 실행이 된다.

 

무조건 처음에는 2번이 실행이 된다.(2개 뜨는 것은 생명주기가 원래 그렇다 하더라)

버튼을 누르면 console에는 뜨지 않지만 밑에 add Number 버튼을 누르면

바뀌게 된다.

 

 

이렇게 하면 실행할 때 2번 실행이 아닌 1번만 실행이 된다.

코드 추가해 주고

 

화면을 가서 버튼을 누르면

1이 뜬다...?

그런데 확인을 누르면 2가 된다.

2가 나오지 않는 이유는 setNum이 돌면 num이 2가 들어가는 것을 예상하는데

이 2가 실제로 적용되는 것은 함수가 끝나고 랜더링이 실행될 때 2가 되는 것이다.

즉, 확인을 누르면 함수가 끝이 나는 거고, 다시 랜더링이 되는 것이라서 2가 적용이 된다.

 

해결하는 가장 간편한 방법은

이런 무식한 방법을 사용하는 거다.

하지만 우린 react상으로 공부를 해야 하므로 useEffect를 썼다.

 

 

처음의 방법으로도 해도 상관없다.

 

콘솔을 보면 계속 뜬다.

 

useEffect에 scope 한 state를 해당 useEffect 내에서
변경하는 작업을 진행하면 무한 작업이 실행된다.