이번 주에 배운 것
- React 기본 개념(구성 요소, 소품, 상태, 가상 DOM)
- 간단한 할 일 서비스 만들기
나는 그것을 느꼈다
- 저는 React에 대해 전혀 모릅니다. 처음부터 모든 것이 새로운 개념이었습니다. 첫날은 JSX문법을 처음봐서 과연 할 수 있을까 싶었는데, 둘째날은 내가 가진 것을 가지고 Todo 서비스를 만든다는 목표로 개념을 배워서 더 재미있었다. 그날 배웠다.
특히 새로운 개념을 처음 배울 때 개념과 관련된 질문이 있을 수밖에 없는데, 개념을 차근차근 배우다 보니 초반에 가졌던 궁금증에 대한 답을 얻을 수 있어 재미있었다. 특히 React의 렌더링 및 가상 돔 개념에 대해. 처음 알았을 때 (렌더링 과정에서 실제 돔과 가상 돔을 만든 다음 구분해서 변경된 부분만 다시 렌더링하는 개념이었습니다). 그럼 어떤 점에서 비교했을까? 라고 생각했는데 상태의 개념을 배우면서 상태가 바뀌면 비교를 한다는 답을 얻을 수 있었습니다.
이런 과정이 반복되면서 새로운 기술을 배울 때 스스로에게 질문하고 몰입하고 배우는 과정이 무척 즐거웠다. - 배운 개념으로 간단한 Todo 서비스를 만들어 보았습니다. 요구 사항에 따라 초기 값은 개체 형식으로 지정됩니다. 이때 개체의 ID 값은 숫자로 전달됩니다. 처음에는 단순히 배열에 포함된 객체만큼만? 아니면 인덱스 값을 배열에 넣을 때 ID로 줄 수 있을 거라 생각했는데, 그럴 경우 여러 개의 ID 값이 중복되겠죠. 삭제와 추가를 반복하면 문제가 발생했습니다. 이를 해결하기 위해 별도의 카운터를 배치하고 카운터를 증가시키면서 ID 값을 할당하였다. 입력값을 상태로 관리하고 있는 상황에서 카운트 증가와 상태변화가 순차적으로 일어나지 않고 여러 ID 값이 중복 입력되는 경우도 있다. 기능때문인지..? 코드에 입력된 줄 번호의 순서대로 순차적으로 진행하는 것이 아니라 비동기식으로 진행됩니다.) 결국 이를 해결하기 위해 구글링을 했고 개념 시간 동안 아직 배우지 못한 Use Effect를 이용하여 해결했습니다. 저도 직접 구현해보면 다양한 사례들을 알 수 있을 것 같다는 생각이 들었습니다.
다음 주에 배울 내용
- 숙련된 주차 반응
- 간단한 할 일 코드 리팩토링
- JavaScript Week 4 강의 3/1 듣기
- 포트폴리오 JavaScript 프로젝트 시작
