[React] "한입 크기로 잘라먹는 리액트" 강의 후기 (feat. 감정일기장)

인프런의 :"한입 크기로 잘라먹는 리액트(React.js) : 기초부터 실전까지" 강의를 토대로 프로젝트를 완료하고 작성한 글입니다.

 

리액트를 공부한 이유

• Vue.js에서는 템플릿 구문을 사용하는데 React.js는 javascript 문법을 그대로 사용하여 javascript 실력을 향상시킬 수 있다 생각했습니다.
• React.js를 배우면 React의 파생 기술인 React Native또한 금방 익힐 수 있어 데스크탑, Android, IOS에서 동작하는 애플리케이션을 배울 수 있다라는 장점때문에 배우고 싶다 생각했습니다.
• 많은 기업들이 React를 사용하는 만큼 취업에도 도움이 될 것이라 생각했습니다. 

 

프로젝트를 만들고 배운 것

✅배포 URL : https://yerm-react-diary.web.app/

✅Git Hub : https://github.com/yeafla530/react-diary

👣 깃허브에서 좀 더 자세한 내용을 보실 수 있습니다 

 

👉React hooks

16.8버전부터 추가되었으며 Class컴포넌트에 의존하지 않고 함수형 컴포넌트에서 상태와 다른 React기능들을 사용할 수 있게 해주는 코드

 

React hooks가 생긴 이유 

1. 클래스 컴포넌트 복잡성 감소
   • 기존엔 상태관리를 위해 클래스 컴포넌트를 사용함. 컴포넌트 로직이 여러 생명주기 메서드에 분산되고 코드 가독성과 유지보수가 어려워지는 문제가 있었음.
   • React hook은 함수형 컴포넌트에서도 상태관리와 생명주기 메서드와 같은 기능을 사용할 수 있게 해줌으로써 클래스 컴포넌트 복잡성을 줄여주고 코드의 가독성과 유지보수성 향상시킴
2. 코드 재사용성과 테스트 용이성
   
   • 클래스 컴포넌트에서는 상태관련 로직을 다른 메서드나 HOC(High Order Component)로 분리해야 했지만, Hook을 사용하면 커스텀 Hook을 만들어 상태 관련 로직을 재생성할 수 있음
   • Hook은 순수 자바크스립트 함수이므로 단위 테스트 등의 작업이 용이해짐
3. 함수형 프로그래밍과 호환성
   • 함수형 프로그래밍은 상태를 변경하는 대신 새로운 상태를 반환하는 방식으로 작동
   • React hook은 이런 함수형 프로그래밍 개념과 잘 맞고, 직접 변경하지 않고도 새로운 상태를 만들어 컴포넌트를 업데이트 할 수 있음
   • 컴포넌트 성능 최적화와 예측 가능한 동작을 도와줌

 

useState

• 컴포넌트 상태(state)를 관리하기 위해 사용하는 Hook
• 상태 변수와 변수를 업데이트하는 함수를 제공해 상태를 변경할 수 있다

 

useEffect

• 컴포넌트의 부작용(side effect)를 처리하기 위해 사용하는 Hook
• 렌더링 이후 실행할 코드를 만들 수 있다
• 컴포넌트가 렌더링될 때마다 실행되거나 특정 상태나 props가 변경될 때 실행할 작업을 정의할 수 있다

 

useContext

• Context API를 사용해 상태를 공유하기 위해 사용되는 Hook
• Context는 React 컴포넌트 트리에서 전역적으로 데이터를 공유할 수 있는 메커니즘 제공
• useContext는 별도 중앙 상태 관리 라이브러리를 사용하지 않고도 컴포넌트 간 상태를 공유하고 전파하기 위해 사용됨

 

useRef

• 일반적인 값이 아닌 특정 DOM요소나 컴포넌트 인스턴스에 접근하기위해 사용하는 Hook
• useRef로 생성된 객체는 컴포넌트의 전체 생명주기 동안 유지되며 값이 변경되어도 컴포넌트가 다시 렌더링 되지 않음

 

useReducer

• 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있는 Hook
• 상태 업데이트를 로직 컴포넌트 바깥에 작성할 수도 있고 다른 파일에 작성 후 불러올 수 도 있음
• state업데이트 로직을 reducer함수에 따로 분리할 수 있다

 

useMemo

• 이벤트 핸들러나 콜백 함수를 메모이제이션하기 위해 사용하는 Hook
• 이전에 계산된 값을 캐싱하기 위해 사용된다. 이전에 계산한 값을 기억하고 의존성 배열이 변경되지 않은 경우 이전에 캐싱된 값을 반환한다
• 의존성 배열은 useMemo가 호출되는 기준을 삼을 값들을 배열로 전달한다. 배열 내의 값이 변경되지 않으면 이전에 캐싱된 값을 반환하고 변경되었을 경우 새로운 값을 계산하고 캐싱한다. 

 

useCallback

• 콜백 함수를 메모이제이션 하기 위해 사용되는 Hook
• 주로 자식 컴포넌트에 전달되는 콜백함수가 자주 변경되는 경우 사용된다
• 의존성 배열 내의 값이 변경되지 않으면 이전에 생성된 함수를 반환하고, 변경되었을 경우에는 새로운 함수를 생성함

 

 

👉React의 상태관리

이 강의에서는 Context API를 이용한 상태관리를 진행했습니다.

useContext를 사용하여 Props Drilling을 방지하고, 전역상태에서 상태(state)를 관리할 수 있도록 했습니다.

이전에 제가 정리했던 글을 보면 중소규모의 프로젝트에서 Redux는 오버엔지니어링이라 판단되었고, 이후 간결한 문법과 외부에서 데이터를 사용할 수 있는 Context가 만들어졌습니다. 

그렇지만 이런 Hook API만으로 전역상태가 용이하진 않았고, 이후 Recoil, React Query 등이 생겨났습니다.

 

 

강의에서는 Context를 이용해 상태관리를 진행했지만 다른 상태관리들도 배우고 싶다는 생각을 하게 되었습니다.

그래서 해당 프로젝트를 새로운 기술을 적용하면서 계속 리뉴얼해나가고 싶습니다.

 

 

👉 localStorage를 이용한 데이터 저장

강의에서는 localStorage를 이용해서 일기 데이터를 저장하는 방식을 사용했습니다.

node.js와 MongoDB를 연결해서 데이터를 저장하는 방식으로 리뉴얼하려 합니다.

 

👉 firebase를 이용한 배포

firebase를 이용해 프로젝트 배포하는 방법에 대해 배웠습니다. 

프로젝트 build후에 배포를 진행했는데, 이전에 netlify나 heroku를 사용해서 무료 배포를 진행했었는데, firebase 배포 방식도 간편해서 좋았습니다.

이전에 AWS EC2를 이용한 배포를 진행하면서 요금이 부담됐었는데 부담없이 사용할 수 있어 좋았습니다!

 

 

리뉴얼 한다면?

• Redux를 통한 상태관리
• Recoil을 통한 상태관리
• React Query를 통한 상태관리
• styled-components 적용
• typescript 적용
• 단위 테스트 / 통합 테스트 진행 (jest + react-test-library)
• node.js와 MongoDB를 이용한 백엔드 연결
• 로그인 구현

 

🐣후기

React로 CRUD를 개발하고 배포까지 진행하면서 전체적인 React 흐름에 대해 알 수 있었고, React 핵심에 대해 공부할 수 있어 좋았던 강의 같습니다! 다른 분들도 츄라이🤗