이 글은 https://facebook.github.io/react/tutorial/tutorial.html 의 튜토리얼을 따라해본 것이다.
환경 설정을 마쳤다면(환경 설정이 안되어 있다면 이글을 확인), https://codepen.io/ericnakagawa/pen/vXpjwZ?editors=0010 에서 starter code를 받아보자.
- components 밑에 app.jsx 파일을 만들어 Square , Board , Game class를 생성하여 export 한뒤 entry.jsx 에서 해당 모듈들을 구현한다.
- src/css 폴더 밑에 style.css를 만들어 starter code에 있는 css를 그냥 복붙하자.
- index.html 에 html 코드들도 복붙해서 튜토리얼을 따라할 기본적인 코드를 구성한다.
- webpack 으로 빌드해서 브라우져에서 확인해보자
환경 설정과 starter code가 브라우져에서 실행 되었다면 튜토리얼을 따라가는데 큰 문제가 없을 것이다.
튜토리얼에 나오는 몇가지 중요한 점만 확인해보자
- Immutability
그 중간에 객체의 값을 변경하는데 slice() 를 사용하여 복제한다음 값을 변경하고 다시 state에 할당하는 작업이 있다. 이 부분에 대해 튜토리얼에서 꽤나 중요하게 언급(bold 처리된 텍스트)하는데,왜 복사해서 값을 변경하고 다시 할당 하는 작업(Immutability 라고 부른다)가 중요하냐면, ReactJS는 변경된 데이터에 대해 re-rendering 작업을 하는데 값을 변경하는 작업을 immutability하게 진행 되었다면 변경여부를 판단하는게 간단하고 쉽지만(주소값만 체크) mutated 객체의 경우 변경 여부 확인을 위해 내부 모든 값을 확인해야하고 값 변경 작업이 복잡했을 경우 re-rendering 을 위한 값 변경 여부 체크 프로세스가 기하급수적으로 복잡해지기 때문이다. 따라서 ReactJS에서는 특히 Immutability가 중요하다.
- Functional Components
이 함수는 stateless functional components 라고 불리는데 render() 함수만 가지는 컴포넌트이다 Functional Components 의 경우작성하기가 쉽고 향후에 ReactJS가 해당 컴포넌트에 대해 최적화를 진행하기 때문에 목적에 따라 해당 컴포넌트를 정의하는것이 중요할 것 같다. - Key
ReactJS에서 리스트 컴포넌트를 렌더링 할 때 중요한 포인트가 Key 이다. 리스트 아이템이 업데이트(추가,삭제,수정)가 될 때 React는 그 중 어떤 객체가 변경 되어서 re-rendering 해야하는지 파악해야한다. 그때 사용되는것이 Key 이다. 리스트 객체에 Key를 할당하는것은 strongly recommended 하다. (Global unique 일 필요는 없고 그 리스트 내에서만 unique 해도 문제 없다.)
AngularJS의 문제점으로 느린 속도가 많이 지적되었던 것으로 아는데 이런 몇가지 요소들을 지켜 준다면 속도 이슈 없이 View를 구성 할 수 있을것으로 생각된다.
튜토리얼 자체는 어렵지 않지만 ReactJS를 처음 시작하기 위해서는 ReactJS와 함께 작동하는 에코시스템들(파이프라인)에 대해 이해하고 사용할 줄 알아야 한다는 점이 꽤나 피곤한것 같다.(러닝커브가 ReactJS에서만 발생하는 것이 아니라 webpack이나 Babel , 사실상 webpack에서 발생).
튜토리얼 자체는 step by step 으로 꽤나 친절하게 그리고 추가 문제까지 제공해주는데 따라가기 쉽다. Square에서만 이벤트가 시작되는 초기 단계에서 Square에서 발생된 이벤트가 Game 객체의 state를 변경시키는 것까지로 마무리 된다. 소스코드를 다시 보고 추가 문제를 풀어봐야겠다.
ReactJS에서 또다른 특징이 Server-side Rendering 으로 알고 있는데, 튜토리얼 후에 그 부분과 Ajax처리.. Fetch 인지 Request인지 그 부분도 공부해야할 필요가 있을것 같다.
튜토리얼을 따라가며 만들었던 소스는 github에 올려두자