[코드숨] 리액트 13기 - 2주차 주간 회고

 

CodeSoom

2022.10.17 - 2022.10.23

1. Facts (사실, 객관)
2. Feelings(느낌, 주관)
3. Findings(배운 점)

 

Facts (사실, 객관)

ㆍ리액트 이해하기

(ReactDOM.render, Components & Props, Hook- useState, 선언형 프로그래밍, 관심사의 분리)

ㆍ과제 1 수행 : 카운터 앱을 만들고 각 컴포넌트 마다 파일을 분류한다.

ㆍ과제 2 수행 : Todo 앱 만들기

  - 입력하여 등록, Todo List 삭제, 없을시 해당 문구 띄우기

Feelings(느낌, 주관)

더 많은 공부의 필요성

제출한 과제의 코드 리뷰를 받으면서 몰랐던 정보를 많이 알게 되었다. import React from 'react'; 를 사용하는 것이 당연한 줄 알았는데, 리액트 17버전 이후부터는 생략이 가능하다는 걸 알게 되었다..! 그래서 생략 후 babel.config.js를 수정하니 적용이 되었다. 파일마다 작성하지 않아도 되니, 훨씬 간편해졌다.

그리고 Props Drilling에 대해서 배워보면 좋을 것 같단 코멘트를 통해  props를 하위 컴포넌트로 계속해서 전달하는 것을 의미하며 이로 인해 해당 props를 추적하는데 어려움이 생길 수 있다는 걸 알게 되었다. 과제 제출시 Page가 하나였기에 App.jsx에서 선언했던 state와 함수를 해당 Page 파일로 옮겨 이를 해결하였다.

또한  원래는 export default 컴포넌트명  로 아래에 export를 했었는데 export default function 컴포넌트명 으로 처음부터 함수와 함께 작성하는 방법이 있음을 알게 되었다. 처음엔 축약해서 쓰는 것으로 알았는데 의도를 나타내기 위해 쓰인다는 것을 알려주셨다. 단순히 함수를 내보낸다면 export default function 컴포넌트명 을 사용할 수 있다. 반면 export default 컴포넌트명 의 경우, 만약 style을 적용시키는 코드를 함수 아래에 작성 시 사용하여 중간에 코드가 있음을 알리는 역할을 할 수 있다. 또한 React.memo로 감쌀 시에도 사용할 수 있다.

과제를 수행하면서 몰랐던 것을 많이 배우게 된다. 코딩은 알수록 모르는 게 많이 있는 것 같다. 지금 공부하는 것이 일부일 거라는 생각도 들고..ㅎ_ㅎ  앞으로도 강의 뿐만 아니라 코드 리뷰를 받으면서 알게 되는 것들도 많이 배우고, 나중에 더 더 공부하면서 지식을 쌓아나가야겠다. 💪

Findings(배운 점)

ㆍ리액트 사용 방법

ㆍ컴포넌트에 따른 파일 정리

ㆍApp.jsx에 함수, state 등을 관리하는 코드를 작성하고, 컴포넌트 파일에는 UI 코드를 작성하기

 ㆍ코드를 깔끔하게 작성하는 방법

    - props의 경우 데이터는 데이터끼리, 함수는 함수끼리 묶어주는 것이 좋다. 

    - props가 2개 이상 많아지면 세로 정렬을 해준다.

    - 라이브러리 import와 로컬파일 import 는 구분을 위해 띄어주기

ㆍ이벤트 핸들러의 함수 이름 설정

    - 직접적으로 로직을 처리하는 경우는 handle~ , 중간에 전달하는 역할 정도만 하는 props같은 경우는 on~을 주로 사용하면 좋다.

ㆍuseState와 props, 이벤트 핸들러 함수를 활용하여 Todo List를 만드는 방법을 배웠다.