[WIL] 23.04.14. - 23.04.16.

이번 주 배운 내용

• 리액트 기초 개념 (컴포넌트, props, state, 가상돔)
• 간단한 todo 서비스 만들기

느낀점

• 리액트를 정말 하나도 모르고 시작해서 모두 새로운 개념이었다. 첫날은 JSX 문법도 처음 봐서 과연 할 수 있을까 싶었지만 둘쨋날에 그날 배운 내용으로 투두 서비스를 만들고자 하는 목표를 가지고 개념을 익혀나가니 더욱 재미있었다.
  특히 처음에 새로운 개념을 알게되면 그 개념과 관련해서 꼬리질문들이 생기기 마련인데 개념을 차근차근 익혀나가니 처음에 가졌던 의문들에 대해 답을 얻을 수 있어서 즐거웠다.
  리액트의 랜더링과 가상돔 개념에 대해 처음 알게 되었을때 (랜더링 과정에 있어서 실제돔과 가상돔을 만든 다음 구분하여서 달라진 부분만 리랜더링 시켜준다는 개념이었다.)
  그럼 비교는 어느 시점에 하는거지? 라는 궁금증이 들었는데 state 개념을 배우면서 state가 변경될 때 비교를 한다는 답을 얻을 수 있었다.
  이런 과정이 반복되자 새로운 기술을 배울때 의문을 가지고 몰입하고, 학습해나가는 과정이 너무 즐겁게 느껴졌다.
• 배운 개념을 활용해서 간단한 투두 서비스를 만들었다. 요구사항에 맞추어서 객체 형태로 초기값을 지정해주는데 이때 객체의 아이디 값을 숫자로 넘겨주게되었다.
  처음에는 단순히 객체가 담겨있는 배열의 길이 만큼? 혹은 배열에 담길때 인덱스 값을 아이디로 주면 될거라고 생각했는데
  그렇게 되면 아이디 값이 중복해서 여러개가 생기곤 했다. 삭제와 추가를 반복할 경우 문제가 발생했다.
  이를 해결하기 위해서 별도의 카운터를 두고 해당 카운터를 증가시키면서 아이디 값을 부여시켰는데
  문제는 useState를 사용해서 상태를 변경하고 화면을 리랜더링 하는 과정에서 사용자가 입력한 투두 내용을 스테이트로 관리하고 있는 상황이었으며 카운트의 증가와 상태의 변경이 순차적으로 발생하지 않아 또 아이디 값이 중복으로 여러개 들어가는 경우가 생겼다.(리액트의 경우 찾아보니 usetState의 상태를 변경하는 함수..?는 코드상의 입력된 라인넘버 순서대로 순차적으로 진행되는 것이 아니라 비동기로 진행되기 때문이라고 한다.)
  결국 이를 해결하기 위해 구글링을 하였고 개념시간에 아직 배우지 않았던 유즈이펙트를 사용해서 해결하였다.역시 직접 구현해보면 다양한 경우에 대해 알 수 있는 것 같다고 생각했다.

다음 주 배울 내용

• 리액트 숙련 주차
• 간단 todo 코드 리팩토링
• 자바스크립트 4주차 강의 3/1 듣기
• 포트폴리오 자바스크립트 프로젝트 시작하기

이번주 WIL 관련 작성 글 바로가기

[리액트] React란
[리액트] CRA란? 리액트 프로젝트 생성하기
[리액트] 컴포넌트란? 리액트 컴포넌트 간단 예제
npm vs yarn
[리액트] JSX란? JSX문법 소개
[리액트] Props란, Prop Drilling
[리액트] State