[코드숨 React] 2주차 주간회고

Facts (사실, 객관)

• 코드숨 2주차가 지나갔다. React를 처음 사용해보았다.
• 전공 과목들의 시험이 끝났다. (처참하게 망했다) 이제 교양 시험만 남은 상태이다. 종강이 보인다 와~😇

 

Feelings (느낌, 주관)

1. 고민의 깊이

• 코드숨을 신청할 당시 Javascript를 아주 간단하게 맛만 보고 온 상태여서, React를 이번에 처음 배우는 입장이다 보니 다른 분들에 비해 질문할 거리도 적고 고민의 깊이도 얕은 것 같아서 조금 아쉽다. 그렇지만 다른 분들의 코드와 PR을 언제든 볼 수 있는 점이 참 다행이다. 그래서 앞으로  다른 분들은 어떤 고민을 하는지, 문제를 어떻게 해결했는지 배우기 위해 다른 분들의 PR을 적극적으로 염탐 참고해야겠다.🐢💨

2. 생각하고 적용하기

• 이번주 리뷰 받은 내용을 쭉 읽어보다 문득 내가 정말 '생각하면서' 코드를 짜고 있나? 하는 생각이 들었다.
• 예를 들어서 이러한 리뷰를 받았다면,
  

  

  더 깊은 고민없이 트레이너님이 알려주신 해결방법 그대로 적용'만' 하려고 했던 것 같다.
  '왜?' 라는 질문이 항상 빠진 채로 코드를 짜는 습관은 되게 안 좋은 것 같다...
• 물론 트레이너님의 리뷰 내용이 내가 짠 코드보다 훨씬 좋은 코드이겠지만❕
  그럼에도 리뷰 내용을 적용하기 전에 '왜 이렇게 해야할까?'를 항상 생각해봐야겠다.
  그래야지 비로소 리뷰 받은 내용을 바탕으로 과제를 조금씩 수정해나가는 과정이 유의미해질 것 같다.

3. 공식문서와 친해지기🤝

• 사실 솔직히 이전까지는 공식 문서에 대한 막연한 거부감을 가지고 있었던 것 같다. 뭔가 더 어렵게 설명할 것 같고.. 다 영어로 되어서..🥺 그런데 Slack에서 많은 분들이 공식 문서를 언급하셔서 더이상 공식 문서를 피하면 안되겠다고 생각했다. 영어로 읽는건 stackoverflow가 최선이라 걱정인데..ㅎ 구글 번역기의 도움을 받아야겠다..
• 트레이너님이 리뷰로 React 공식문서를 꼭 한번 정독해보라고 말씀해주셔서 이번주부터 React 공식 문서를 조금씩 읽어가는 중이다. 그런데 생각보다 설명이 되게 친절한 것 같다는 느낌을 받았다. 게다가 한국어로 번역도 이미 되어있다ㅎ_ㅎ 일단 React 공식문서부터 천천히 정독해보도록 하자!

 

Findings (배운점)

1. 관심사의 분리
   • 리액트에서는 관심사 별로 컴포넌트들을 분리한다.
   • 예를 들어서 아래의 Button 컴포넌트 내에서는 버튼을 어떻게 그려줄지에 대해서만 궁금할 뿐!
     onClick이 실제로 어떤 일을 하는지에 대해서는 관심이 없다.
     

     export default function Button({ children, onClick }) {
       return (
         <button type="button" onClick={onClick}>
           {children}
         </button>
       );
     }​

 

• React 17 적용하기
  • React 17 부터는 import React from 'react' 생략 가능
  • + 내가 마주친 사소한 에러 (.eslintrc.js의 extends 설정 시)
    • plugin:react/recommended 이전에 plugin:react/jsx-runtime을 추가했더니 규칙 적용 안되는 문제 발생
    • 두 규칙의 순서를 바꿨더니 에러 해결
    • 규칙 충돌이 발생하는 경우, 보통 나중에 선언된 규칙이 더 우선순위가 높게 적용되는 점을 유의하자.

 

• React에서의 key
  • 참고 : https://ko.reactjs.org/docs/lists-and-keys.html
  • todo list에서 각각의 todo에 안정적인 고유성을 부여하기 위해 key값을 할당해주어야 한다.
  • 그러나 todo list처럼 삭제/변경 등으로 인해 각 todo의 순서가 언제든 바뀔 수 있는 경우, index를 key로 사용면 안된다. todo의 내용 또한 중복 가능성이 있기 때문에 사용할 수 없다.
  • 이는 따로 유니크한 key 값을 만들어서 해결가능하다.
    과제에서는 todo를 새로 추가할때마다 key로 사용되는 id를 1씩 추가해주었다.

 

• React Hooks: useState
  • setState에서 es6 문법(...) 사용하기
    • setState에서 일부 값만 변경해주고 싶을 때 [ ...state ]를 사용하면 기본적으로는 원래 있던 값들이 그대로 들어가고, 만약 같은 키가 있는 경우에는 해당 값만 새롭게 갱신해준다고 한다!
    • 예를 들어서 input에 입력할 때마다 onChange 함수가 실행되는데, 이때는 todo의 '내용'만 갱신되어야 한다. (id와 전체 todo list는 아직 실제로 추가되기 이전이니까 변경되면 안됨) 이때는 아래와 같이 작성하면 된다.

    • function handleChange(event) {
          setState({
            ...state,
            newTodo: event.target.value,
          });
        }

 

2. 한 주동안 배우고 적용해 본 Javascript 스킬(?)들

책 '자바스크립트 코딩의 기술'에서 배운 내용들을 과제에 조금씩 적용해보았다.

• TIP 8. push() 메서드 대신 펼침 연산자로 원본 변경을 피하라.
  
  • 책에서 펼침 연산자(...)를 사용하여 배열에 대한 조작을 피하면서 새로운 배열을 생성하는 방법을 배웠다.
    실제 과제에서 (새로운 todo를 추가할 때) 다음과 같이 사용해보았다.

  • function addTodo() {
        setState({
          ...state,
          newId: newId + 1,
          newTodo: '',
          todos: [...todos, { id: newId, text: newTodo }],
        });
      }

 

• TIP 23. filter()으로 데이터의 부분집합을 생성하라.
  • (새롭게 안 사실❕) filter() 메서드는 만족하는 값이 하나도 없더라도 어쨌든 배열을 반환한다.
    그래서 todo list에서 todo가 한 개도 없더라도, if (todos.length === 0)을 사용해 예외 처리를 해줄 수 있다.

  •   function deleteTodo(id) {
        setState({
          ...state,
          todos: todos.filter((item) => item.id !== id),
        });
      }

 

Affirmation(자기 선언)

• 리뷰 받은 내용을 적용해볼때 '왜?'를 꼭 생각해보자!
• 다른 분들 PR을 적극적으로 참고해보자~
• React 공식 문서 한번 쭉 정독해보자. 공식 문서에 대한 막연한 거부감을 없애자.
• 학점도 좀 챙기자 ~ㅠ

---

✔ 2주차 코드 리뷰

• 과제 #1 리뷰 -  https://github.com/CodeSoom/react-week2-assignment-1/pull/116
• 과제 #2 리뷰 - https://github.com/CodeSoom/react-week2-assignment-2/pull/107