Merry Christmas eve.keyword

Universe·2022년 12월 24일
0
post-custom-banner

1. 리액트 코드 컨벤션

[react] react 코딩 컨벤션

리액트 프로젝트 폴더 구조와 컨벤션 규칙

React code conventions and best practices

2. 프론트엔드가 고민해야 할 부분

  • ui/ux 고민
  • 뎁스 고민
  • 코드를 짧게, 조금 더 빠르게

예를들어..

모바일 뷰라면

사용자가 들고다녀야하니까

  1. 확인버튼이 어디에 위치하고 있는지
  2. 사용자 편의성을 고려했는지
  3. 글씨가 너무 작아서 작은 화면에선 안보일텐데..
  4. 색깔의 가시성
  • 성능 체크 툴

3. nested router vs 삼항연산자 조건부 렌더링

SPA에서 라우팅은 앞으로가기/뒤로가기 등 브라우저 기본 기능이랑도 관련이 있고
url이 바뀔 때 어디부터 어디까지 리렌더를 해줄 건지, url 파라미터나 쿼리파람 파싱은 어떻게 할 건지,
새로고침될 땐 또 어떻게 처리할 건지 등등 직접 구현하면 신경써야 할 것도 많고 귀찮은 것들도 많아서
react-router-dom 같은 라이브러리를 써서 처리하는 게 편해요

nested route가 react-router-dom으로 보여주는것으로 이해했는데
선언형으로 라우팅을 하느냐 명령형으로 하느냐인 것 같아요.

react-router-dom으로 Route 컴포넌트를 nested로 선언해두면 path에 따라서
보여지는 컴포넌트를 교체해주는거구요.

navigate는 주로 이벤트 후에 브라우저의 주소를 변경해서 명령형으로 컴포넌트를 변경하기 위해서 사용됩니다.

삼항연산자는 url로 컴포넌트를 조건부렌더링을 하는게 아니라
주로 state나 props로 분기처리하기위해 사용되죠. 
다만 이렇게 되면 새로고침했을 때 이전 상태값을 알지못한다는 단점이있겠죠

4. 목적성 있는 글쓰기

예를들어, 내가 어떤 부분에 대해서 까먹었을 때

이 글로 나를 가르치겠다- 하는 목적을 담은 글을 쓰는 것

profile
Always, we are friend 🧡
post-custom-banner

0개의 댓글