(해당 포스팅은 '2019-06-10' 최종 수정되었습니다.)

 

정말 오랜만에 웹으로 찾아온 히니입니다 :>

 

이번에는 React에 대해서 배우고 정리해보겠습니다.

저는 이번에 '생활코딩 인강', '노마드코더 인강', 'React 공식사이트 문서', 'React.js를 이용한 모던 프런트엔드 구축 책'으로 공부 한 후 정리합니다.

미리 말씀드리지만, 윈도우 기준으로 설명합니다.

(나중에 맥 기준 설명 추가할 수 있으면 할게요!)


우리는 필요에 의해 배웁니다.

또는 미래의 필요를 대비해서 배우기도 하죠!

저는 이후 케이스이지만, 어쨌든 우리가 왜 React를 배울까? 어떤 쓸모가 있을까?에 대해서 먼저 설명하겠습니다.

 

( 바쁘시면 맨 아래쪽의 '정리'만 보셔도 됩니다. )

 


 

일단, React 는 무엇일까요?

 

React는 자바스크립트 라이브러리로 UI를 만들기 위해 사용됩니다.

페이스북의 첫번째 오픈소스 프로젝트랍니다.

 


 

여기서 알 수 있는 첫번째 장점, '라이브러리로서 다른 소프트웨어들과 섞어서 쓸 수 있다' 입니다.

 

노마드코더에서는 '장고, 루비온레일즈, nodejs'와 함께 쓴다고 하더군요!

 


 

두번째 장점은, 가장 큰 장점이라고 생각되는 '구조가 편리하다' 입니다.

== '컴포넌트 기반 개발'

== '조합형 사용자 인터페이스' 이라고 봐도 되겠습니다.

 

생활코딩에서 가장 강조하는 부분인데,

긴 줄의 코드를 작은 요소(component)들로 나누어서 작업할 수 있게 되어있으므로

가독성, 재사용성이 좋고 유지보수가 편리합니다.

'분할 정복' 방식을 적용할 수 있습니다.

 

[분할 정복 방식 링크]

 


 

세번째 장점은, '배우기 쉽다' 입니다.

 

html과 자바스크립트(js)의 기초를 아는 사람이라면 쉽게 배울 수 있습니다.

React에서는 공식 사이트에서 추천하는 바와 같이

(반드시 그럴 필요는 없습니다.)

주로 JSX를 사용하여 코드를 작성하는데, JSX가 자바스크립트 기반이기 때문입니다.

 

JSX란 JavaScript eXtension 의 약자로 페이스북이 개발한 자바스크립트 라이브러리입니다.

 

[JSX 연결링크]

 


 

네번째 장점은, '데이터의 단방향 흐름' 입니다.

 

React에서는 데이터가 부모요소로부터 자식요소로만 전달됩니다.

(이는 이후에 state, props 파트에서 보실 수 있으며, 인지만 하고 계시면 됩니다.)

 

[State, Props 연결링크]

 

 


(건너뛰셔도 됩니다)

 

페이스북에서는 React를 내놓으면서 MVC 패턴의 한계를 느끼고,

다른 컨셉인 Flux/Redux를 제안했습니다.

 

http://webframeworks.kr/tutorials/react/flux/

WebFrameworks.kr - Flux와 Redux

https://www.zerocho.com/category/React/post/57b60e7fcfbef617003bf456

(React) 리덕스 패턴(Redux pattern), react-redux

 

[Flux, Redux 링크]

 

Flux와 Redux 설명이 되어있는 포스팅입니다.

간단히 설명하자면, MVC(양방향 데이터 흐름) 가 대규모 어플리케이션을 다루기에 너무 복잡해서

페이스북이 다른 컨셉인 Flux/Redux(단반향 데이터 흐름) 를 제안했다는 것입니다.


 

데이터가 단방향으로 흐르기 때문에 복잡하지 않음.

State가 꼬이지 않고 명료하게 드러난다.

 


 

다섯번째 장점은, '효과적인 업데이트' 입니다.

== '반응형 UI 렌더링'

 

페이지가 리로드될 때, 웹사이트의 모든 부분을 다시 띄운다면 시간이 오래 걸리고 비효율적이겠죠.

하지만 React는 시각요소인 DOM을 만들어서 이전과의 차이만큼만 효과적으로 업데이트합니다.

 

수명주기 메소드의 shouldComponentupdate() 를 보면 이해하실 수 있습니다.

[ shouldComponentupdate 링크 ]

 


 

여섯번째 장점, '방대한 정보' 입니다.

 

React는 이미 방대한 커뮤니티와 라이브러리, 오픈소스가 있으므로

문제가 있으면 참고할만한 곳이 많습니다.

 


 

 

 

저도 아직 배우고 있는 단계이기 때문에 정확하지 않은 정보가 있을 수 있습니다.

여러 블로그를 보시고, 정보가 다르면 서치 후 알려주시면 감사하겠습니다 :>

 

다음 포스팅은 'React 설치' 입니다.

 

+ Recent posts