[원티드 프리온보딩 프론트엔드 인턴십 8기] Week 3-1

📌 과제리뷰

지난번 과제인 Todo List 프로젝트에 대한 리뷰를 해주셨다. 총 12팀에 대한 코드를 보시고 좋지 않는 코드들을 가져와서 리뷰해주시기 때문에 전체 팀에 대한 피드백이라고 한다.

피드백 내용

• 불필요 파일들 삭제
• 사용하지 않는 변수, import 제거
• 상수화를 활용한 가독성, 유지보수성 향상

  // 상수화X
  type RegisterMode = 'signUp' | 'signIn';
  
  const [mode, setMode] = useState<RegisterMode>('sign_in');
  
  
  // 상수화O
  const SIGN_IN = "SIGN_IN";
  const SIGN_UP = "SIGN_UP";
  
  type RegisterMode = typeof SIGN_IN | typeof SIGN_UP
  
  const [mode, setMode] = useState<RegisterMode>(SIGN_IN);

• 삼항연산자와 조건문의 차이 파악해서 상황에 맞게 사용하기
  
  • 값이 필요할 때는 삼항연산자를 사용한다.
  • 코드의 분기가 필요할 때는 조건문을 사용한다.
• 변수명은 어떤 데이터를 가지고 있는지 어떤 동작을 하는지 명확하게 작성하는 것이 좋다.
  • ex) 데이터를 가지고 있는 변수를 모두 data라고 하는 것보다는 userData, postData와 같은 변수명을 써서 어떤 데이터가 있는지 알 수 있도록 하는 것이 좋다.
• state의 최소 집합을 찾는것이 좋다.

  React로 사고하기 – React

• async - await 동작 이해하고 사용하기
  • async return → Promise
  • await → Promise resolve or reject
  • 무의미한 catch 활용 줄이기
  • 무의미한 async await 활용 줄이기
• 다른 문맥끼리는 공백으로 구분하기, 일관성 있는 포맷팅
• 코드 작성 순서
  • css-in-js 스타일링 방법을 사용할 때 스타일링 코드를 위에 작성하는 것보다는 로직과 렌더링 되는 코드 밑에 작성하는 방법으로 작성하는 것이 좋다. 
• 스타일링 방식 혼용 지양
  • 스타일링을 할 때 한가지 방법만 사용하여 작성하는 것이 유지보수하기 편하다.

 

📝 라이브 세션 내용

첫 시간에는 렌더링을 최적화하는 방법과 react.memo, useMemo, useCallback을 사용하는 방법과 왜 사용해야 하는지에 대해서 설명해주셨다. 항상 최적화를 한다고 하지만 메모이제이션 방식을 사용해서 최적화를 해본적은 손에 꼽는 것 같다.

전에 인프런 답사를 다녀왔을 때 들었던 내용이 있기 때문에 사용하는 것을 최소화 하려고 했었기 때문도 있다. 너무 이른 최적화는 좋지 않고 useMemo, useCallback을 사용했을 경우 코드의 가독성이 좋지 않기 때문에 잘 사용하지 않는다고 했던 내용이 머리에 자리잡았기 때문인 것 같다. 하지만, 정확하게 최적화를 할 수 있을 경우에는 사용한다는 것도 있어서 최적화를 언제 적용해야 하는지에 대한 부분에 고민을 많이 해봐야 할 것 같다.

또한, 강의 내용에서도 마지막에 최적화는 꽁짜가 아니고 최적화를 해야 하는 시기나 명확하게 가치를 창출해낼 수 있는 것이라고 생각 됐을 때 최적화를 하면 된다고 말해주셨다.

 

두번째 시간에는 useEffect, ContextAPI를 조금 더 잘 사용할 수 있는 방법에 대해서 설명해주셨다.

useEffect에 의존성 배열을 잘 설정하는 방법은 모든 의존성을 빼먹지 말고 의존석 배열에 명시하지만 가능하다면 의존성을 적게 만드는 것이 좋다고 한다.