React

기존 React의 함수 컴포넌트에서는 state를 지정할 수 없었다.→ 클래스 컴포넌트로 바꿔줘야했다.hook을 사용하면 이제 함수 컴포넌트에서도 state를 지정할 수 있다!(단, 클래스 컴포넌트에서는 hook이 동작하지 않는다)useState 함수는 특별한 함수이다

App >> Toolbar >> ThemedButtoncreateContext를 통해 context를 생성한다.context.Provider를 통해 값을 주입한다.useContext(context)를 통해 컨텍스트를 꺼내서 사용한다.이 예시와 같이 사용하다 보면 여러

ref는 key와 마찬가지로 React의 독특한 prop이다.이렇게 ref을 넘기면inputRef.current를 통해 input 엘리먼트에 직접 접근할 수 있다.ref prop에는 특정 형태의 객체(current 속성을 갖는)만을 할당할 수 있다.이 객체를 만드려면

본 프로젝트는 리액트를 공부하기 위해 zerocho님의 인프런 강의를 듣고 따라 구현해본 프로젝트이다.https://github.com/whanhee97/Minesweeper/tree/master/srcAppMineSearchFormtimer (컴포넌트 아님)

reducer 함수에 액션으로 START_GAME이 날아왔을 경우실행되는 plantMine함수를 정의 한다.그전에 코드를 더 알아보기 쉽게 하기 위해 지뢰 상태 코드 먼저 작성해놓는다.MineSearch.jsx여기까지 하면이런 식으로 찍힌다 -1은 일반이고 -7이 지뢰

MineSearch.jsxOPEN_CELL 액션을 만들어 주고 리듀서에 추가 해준다 const tableData = ...state.tableData;tableDataaction.row = \[...state.tableDataaction.row];이렇게 한건 불변성 때

MineSearch.jsx 의 OPEN_CELL 액션을 건드려 줘야한다.around라는 배열을 두고주변 8개의 상태값을 다 담아준다. concat은 파이썬의 extend와 같다편의상 위아래만 있는지 검사하고 양옆은 검사 안하는것 같은데 양옆이 없으면 undefined가

게임 데이터를 얻어오기 위한 게임 데이터 스테이트를 초기화해준다게임이 시작하면 저렇게 초기화 시켜주고OPEN_CELL 안에도 openCount 변수를 만들어준다.tableData안을 순회하며 0보다 큰값이 있으면\+1 씩 해주고openCount 가 (행X열-지뢰개수)랑

Step 6 context API 최적화 react dev tools를 사용하면 리렌더링 될 때 마다 깜빡이는걸 시각적으로 확인 할 수 있다. timer 때문에 계속 깜빡이므로 Form과 Table 그리고 그 아래에 있는 컴포넌트들을 모두 memo로 묶어준다.

MineSearch.jsxFontAwesome 을 사용함isWin 이라는 스테이트를 새로 만들어주고 false로 초기화함OPEN_CELL 액션에서이기는 조건으로 isWin을 true로 바꿔줌그리고 result는 저렇게 바꿔줌렌더링 부분은 조건을 써서 이길때와 질때를 c

Step 8 CI/CD로 배포하기 github에서 머신을 제공해준다. 먼저 [자신의 git 아이디].github.io 라는 레포지토리를 만들어준다. gh-pages 라는 브랜치를 만들고 index.html 파일을 하나 만든뒤 push 해준다. 배포하려는 프로젝