[ study ] 웹 게임을 만들며 배우는 react

내가 기억하려고 올리는거라 내용이 조금 빈약할 수 있음

 

 

#2.8 ~ 3.7

 

학습 내용

 

바벨을 설치해서 react 파일을 웹이 읽을 수 있도록 만드는 과정

terminal에 

babel/core을 설치 : 기본적인 바벨. 최신 문법을 바꿔주는 것.

babel/preset-env : 우리 문법을 환경에 맞게 바꿔주는 것

babel/preset-react : jsx를 지원해줌

babel/babel-loader : 바벨과 웹펙을 연결해준다.

 

reloading: 새로고침. 기존 데이터가 사라짐

hot-reloading : 기존 데이터를 유지하면서 화면을 새로고쳐주는 것

 

 

react에서 map을 돌릴 때는 유니크한 key가 항상 필요하다

key에 i를 넣고 숫자를 하나씩 올리며 주입해주면 다음에 성능 최적화를 할 때 문제가 생긴다.

=> react가 i의 변화를 알아차리지 못하는 문제.

또 배열의 순서가 바뀌었을 때도 문제가 생긴다.

 

props는 react에서 부모 컴포넌트에서 자식 컴포넌트에게 넘겨주는 것.

 

 

#3.8 ~ #3.13

 

props는 렌더링이 자주 일어나서 성능이 좋아지지 않는 문제가 나타날 수 있다.

 

react developer tools

 

state와 props의 내용이 바꿔야지 렌더링이 생기지만

setState만 호출하더라도 렌더링이 일어난다.

그 때 

shouldComponentUpdate( nextProps, nextState, nextContext){
if(this.state.counter !== nextState.counter){
return true;
}
return false;
}

class에서는 이런 식으로

shouldComponentUpdate를 이용해 줄 수 있다.

 

hooks를 이용할 때는

memo()를 이용해 줄 수 있음

 

 

class Test extends PureComponent{}

pureComponent를 이용해 줄 수도 있다.

=> shouldComponentUpdate의 true나 false를 자동으로 판단해줌.

 

 

🔺단점

객체나 배열같은 상태가 들어오면 PureComponent의 판단이 어려워진다.

그냥 array의 존재를 보고 현재 array와 변화된 array를 같다고 판단해버리기 때문.

따라서 새로운 array를 만들고 싶으면 기존 array를 펼쳐주고 새로운 array를 만들어야 한다.

 

 

props에 관한 내용은

https://pottatt0.tistory.com/27?category=989402 

🥜 [ React ] react 학습내용 나름대로 정리하기 1

여기에 한번 놓았기 때문에 생략.

 

 

 

 

#4.1 ~ #3.13

 

false, undefined, null은 jsx에서 태그없음을 의미한다

 

 

ref는 dom에 직접 접근할 때 사용했었는데 함수형에서 ref를 사용해서 hooks 느낌으로 이용할 수도 있다.

값을 넣어줄 때, 가지고 올 때 current를 이용하기

 

 

useref의 값을 바꿀때는 return 이후 부분이 불필요하게 렌더링되지 않는다

state는 변화되면 return부분이 재렌더링되지만 ref를 사용하면 값은 바뀌지만 화면에는 영향을 미치지 않는다

=> timeout과 interval을 쓸 때는 interval을 사용하는 이유

 

배열 안에 jsx를 넣어서 쓰는 방법도 있다고 하시는데..

정말 잘 쓰이지 않을 것 같다. fragment 최고! <></>

 

 

#5.1 ~ #

 

lifecycle

렌더링되면 component가 dom에 접속할 때.

특정한 동작을 할 수 있게 할 수 있다.

componentDidMount()로.

render가 처음 성공적으로 실행되면 componentDidMount()가 실행된다.

리렌더링이 일어날때는 다시 시행되지 않는다.

컴포넌트가 제거될 때는

componentWillUnmount()

 

componentDidUpdate()

도 있다.

이건 컴포넌트가 리렌더링될 때 시행하는 것.

 

이게 바로 라이프사이클이다.

컴포넌트가 생겼다가 사라질 때 시행되는 작업

 

* 클래스의 라이프사이클

constructor -> render -> ref -> componentDidMount ->setState / props가 바뀔 때마다

-> render -> componentDidUpdate -> (부모가 나를 버렸을 때) componentWillUnmount -> 소멸

(만약 부모class가 버리지 않는다면 componentWillUnmount는 시행되지 않는다)

 

 

setInterval과 관련된 문제는 따로 포스팅해놨다

https://pottatt0.tistory.com/36

react로 setInterval을 사용할 때 겪을 수 있는 문제들

 

+

완료되지 않은 비동기 요청은 메모리 누수를 부른다

 

 

 

#6.1 ~ #6.6

 

purecomponent를 쓰려면

그냥 purecomponent를 쓰거나 memo로 감싸줘야 한다

 

didupdate

runtimeout

unmount

에 따라서 라이프사이클을 구성하는게 큰 도움이 된다,

 

 

하지만 이 모든건 useEffect를 사용해서 해결할 수 있음

 

자식한테 넘길 때는 useCallback을 넘겨주는게 좋다.

 

 

 

 

 

 

# 7.1 ~

 

useContext

 

 

 

# 8.4 ~

 

셀을 클릭하면 주변칸들에 지뢰가 있는지 감시할 수 있는 코드를 짬

 

한번 검사한 칸은 다시 검사하지 않게

 

열었던 칸 수를 체크

 

 

# 8.8

useMemo를 사용해서 최적화를 한다(함수형)

 

 

useRouter부분은 다른 강의에서 몇 번 수강하고 많이 부딪혀본 경험이 있어 꼭 들어야 할 필요를 느끼지 못했다

https://pottatt0.tistory.com/25?category=989402 

🔧[ React-router-dom ] react-router-dom v6 달라진 점

https://pottatt0.tistory.com/44?category=989402 

BrowserRouter HashRouter 차이 + BrowserRouter 배포시 흰 화면 문제

 

React-router-dom 관련 부분을 작성해 놓은 내 블로그 글을 대신 올림