[Side PJ] 야구게임 - 삽질과 배운점🛠

복잡한 상태관리를 통해 간단한 야구게임을 만들어 보는 작다리 프로젝트를 진행했다. 백엔드에서 API를 제공해 주었고,  간단한 로직같은 경우는 FE단에서 관리하기로 결정했다. 프로젝트를 진행하며 겪었던 크고 작은 error들과 배웠던 점을 정리해보겠습니다-!

###

VS Code 사소한 문법 맞추기

 [ Setting -> quote 검색 -> 수정 ]

오톰과 아울러 프로그래밍 하면서 발견한 사소한 번거로움은

방장 VS Code 저장 가곡 자동 적용되는 문법 설정이 다르다는 것

JS에서 문자열이 auto로 되어있고 Prettier 고사 JSX 방편 체크가 안되있었지만

single, check 로 맞추었다.

merge할때 이런 사소한 부분이 변경사항으로 기록되었기 그렇게 고쳐주었는데 협업할 사이 이런 사소한 문제도 발생하는구나 하는 헤프닝~

  + Router 설정

오늘의 삽질: module을 설치하면 ( styled-components 를 설치했다) 서버를 언젠가 껐다 켜야하는데

마음이 급하다보니 생각을 못했다.

📌 ThemeProvider 로 공통 Theme 만들어 관리하기

   : Context API를 통해 동작 아래의 모든 React 구성요소에 공통 테마를 제공하는 styled-components 래퍼구성 요소

App에서 로 감싼 새끼줄 Component들은 props로 theme을 전달받아 각각의 Component에서 따로 선언 가난히 실용 가능

사용법 1) sytled-components 에서 ThemeProvider  import

2) 공통으로 사용할 Component요소를 감싼다

App.jsx

theme.js

이렇게 styled-components에서  제공하는 ThemeProvider를 상단 부분에 감싸주면

theme에 있는 속성들을 따로 import 할 소용 없이 global하게 구사 가능하다.

Component에서의 사용

⚠️  오직 속성으로 넘겨주는 경우로는 사용이 안된다 ㅠㅠ 이렇게 하면 안먹음

📌 CRA의 public path는 public

사고력 이미지경로르 설정할 때  src 폴더에 넣어두고 상대경로로 연결했더니 img가 불러와지지 않았다.

검색을 해보니 CRA 에서 image를 불러올 경우 1) 절대 다리갱이 사용 2) public / images 폴더를 생성해 사용 위와 같은 방법을 권장하고 있다. https://stackoverflow.com/questions/37644265/correct-path-for-img-on-react-js

image 행사 component public/baseballRound.jpg를 불러와 사용했다.

📌 ContextAPI 적용하기

ConstextAPI를 적용하기 위해 애썼다. 일단 나는 입때껏 상태관리를  위해 props drilling or useState 만 사용해왔었는데

좀더 상위에서 props drilling을 신경쓰지 않고 상태관리를 해주는 방버인 ContdxtAPI에대해 공부했고 사용하기로 결심!

사용법

1) provider 생성 : 전역사용할 data 생성  Context.js 2) reducer 생성 : useReducer 이용한  state, dispatch 생성  ( Provider있는곳 또는 분리해도 됨) 3) App 에서 (혹은 상위에서 ) Provider 로 묶어주기 - 지금 reducer 함수 전달

4)  사용할 곳에서 import후 사용  ({state, dispatch} = useContext(newContext)토토 )

provider/Context.jsx 전역사용할 state 생성 ( boardHistory, BoardHistoryContext)

reducer/ ballReducer.js ballReducer 라는 dispatch에 따라 state관리할 reducer 함수 생성

App.js 관련 전화 state를 사용할 Component  Provider로  감싸기

Stadium.jsx( 사용하는 자식) useContext 에 가치 후 PlayBoard component , playPitch 함수 이용하여

PlayButton에 클릭 성교 전달

PlayButton을 누르면 랜덤값에 따라 ballreducer의 dispatch 결초 적용되도록 했다.

📌 useEffect로 까닭 관리하기

내가 원하는 루틴은

1)  버튼 클릭 2) 3가지 경위 중간 한패 선택 -> 연결 직분 +1 (Context 로 관리) 3) Component는 해당값이 변경되면 재렌더링

return 부분 type에 따라 렌더링

playPitch (버튼 클릭시 실행될 함수)

나의 예상으로는 클릭 ->  dispatch({type: ‘plus’ _ randomHit}); 실행 ->  해당조건에 맞으면 if 문이 실행 이었지만

실제로는

클릭 ->  dispatch 전 if 태자문학 실행 -> dispatch({type: ‘plus’ _ randomHit}); 실행

이식 순서로 진행되기 그리하여 조건이 버금 클릭시에 적용 되는 것이다.

##

수정 전 PlayPitch 수정 내종 PlayPitch

수정전 PlayPitch를 보면

ballCnt 를 억지로 조절하고 있는걸 볼 수 있다.

내가 원했던 상황은 이걸 예상햇지만 

1) 버튼 클릭 2) dispatch 거취 [ ballCnt +=1 증가 ] 3) 조건문 자체 [ 증가한상태의 값에서 S==3이면 아웃 B===4이면 아웃인데 ]

(수정전의 PlayPitch에서) 동작 1) 버튼 클릭 2) 조건문 자세 [ prev dispatch 로 유동 ]

3) dispatch 반응 [ ballCnt ++ ]

실제로는 이렇게 동작했다.

왜냐면 나는 대단히 재력 생각했던 것이 ,

버튼이클릭되고 PlayPitch가 실행되면 dispatch가 동작되면서 전체 Component 언덕 렌더링이 된다 

또 클릭될 당시의 ballCnt의 상태는 내가 원한 동작을 수행하기 전이기 때문에

사후 클릭을 누르면서 변화한 ballCnt 상태로 조건문이 동작할 수명 있는 것이다.

그러므로 처음에는 구성이 잘못된 걸 파악하지 못한 채

억지로 상태를 우겨넣었다.

useEffect를 생성하고 ballCnt가 변경이 되면 즉변 동작하도록 생성했다.

1) PlayPictch onClick 실행

2) random 하게 dispatch 실행 3)  ballCnt변경 4) 변경 이후의 상태로 if 행동환경 적용

총 4단계를 통해 투수가 공을 던졌을 현시대 일어나는 일을 관리했다.

react에서 상태관리의 중요성을 새로이 깨달았다.  특히 상태에 따른 조건문과 형씨 과정을 처리할 때

코드가 내 생각대로 동작할거라 생각했지만

리액트는 상태가 감지함과 동시제 보배 렌더링 되기 때문에

밑의 조건들은 현 다음상태가 되어서야 적용이 된다는 사실을 깨달았다.

상태관리의 늪에 빠져있을 시색 DD의 도움을 몹시 받았고 . DD가 써주신 블로그에 상태관리의 기본적인 원리가 푹 설명되어 있기 왜냐하면 연관 🔗링크를 남깁니다.

https://velog.io/@jjunyjjuny/React-useState%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%A0%EA%B9%8C

Category: sports