다은

최대한 수업시간에 배운 컴포넌트와 혹을 사용하되, 코드 리뷰를 통해서 최적화를 거치는 작업을 하였으면 좋겠습니다 (ex : 이미지 컴포넌트의 lazy loading에 있어서 transition의 추가 등)

React

참고자료 : 10 Key Reasons Why You Should Use React for Web Development

사소한 이유

현재 배우고 있는 라이브러리이고, 실습해 볼 기회가 없었는데 이번 기회로 실습해 볼 수 있다.
React의 경우 jsx를 사용함으로써 선언적인 프로그래밍을 통하여 클라이언트를 구현할 수 있는데, 지금까지 배운 내용(함수형 프로그래밍 등)을 React와 함께 실습해 볼 수 있는 기회임
Vanilla JS를 통하여 컴포넌트 단위로 추상화 하는 방법을 위주로 실습을 해봤음. 이를 React를 통하여 적용하면서 Vanilla JS와 어떤 점이 다른지, 비교하면서 코드를 짜보고 싶고(왜 React가 적용되었는지 느껴보기), UI를 구현할 때 가장 중요한 요소인 상태를 추상화하고 관리 하는 방법에 대해서 배울 수 있을 것이라고 기대됨.
또한, 현재 가장 많이 사용되는 라이브러리이기 때문에 검색하면서 관련자료를 찾기가 쉬움 (개인적으로 이게 제일 큰 이유..)

확장성 : 후에 Next.js나 React Native, Gatsby, Electron 로 확장 가능 React Native로 추후에 애플리케이션으로 확장할 수 있고(현재 구현하는 기능은 애플리케이션 형태에 더 적합한 기능일 수도 있음), “정보 공유”의 성격이 있을 만큼 SEO가 중요할 것이라고 생각됨 (Next.js)

in 리액트 공식문서

React Context API + useReducer

프로젝트의 규모가 별로 크지 않기 때문

전역적으로 관리해야 할 상태가 많지 않을 것이라고 예상함

리액트 본연의 기능(built-in), third-party 라이브러리를 설치하지 않아도 됨.

→ 사실 Redux 사용해도 상관 x, 그에 따른 장점이 있다 생각하기 때문에 여러분의 의견을 따를게요

(관련자료 : 리덕스 잘 쓰고 계시나요?)

Redux의 기능

notion image

Emotion

비슷한 라이브러리인 styled component랑 유의미한 차이는 없다고 함. 개발자 입장에서 익숙한걸 사용하자는 의견 (사용법도 완전히 똑같다)

CSS-in-JS를 사용하는 이유

style( css 파일 )과 component를 굳이 mapping 하지 않아도 됨, 단일 컴포넌트의 내용을 한 파일에서 확인할 수 있음

또한, 해당 컴포넌트에서만 스타일을 정의할 수 이으므로, 사이드 이펙트 확률이 적어짐 (이는 vue에서 styling을 할 때 scope를 명시하던 것과는 대조적)

단위 테스팅 가능

Axios

관련 자료 : [번역] 입문자를 위한 Axios vs Fetch

SNS 기능을 만드는 만큼, 네트워크 요청에 대한 기능이 중요하게 사용될 것이라고 생각함. api 호출을 처리하기위해서 axios를 사용하면 fetch api보다 더 많은 기능을 사용할 수 있고, 헨들링할 수 있음

Geek for Geeks

Formik / React Hook Form

참고 문서 : 리액트(React) Formik / Yup

우리가 구현하는 기능에 로그인과 회원가입 등 Form을 자주 사용하게 될 것이라고 예상됨

그러나 React를 이용하여 Form을 직접 구현하는데에는 한계가 있음. (공식문서 - 유효성 검사, 방문한 필드 추적 및 폼 제출 처리와 같은 완벽한 해결을 위한다면 Formik이 대중적인 선택 중 하나 입니다)

선협님도 강의에서 쓰라고 강추하심 (선협님 : Formik 이라는 훌륭한 라이브러리가 있어서 왠만하면 그 라이브러리를 사용해서 폼을 관리하는 것이 좋다.)

직접 구현하는 useForm의 문제점 - 우리가 사용하는 form 은 사용자 이름, 비밀번호, 책 구절 적기 등의 수많은 input이 존재할 것이고 이 정보를 저장하기위하여 일일히 useState와 handleChange를 작성해야함

React Hook Form을 사용할 수도 있다. (어쨌든 폼에 대해서는 라이브러리를 사용하면 좋겠습니다)

Formik - 좀 더 React 스러운 방식, 사용이 간결함, 현재 가장 많이 사용되는 중(=자료가 많다) React Hook Form - uncontrolled 로 제어할 수 있기 때문에 불필요한 re-rendering 방지, Formik의 성능 이슈를 ⬇
참고자료 : React Hook Form VS Formik , [React] Form 상태 다루기 (Formik vs react-hook-form)

LOTTIE

참고자료 : 로티(lottie): 애니메이션을 코드로 만들자(1), 공식 사이트, [REACT] 리액트 lottie-web 으로 애니메이션 넣기

낙엽 떨어지는 에니메이션을 언급하셨던게 기억나서, 사용하면 좋을 라이브러리

gif의 경우 앱이 무거워지는 문제가 생김(특히나 에니메이션은 주기능이 아닌데도), LOTTIE를 사용한다면 벡터 기반의 에니메이션을 사용할 수 있음

개발할 때 적용하기 좋음