본문 바로가기

WEB

[React 정리] 우리는 React를 왜 배우는가?

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

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

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

저는 이번에 '생활코딩, 노마드코더, React공식사이트'로 공부 한 후 정리합니다.

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

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

 

 


 

React를 배우는 이유?

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

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

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

 


 

일단, React 는 무엇일까요?

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

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

 


 

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

먼저, 모델-뷰-컨트롤러 패턴을 아시나요?

알고 계시면 구분선 다음으로 넘어가 주세요!

 


 

https://m.blog.naver.com/jhc9639/220967034588

위의 블로그에 잘 설명되어 있어서 가져왔습니다.

간단히 설명하자면,

컨트롤러: 모델에 명령을 보냄으로써 상태를 변경

모델 : 상태에 변화가 있을 때 컨트롤러와 뷰에 통보

뷰 : 모델로부터 정보를 얻어와 사용자가 볼 결과물 생성

이렇게 구성되어 있습니다.

 

 


 

React는 MVC에서 View의 역할을 합니다.

그러므로 다른 역할의 소프트웨어들과 섞어서 쓸 수 있다는 장점이 있습니다.

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

 

 


 

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

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

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

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

 

 


 

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

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

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

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

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

아래는 JSX에 대한 설명입니다.

 

 


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

(참고)

자바스크립트보다 쉽게 html 태그를 작성할 수 있도록 만들었으며, 웹 브라우저의 인식 전에 변환이 필요합니다.

JSX 내에서 {} 중괄호를 사용하여 자바스크립트 식을 사용할 수 있고,

If-else 문은 사용할 수 없지만 조건문은 사용할 수 있으며 (? 연산자 주로 사용),

조건들 안에 함수와 JSX를 사용할 수 있습니다.

 


 


 

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

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

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


 

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

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

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

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

 

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

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

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

 


 

react가 MVC 패턴을 따르고 있는지, Flux/Redux 패턴을 따르고 있는지 헷갈려서 '노마드 코더'의 니꼴라스 씨에게 질문하고 얻은 답변입니다 :>

(thanks for your kindness!)

 

간단히 말하자면, 무슨 패턴인지는 중요치 않다는 것!

react가 주로 V의 형태를 띄는 것뿐이니, M,C로 될 수 있다고 말했습니다 ㅎㅎㅎ

그래서 그냥 React를 사용해보면 나중에는 왜 무슨 패턴인지가 중요치 않은지 알 수 있을 거라는 니꼴라스 씨!

나중에 이 포스팅을 다시보고 내가 이해하길 바라며... 일단 넘어가겠습니다.



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

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

 


 

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

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

하지만 React는 캐시를 만들어서 이전과의 차이만큼만 효과적으로 업데이트합니다.


 

그 증거로 라이프사이클 메서드를 들 수 있는데요.

React는 메서드가 순차적으로 진행됩니다.

렌더 시 : componentwillMount() -> render() -> componentDidMount()

업데이트 시 : componentWillReceiveProps() -> shouldComponentupdate() -> componentWillUpdate() -> render() -> componentDidUpdate()

따라서, 업데이트 할 때에 shouldComponentupdate 메서드로 업데이트할 필요가 있는지 확인합니다.

(캐시와 비교해서 변경된 사항이 있는지)

 



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

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

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

 


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

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

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

'WEB' 카테고리의 다른 글

[React 공부] React에서 scss 쓰기  (0) 2019.05.12
[React 정리] 우리는 React를 왜 배우는가?  (0) 2019.05.05
LAMP 설치  (0) 2019.03.01
PHP: JSON으로 외부 url 데이터 따오기  (0) 2019.02.22