리액트 기본 과정 정리 - 10 [앞으로의 공부 방향]

이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다.

 

리액트는 따지고보면 정말 간단한 라이브러리 입니다. 지금까지 공부해본 것들을 요약해보면

1. 재사용 가능한 컴포넌트를 만듭니다.
2. props 는 부모에게서 전달받는 값입니다.
3. state 는 자기 자신이 지니고 있는 데이터입니다
4. props 나 state 가 바뀌면 컴포넌트는 리렌더링 합니다.
5. LifeCycle API 를 통해 컴포넌트 Mount, Update, UnMount 전후로 처리 할 로직을 설정하거나 리렌더링을 막을 수 있습니다.

스타일링

리액트 컴포넌트를 스타일링 하는 방법은 여러가지 입니다. 일단, 가장 기본적인 방법으로는 일반 .css 파일을 만들어서 사용하는 것 입니다. React 기초 입문 프로젝트 – 흔하디 흔한 할 일 목록 만들기 에서는 우리가 이번 튜토리얼에서 했던 것 과 비슷한 난이도이며, CSS 로 스타일링을 하면서 할 일 목록 프로젝트를 만들게 됩니다.

 

또 다른 방법은 Sass 를 사용하는 것 입니다. 리액트 컴포넌트 스타일링, API 연동 실습 – NASA 에서 오늘의 우주 사진 가져오기 에서는 Sass 와, CSS Module 을 사용하여 프로젝트를 만들게 되며, HTTP 요청 라이브러리인 axios 로 NASA 의 오픈 API 를 요청하는 방법을 다뤄보게됩니다.

 

이 외에도, LESS 나 stylus 같은걸 사용하셔도 되고, 또는 js 내부에 스타일링을 바로 하는 방법인 styled-components 같은것을 사용하는 방법도 있습니다. styled-components 의 경우엔 리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components 에서도 다루게 되니 한번 참고해보시면 도움이 될 수도 있습니다.

 

상태관리

이번 전화번호부 프로젝트는 비교적 소규모 프로젝트였기 때문에 상태관리 하는 과정이 그렇게 복잡하지 않았습니다. App >> PhoneInfoList >> PhoneInfo 이런식으로 데이터를 쭉 내려주는 방식으로 작동했었죠. 하지만, 프로젝트가 복잡해졌을 때를 가정해봅시다. 그렇게 된다면, App 컴포넌트에서 사용하는 state 가 매우 복잡해지고 이를 업데이트 하는 로직도 굉장히 복잡해지겠죠.

 

이를 조금 더 체계적으로, 그리고 편하게 상태관리를 하기 위한 라이브러리들도 존재합니다. 대표적으로 Redux 와 MobX 가 있는데요, 리덕스의 경우엔 리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i) 에서 자세하게 공부해볼 수 있습니다.

 

불변성 유지

불변성을 유지하는건, 그렇게 어려운것 까지는 아니지만... 데이터의 깊이가 깊어지면 귀찮아지기 마련입니다. 불변성 유지 관련 라이브러리로는 대표적으로 Immutable.js 가 있고, 그리고 올해들어 새로 만들어진 Immer 라는 라이브러리가있습니다. Immutable.js 의 경우 React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기 에서 기초부터 활용방법까지 배울 수 있습니다.

 

라우팅

주소에 따라 다른 뷰를 보여줄 라이브러리도 필요하죠. 물론 직접 구현할수도 있겠지만, 오픈소스를 사용하는것이 더 안정적이고 효율적입니다. 지금 리액트 생태계에서 주요 라우터는 두 종류가 있는데요, 하나는 react-router 입니다. 또 다른 라우터는 Next.js 인데요, 이건 서버사이드 렌더링까지 매우 편하게 해주는 프레임워크 입니다. 리액트 라우터, 코드 스플리팅, 그리고 서버사이드 렌더링 에서는 리액트 라우터 기초부터 리액트 프로젝트 코드 스플리팅까지 배워보실 수 있으니 참고하세요.

 

테스팅

조금 더 탄탄한 코드를 작성하고, 여러분의 코드에 조금 더 자신감을 갖기 위해서 리액트 프로젝트에 테스팅을 하고 싶을 수도 있습니다. 테스트 관련해서도 많은 도구가 있는데요, Jest, Enzyme 을 통한 리액트 컴포넌트 유닛 테스팅 에서는 테스트의 기초와, Jest 와 Enzyme 이라는 도구를 사용해서 컴포넌트 테스팅을 하는 방법을 다룹니다.

 

타입 시스템

조금 더 체계적인 코드를 작성하고 싶다면 리액트 프로젝트에 타입 시스템을 적용하고 싶을 수도 있습니다. 이는 두가지로 나뉘어질 수 있는데, 첫번째 방법은 TypeScript 를 사용하는 것 입니다. 이에 대해선 TypeScript with React + Redux/Immutable.js 빠르게 배우기 에서 다룹니다. 또는 페이스북에서 만든 Flow 도 좋은 솔루션입니다.

 

가장 중요한 것, 프로젝트 진행하기

아무리 많은것을 배워봤자, 여러분들이 프로젝트를 만들지 않으면 쓸모가 없습니다. 그래서 정말 강조해서 말씀드리고 싶습니다. 만들고싶은 프로젝트를 만들기 시작하면서, 여러분의 프로젝트에 필요하게 될 것들을 하나하나 공부해보세요! 자연스레 실력을 쌓을 수 있을 것 입니다. 이에 대해선 제가 장담합니다. 저도 이렇게 하면서 개발 공부를 했었으니까요. 경험담을 말씀드려보자면 프로젝트를 하나하나 완성할때마다 점프를 하는 느낌이였습니다. 프로젝트를 하나 만들고, 그 프로젝트에서 내가 잘한 것, 그리고 못한 것에대해서 정리해보고, 고칠건 고치고 유지할건 유지해가면 점점 더 성숙한 프로젝트를 만들어가게 될 수 있을 것입니다.