📃 README 업데이트 ver.0.1.1

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를 적극적으로 사용합니다.
 
 <br />
 
@@ -52,8 +55,13 @@
 
 ### `22.02.01`
 
-- [] 시, 분, 초로 나누기
+- [x] 시, 분, 초로 나누기
+- [x] 0초가 되자마자 재생버튼 검은색으로 변경하기
 - [x] 타이머 랩타임 기능 만들기
+- [x] 타이머 +- 버튼 수정하기
+
+### `22.02.02`
+
 - [] 스톱워치로 0.001초까지 구분하기
 - [] 스톱워치 랩타임 기능 만들기
 
@@ -90,10 +98,24 @@
 - 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을 사용하여 의존성 배열 안에 들어간 요소가 바뀌지 않으면 기존에 있던 함수를 재사용하도록 구현하였습니다.
+
 <br />
 
 ## 🎞 움짤
 
 ![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)