1. React란? 그리고 CRA 설정

안녕하세요 효근입니다! 오랜만에 블로그를 복귀했습니다! 회사업무랑랑 외주업무랑 너무 쌓이는 바람에 늦게 되었습니다 ㅠㅠ..

일단 오랜만에 돌아온 기념으로 여태까지 안올리던 React 에 대해 올려볼려 합니다! 한번 시작해 볼까요?

일단..

React 란?

페이스북에서 개발한 Javascript 라이브러리입니다.

재사용 가능한 UI를 생성할 수 있게 해줍니다.

Virtual Dom ( 가상 돔 ) 이라는 개념을 탑재하여, 변경된 부분만 선택적으로 렌더링 할 수 있습니다! 와! 

돔을 여럿 갖고 있지 않을 수 있어, html 파일이 단 한 개인 single page application 형태를 띄우고 있어요!

덕분에 최소한의 처리로 변경에 대하여 컴포넌트를 업데이트 할 수 있다는 장점을 갖고 있습니다!

아래 동영상을 보시면 가상 돔에 대해 더 자세히 이해하실 수 있으실 것 같아요!

https://www.youtube.com/watch?v=BYbgopx44vo

장점

가상 돔의 사용으로 인한 성능 향상이 있고

"라이브러리" 이기 때문에 타 프레임워크와 호환됩니다. 헉! ( ex: 아이오닉 )

또한 컴포넌트의 쉬운 유지보수와 높은 가독성을 가지고 있구요.

게다가 커뮤니티도 두텁습니다. React와 관련된 많은 라이브러리가 현재도 계속 업데이트 되고 있습니다.

단점

보여지는 뷰 단의 상태 변경, 처리는 정말 쉽지만,페이지를 할당하는 Route, axios & ajax 통신 등은 직접 구현해야합니다.

하지만 이 마저도 여러 모듈들이 잘 나와있어 크게 불편하지 않더라구요. 오히려 이로 인해 커스텀이 자유로워 장점이라고도 볼 수 있습니다! 하하핳!

IE를 미지원합니다.

polyfill 을 사용한다면 지원할 수 있지만, Css & JS 문법에 있어 호환성이 많이 떨어집니다. ( 사실 타 라이브러리도 비슷합니다. )

React 로 만든 서비스로 IE를 지원하는 것은 개발자의 건강과 정신상태에 좋지 못하여 추천드리지 않습니다... 읍읍....

 

 

 

그럼 세팅을 시작해 볼까요?

Create-react-app 이게 무엇일까요?

리엑트 프로젝트의 설정을 도와주는 모듈입니다! 

{yarn global add create-react-app

혹은

{npm install create-react-app -g

으로 CRA를 설치합니다!

{npx create-react-app [프로젝트 이름]

프로젝트 이름에 대문자와 띄어쓰기는 넣지 않습니다.

{cd [프로젝트 이름] yarn start 혹은 npm start

로 실행할 수 있습니다!!

실행하면으로는 이러한 화면이 뜹니다!!! 

그리고 프로젝트는 위와 같은 구조로 되어있습니다.

이상으로 React와 기초 설정에 대한 글을 마치겠습니다!! 

정말 오랜만이네요 하하... 저도 여러분을 오랜만에 보게되어 반갑습니다! 여러분도 그렇죠? 하핳!!! 

앞으로 다시 블로그 활동을 열심히 할 예정이니 많은 관심 부탁드립니다! 와!