안녕하세요, LG U+ URECA 프론트엔드 대면반 1기 고주희입니다.

이번 미션은 지난 번과 같은 기능을 바닐라 자바스크립트가 아닌 리액트로 구현해보는 것이었습니다. 리액트를 사용하여 프로젝트를 진행할 때마다 매번 세팅은 똑같이 하고 프로젝트의 기획만 다르게 하였었는데, 이번 미션을 통해 다양한 것들을 추가로 공부해볼 수 있는 기회가 되어 무척 의미있었습니다!

중점적으로 고려한 요소

• 현 프로젝트는 기본 todo 구현이었으므로 input 창을 재사용 할 일이 많지 않았지만, 지금까지의 프로젝트 경험들을 되돌아 보았을 때 input 창은 재사용할 일이 많았던 것으로 기억합니다. 그리하여 이번 기회에 커스텀 훅을 공부하고자 useInput이라는 hook을 생성해보았습니다. 또한, state를 따로 상태관리 라이브러리를 사용하여 관리하지 않고 localStorage에 저장하는 것이 필수 과제였기에 localStorage에 접근하는 코드가 많았습니다. 그래서 따로 useLocalStorage 라는 hook으로 빼주었습니다.
• 리액트에서 기능 단위로 컴포넌트를 나누는 만큼 각각의 폴더를 기능별로 구분하여 사용하기 위해 노력했습니다.
• Text와 같은 자주 사용해야 할 style은 UI 파일을 생성하고 import 하여 사용하도록 하였습니다. 이 후 프로젝트에서는 Text나 checkbox 뿐만 아니라 기본 Wrapper로 사용할 box 등 재사용이 높은 style들을 한 파일에서 관리할 예정입니다!

알게 된 부분

• 지금껏 패키지 매니저는 npm 만 사용해보았었는데 이번 기회에 yarn을 사용해보게 되었습니다. 프로젝트의 범위가 크지는 않아서 기존 npm을 사용할 때에 비하여 직접적인 속도 향상을 느껴보지는 못 하였지만 좋은 경험이 되었으며 앞으로도 자주 사용할 것 같습니다!
• styled-components 사용 경험이 있는 상태에서 emotion을 사용하게 되었는데 무척 익숙해서 찾아보니 실제로 제공하는 기능과 성능이 거의 유사했습니다. 아마 emotion을 styled-components 처럼 사용하기 쉽도록 만들어진 라이브러리이기 때문에 어쩌면 당연한 것 같기도 합니다. emotion을 사용하는 만큼 css를 props로 넘겨 사용하는 것에도 익숙해지도록 연습이 조금 더 필요할 것 같습니다.
• 매번 CRA로만 리액트 환경을 구성하고 프로젝트를 생성했었기 때문에 Vite라는 것 역시 처음 알게되었습니다. CRA를 사용할 때보다 서버 실행 속도나 빌드 속도가 빨라지는 등의 장점이 있기 때문이라는 것을 공부할 수 있었고, 이 역시도 추후에 조금 더 무게감있는 프로젝트에서 느껴볼 수 있을 것 같다는 생각이 들었습니다.

리팩토링 예정 리스트

• 동작에 효과 넣어보기
• 디자인 수정 ✅
• 글꼴 적용하기 ✅
• 배포 ✅
• 파일 기능 단위로 조금 더 쪼개기 ✅
• 스타일 파일 분리 ✅
• @emotion/css 사용에도 익숙해지기
• 모바일로 배포 링크 접속 시 todo 추가 버튼 깨짐 현상 해결하기
• 파비콘 변경 ✅

---

생각해 볼 질문들

1. 지난주 미션과 비교했을 때, React로 구현하는 과정에서 어떤 점이 더 편리하거나 복잡했나요?

• 직접 태그 내부에 접근하지 않고 jsx를 사용하기 때문에 직접적으로 DOM 요소 하나하나에 접근하지 않고도 빠르게 화면 구성을 하고, 데이터를 동적으로 보여줄 수 있다는 점에서 훨씬 편리했습니다.
• 파일을 기능 단위로 쪼개는 만큼 props를 전달할 일이 많은데, 기존 파일을 수정할 때 관련된 부분이 많아 파일의 흐름(부모와 자식 관계)을 계속해서 찾아야 하는 부분이 수월하지는 않았던 것 같습니다.

2. React의 Virtual DOM(가상 돔)이란 무엇이고, 이를 사용했을 때의 장점은 무엇이 있나요?

• 명확한 답이 어려워 찾아보았습니다.

Virtual DOM의 동작 방식:

1. 초기 렌더링: React 컴포넌트가 처음 렌더링될 때, 실제 DOM에 요소를 그리는 대신 Virtual DOM이라는 가상 표현을 생성함. (이 Virtual DOM은 메모리 상에 존재하는 자바스크립트 객체임)

2. 상태 변경 감지: 사용자가 인터랙션을 하거나 상태(state)가 변경되면, React는 새로운 Virtual DOM을 생성함. 이 Virtual DOM은 변경된 상태를 반영하고, 이전의 Virtual DOM과 비교를 통해 어떤 부분이 실제 DOM에서 변경되어야 하는지 찾음.

3. 디프(Diffing): React는 이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분을 찾음. ( = 디프 알고리즘(diffing algorithm) ) 이 알고리즘은 효율적으로 변경된 요소만을 추적하여 최소한의 연산으로 업데이트를 진행할 수 있게 함.

4. 리콘실리에이션(Reconciliation): 변경된 부분을 실제 DOM에 적용하는 과정을 말함. React는 변경된 요소만 실제 DOM에 반영하여, 불필요한 전체 재렌더링을 피하고 성능을 향상시킴.

Virtual DOM의 장점:

• 성능 최적화: 실제 DOM 조작은 느리기 때문에, Virtual DOM을 사용하여 변경된 부분만 업데이트하면 성능이 크게 향상됨.
• 추상화: 개발자가 DOM 조작을 직접 관리할 필요 없이, React가 알아서 효율적인 방법으로 UI를 업데이트해줌.
• 예측 가능성: 상태와 UI의 관계를 명확하게 관리할 수 있어, 코드의 예측 가능성과 유지 보수성이 높아짐.

3. React에서 state와 props는 무엇이고 어떻게 사용하나요?

• state는 동적으로 변경되는 데이터로 상태가 변경됨에 따라 컴포넌트의 리렌더링이 가능하도록 하게 하는 것으로 알고 있습니다. 보통 useState을 선언하여 초기화합니다.
• props는 부모에서 자식으로 넘겨주는 데이터를 칭하는 말로 알고 있습니다. 보통 HTML 태그 내부에 속성을 정의하듯 넘겨줄 props를 지정하곤 합니다.

4. React에서 컴포넌트를 분리하는 기준은 무엇일까요?

• 재사용되는 일이 많은 기능을 따로 빼주는 것으로 알고있습니다.

배포 링크

https://zuitopia-todo-with-react.vercel.app/

결과 화면