[2019.03.22] React로 작업한 첫번째 프로젝트를 진행해보며..

이머시브 수강 전에 리액트를 어느정도 다뤄보는게 좋을 것 같아서 미리 공부를 하고 프로젝트를 진행해 보았다.

리액트는 앵귤러처럼 프레임워크가 아니라 라이브러리 형식으로 붙여서 사용하는거라 쉬울 줄 알았는데, 역시나... 뭐든 쉬운건 없나보다..

처음 리액트를 접할 때 기초개념을 잡아야 하는 부분이 의외로 많았다..

# 기초개념을 다져야 했던 부분

• ES6문법

• 렌더링 개념과 방식

• 가상의 DOM

• props와 state

블로그와 영상을 엄청나게 뒤져보며 공부하고 코드를 끄적여 본 다음에, 프로젝트를 따라서 작업해 봤다.

# 첫번째로 작업한 프로젝트 '전화번호부'

이름과 전화번호를 클릭하여 등록 버튼을 누르면 밑의 리스트에 해당 내용이 추가가 된다. 검색할 이름을 입력박스에 입력을 하면 실시간으로 리스트가 렌더링 되어 해당 이름의 리스트만 가져온다.

차근차근 코드를 이해하며 작업을 해보니, 어느정도 리액트의 개념이 잡히고 따라갈 수 있었다. 프로젝트를 진행해보면서 느낌점은..

사실 프레임워크가 아닌 라이브러리라고는 하는데 리액트에 대해 의아한 점이 한가지가 있었다.

'라이브러리 형식인데 왜 코드가 리액트 구조에 맞게 작성이 되어야 하는가'

프레임워크는 말 그대로, 정해진 프레임워크의 틀에 맞도록 코드가 작성이 되는 것이면, 라이브러리는 기존의 코드에 모듈처럼 붙여 쓰는 방식이라고 알고 있다..

그러나 리액트 프로젝트를 작업해보니, 리액트 프로젝트를 생성할 때 구조에 맞게 생성이 되고, 렌더링 하는 코드가 정해져 있다. 데이터를 주고받는 state,props도 그렇다. 어떻게 보면 리액트도 어느정도 정해진 틀이 있는 것 같은데 과연 라이브러리라고 부를 수 있는것인지 의문이 들었다. 내가 생각했던 '모듈'이란 개념에서는 많이 벗어난 느낌을 받았다.

리액트를 파보다보니, 공부할 내용이 더욱 더 많이 보였다. 

# 향후 공부할 내용

• 코드 스타일링 방식
• 상태관리 
• 불변성 유지
• 라우팅
• 테스팅
• 타입 시스템