마켓 칼리의 후기, 문의 영역을 만들었고, 해당 부분에서 코드 리뷰를 받고 싶습니다. 현재 페이지내이션과 url param에 따른 동적 렌더링을 제외하고 구현이 되어있는 상태입니다.
리코일, 리덕스, context provider를 사용하지 않고 구현했습니다.
후기, 문의 등록할 때 글자 수 세는 부분에 있어 디바운스, 스로틀링 없이 구현하였습니다.
전반적으로 기초적인 훅만을 사용해서 구현된 상황입니다.
시간이 얼마 남지 않아 프로젝트 기한 내에 모든 기능 구현 및 리팩토링이 구현이 어려울 것 같지만, 끝나도 틈틈이 리팩토링을 진행하려고 합니다. 개선이 시급한 부분 및 적절한 리팩토링 순서를 가이드 받고 싶습니다.
상태 끌어올리기라는 개념에 대해서 아래와 같이 이해했는데요, 제가 이해한 게 맞을까요?
A - B - C
ㄴ D
위와 같은 컴포넌트 구조가 있을 때, 어떤 데이터가 원래는 C에서 관리되어야 하지만, D에서도 해당 상태를 읽거나 수정해야 하는 경우가 있다 -> 공통 조상인 A에서 useState를 만들어 상태 관리해야 한다. 하지만 이렇게 되면 A -> B -> C 라는 프롭스 드릴링이 일어난다. 이걸 해결하기 위한 방법으로 context povider, 리덕스, 리코일 등이 있다.
글자 수 카운트 기능을 구현하면서 react-hook-form라는 모듈이 있다는 걸 알게 되었습니다. 입력 시마다 관련된 컴포넌트들이 갱신되는 걸 최소화해주는 모듈 같은데요, 막상 새롭게 모듈 사용법을 익히는 데에 추가 시간이 들 것 같아 막상 사용하지는 않았습니다.
다만 사용법을 익혀두기만 하면 유용하기 때문에 실무에서 많이 쓰일 것 같다는 생각은 들었는데요, 이렇게 많이 사용되는 모듈에는 또 무엇무엇이 있는지랑, 이것들에 대한 공부를 어느 정도를 해야 하는지 학습 방향을 알고 싶습니다.
특정 코드 또는 기능이 아닌 전체 리뷰를 많은 시간이 필요합니다. 다른 팀의 질문에도 답변해야 하므로 리뷰 및 리팩토링 검수 요청은 프로젝트 완료 후 말씀주세요. 😅
작성된 React "상태 끌어올리기" 개념은 정확합니다. 😃
공유한 학습 자료 목차에서도 알 수 있듯이 React 에코 시스템의 범위는 상당히 넓습니다. 실무에서 어떤 라이브러리를 사용할 지는 알 수 없습니다. 팀에서 기술 스택을 결정하는 것이니까요. 여기에 많이 사용 되는 라이브러리를 나열하는 것 보다 React 에코시스템 목차를 참고하는 것이 도움이 될 듯합니다. 🤔
질문 작성자
노지원
문제 상황
마켓 칼리의 후기, 문의 영역을 만들었고, 해당 부분에서 코드 리뷰를 받고 싶습니다. 현재 페이지내이션과 url param에 따른 동적 렌더링을 제외하고 구현이 되어있는 상태입니다.
리코일, 리덕스, context provider를 사용하지 않고 구현했습니다.
후기, 문의 등록할 때 글자 수 세는 부분에 있어 디바운스, 스로틀링 없이 구현하였습니다.
전반적으로 기초적인 훅만을 사용해서 구현된 상황입니다.
시간이 얼마 남지 않아 프로젝트 기한 내에 모든 기능 구현 및 리팩토링이 구현이 어려울 것 같지만, 끝나도 틈틈이 리팩토링을 진행하려고 합니다. 개선이 시급한 부분 및 적절한 리팩토링 순서를 가이드 받고 싶습니다.
상태 끌어올리기라는 개념에 대해서 아래와 같이 이해했는데요, 제가 이해한 게 맞을까요? A - B - C ㄴ D
위와 같은 컴포넌트 구조가 있을 때, 어떤 데이터가 원래는 C에서 관리되어야 하지만, D에서도 해당 상태를 읽거나 수정해야 하는 경우가 있다 -> 공통 조상인 A에서 useState를 만들어 상태 관리해야 한다. 하지만 이렇게 되면 A -> B -> C 라는 프롭스 드릴링이 일어난다. 이걸 해결하기 위한 방법으로 context povider, 리덕스, 리코일 등이 있다.
프로젝트 저장소 URL
환경 정보