diff --git a/README.md b/README.md index 630381d..abda5cd 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,15 @@ ## ⏳ ReactStopwatch -**최신 업데이트 날짜 : `2022.01.28`** +**최신 업데이트 날짜 : `2022.02.02`** + +**최신 릴리즈 버전 : `ver 0.1.1`** - React와 CRA를 이용해서 간단한 스탑워치를 만들어보는 연습용 레포지토리입니다. - React의 기본적인 동작 방식을 익히고 있습니다. - CSS in JS 중에서도 Emotion을 사용하고 있습니다. - 클릭을 유지하면 점점 빠르게 count가 변동합니다. - 전역에서 관리가 필요한 상태를 처리하기 위해 Redux를 사용합니다. +- 함수형 컴포넌트와 React hooks를 적극적으로 사용합니다.
@@ -52,8 +55,13 @@ ### `22.02.01` -- [] 시, 분, 초로 나누기 +- [x] 시, 분, 초로 나누기 +- [x] 0초가 되자마자 재생버튼 검은색으로 변경하기 - [x] 타이머 랩타임 기능 만들기 +- [x] 타이머 +- 버튼 수정하기 + +### `22.02.02` + - [] 스톱워치로 0.001초까지 구분하기 - [] 스톱워치 랩타임 기능 만들기 @@ -90,6 +98,19 @@ - Emotion문법을 사용하여 만든 CSS in JS Component에 props를 전달 - props로 받은 nowTime값을 삼항연산자의 Chaining을 이용해서 조건을 적용한 후에 스타일 반영 +### useEffect 활용 + +- 기존에는 setState 안에서 prev => 를 통해 내부 상태값을 확인하고 변경하는 방식을 사용했습니다. +- 하지만 time으로 관리했던 시간 상태가 second, minute, hour로 나눠지면서 상태들이 연결되기 시작했습니다. +- 기존 prev를 이용하여 상태값을 변경하는 방식은 setState 안에서 또 다시 setState를 하는 경우 중복해서 state를 변경시키는 문제를 야기했습니다. (렌더링 되기 전에 state를 한번에 처리하기 때문에 문제 발생) +- 그래서 useEffect를 사용하여 렌더링이 된 이후에 state를 관리해주는 방식으로 문제를 해결할 수 있었습니다. + +### useCallback 활용 + +- useEffect를 활용하면서 중복된 코드들을 밖에 선언하고 안에서 가져다 쓰는 방식을 사용하게 되었습니다. +- 이 과정에서 함수를 의존성 배열 안에 넣다보니 리렌더링이 될 때마다 함수가 새로 생성이 되는 문제가 발생했습니다. +- useCallback을 사용하여 의존성 배열 안에 들어간 요소가 바뀌지 않으면 기존에 있던 함수를 재사용하도록 구현하였습니다. +
## 🎞 움짤 @@ -97,3 +118,4 @@ ![Honeycam 2022-01-25 03-44-43](https://user-images.githubusercontent.com/14370441/150844648-a5d95396-1f4a-42a1-b11d-5c3f8a2b6304.gif) ![Honeycam 2022-01-28 04-20-06](https://user-images.githubusercontent.com/14370441/151429636-543529b3-052f-474f-ab2e-ae49b78f07d7.gif) ![Honeycam 2022-02-01 04-44-01](https://user-images.githubusercontent.com/14370441/151861680-30f19156-b347-4106-b5bd-e7c2ffd1af7c.gif) +![Honeycam 2022-02-02 07-47-45](https://user-images.githubusercontent.com/14370441/152064440-ef007f4b-bed2-4321-a698-e338b24de2bd.gif)