[벨로퍼트] 앞으로의 공부 방향

요약

0. 리액트는 따지고보면 정말 간단한 라이브러리다. 

1. 재사용 가능한 컴포넌트를 만든다.

2. props는 부모 컴포넌트에게서 전달받는 값이다.

3. state는 자기 자신 컴포넌트가 지니고 있는 데이터다.

4. props나 state가 바뀌면 컴포넌트는 리렌더링되고, 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 같이 리렌더링된다.

5. LifeCycle API를 통해서 컴포넌트 마운트, 업데이트, 언마운트 전후로 처리할 로직을 설정하거나 리렌더링을 막을 수 있다.

 

스타일링

리액트 컴포넌트를 스타일링하는 방법은 여러가지이다.

일단, 가장 기본적인 방법으로는 일반 .css 파일을 만들어서 사용하는 CSS Module 이 있다. (참고 : React 기초 입문 프로젝트 - Todo List 만들기)

또 다른 방법은 Sass를 사용하는 것이다. (참고 : 리액트 컴포넌트 스타일링, API 연동 실습 - NASA에서 오늘의 우주 사진 가져오기)

이 외에도, LESS나 stylus, 또는 js 내부에 바로 스탈일링 하는 방법인 sytled-components 등을 사용하는 방법도 있다.

 

상태관리

앞서 만든 전화번호부 프로젝트는 소규모 프로젝트였기 때문에 상태관리하는 과정이 복잡하지 않았다. App -> PhoneInfoList -> PhoneInfo 이런 식으로 데이터를 쭉 내려주는 방식으로 작동했었다. 하지만 프로젝트가 복잡해졌을 때는 App 컴포넌트에서 사용하는 state가 매우 복잡해지고, 이를 업데이트하는 로직도 굉장히 복잡해질 수 있다.

이를 조금 더 체계적이고 편하게 상태관리를 하기 위해 여러 라이브러리들이 존재한다. 대표적으로 Redux와 MobX가 있는데, 리덕스의 경우에는 리덕스(Redux)를 왜 쓸까? 를 참고해보자.

 

불변성 유지

불변성을 유지하는 것은, 그렇게까지 어려운 것은 아니지만 데이터의 깊이가 깊어지면 귀찮아지기 마련이다. 불변성 유지 관련 라이브러리로는 대표적으로 Immutable.js가 있고, 최근 만들어진 Immer이라는 라이브러리가 있다. Immutable.js의 경우 컴포넌트에서 Immutable.js 사용하기 를 참고해보자.

 

라우팅

주소에 따라 다른 뷰를 보여줄 라이브러리도 필요하다. 직접 구현할 수도 있겠지만, 오픈 소스를 활용하는 것이 더 안정적이고 효율적이다. 지금 리액트 생태계에서는 react-router와 Next.js 두 종류가 있다. Next.js는 서버사이드 렌더링까지 매우 편하게 해주는 프레임워크이다. 리액트 라우팅에 대해 공부하고자 한다면 리액트 라우터 를 참고해보자.

 

테스팅

리액트 프로젝트 테스트 관련해서도 많은 도구가 있다. Jest와 Enzyme이라는 도구를 사용한 리액트 컴포넌트 유닛 테스팅 을 참고해보자.

 

타입 시스템

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

 

Github

벨로퍼트님의 튜토리얼을 보고 만든 전화번호부 토이 프로젝트

---

누구든지 하는 리액트 10편: 앞으로의 공부 방향 | VELOPERT.LOG