이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
리액트는 따지고보면 정말 간단한 라이브러리입니다. 지금까지 공부해본것들을 요약해보자면..
- 재사용 가능한 컴포넌트를 만듭니다.
- props 는 부모에게서 전달받는 값입니다.
- state 는 자기 자신이 지니고 있는 데이터입니다.
- props 나 state 가 바뀌면 컴포넌트는 리렌더링 합니다.
- LifeCycle API 를 통해서 컴포넌트 마운트, 업데이트, 언마운트 전후로 처리 할 로직을 설정하거나 리렌더링을 막아줄수도 있습니다.
이제 우리가 배운것들을 통해서 앞으로 여러분들은 정말 멋진 프로젝트들을 만들어낼 수 있을 것 입니다.
이번 섹션은 누구든지 하는 리액트의 마지막 편인데요, 이번엔 앞으로 여러분들이 멋진 프로젝트를 만들어가기 위해서 어떤 것들을 더 공부해야 할 지 다뤄보겠습니다. 새로 배워야 할 것들 중에서는 제가 이미 정리해둔 것들도 있으니, 유용할만한 블로그 포스트들의 링크도 남겨두겠습니다.
스타일링
리액트 컴포넌트를 스타일링 하는 방법은 여러가지 입니다. 일단, 가장 기본적인 방법으로는 일반 .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 도 좋은 솔루션입니다 (이 도구에 대한 포스트는 조만간 올라올 예정입니다.)
가장 중요한것, 프로젝트 진행하기
아무리 많은것을 배워봤자, 여러분들이 프로젝트를 만들지 않으면 쓸모가 없습니다. 그래서 정말 강조해서 말씀드리고 싶습니다. 만들고싶은 프로젝트를 만들기 시작하면서, 여러분의 프로젝트에 필요하게 될 것들을 하나하나 공부해보세요! 자연스레 실력을 쌓을 수 있을 것 입니다. 이에 대해선 제가 장담합니다. 저도 이렇게 하면서 개발 공부를 했었으니까요. 경험담을 말씀드려보자면 프로젝트를 하나하나 완성할때마다 점프를 하는 느낌이였습니다. 프로젝트를 하나 만들고, 그 프로젝트에서 내가 잘한 것, 그리고 못한 것에대해서 정리해보고, 고칠건 고치고 유지할건 유지해가면 점점 더 성숙한 프로젝트를 만들어가게 될 수 있을 것입니다.
오프라인 강의
그리고 깨알같은 광고를 하자면 저는 패스트캠퍼스에서 오프라인 강의 를 하고 있습니다. 10주동안, 이 강의에선 위에서 다룬 내용들을 모두 다루게 되며, 다양한 실무 노하우와, 추가적으로 여러분들이 웹 개발을 하는데 도움이 될 수 있도록 백엔드 지식도 충분히 다루게 됩니다. 약 3개월마다 새로운 강의 기수가 시작되니, 제대로 공부해보고싶고, 기회가 된다면 한번 수강해보시는것을 추천드립니다.