비실이의 개발 성장기

react 입문 본문

프론트엔드/react.js

react 입문

DubbingLee 2016. 10. 15. 20:35



* react.js 란??



페이스북이 만든 javascript 오픈소스 라이브러리


주로 Sing Page Application 개발에서 사용한다.


react는 사용자에게 직접적으로 보여지는 View를 담당한다.


react의 특징으로는 '데이터의 흐름이 상위에서 하위로 전달되는 단방향' 이라는 점과, react만의 virtual DOM을 사용한다는 점



front개발은 그저 html로 구역을 나누고, css로 꾸미며, js로 여러 이벤트를 넣어서 보여주기만 하면 되면 끝으로 알고있었다.


더군다나 MVC아키텍쳐에서 View단의 데이터들을 다음 이동되는 페이지로 전달해주려면 back-end를 최소 한번은 거쳐야 데이터를 다음페이지로 


전달해줄 수 있다고 알고있었다.



그런데 react는 달랐다.


back-end에서 전달받은 데이터를 다음 이동되는 페이지로 넘겨줘야 할 경우, 데이터를 props에 담아 이동할 컴포넌트에 properties로 지정해주면 된다.


back-end를 거칠 필요가 없었다. 대신 한번에 모든 데이터들을 내려주는 경우가 많았다.


또, props로 데이터를 전달하려면 반드시 상위 컴포넌트에서 하위 컴포넌트로 만 가능하다. 


이렇기에 개발에 들어가기 전, 전체적인 화면구성을 tree형으로 최소 한번 이상 그려보게 되었다.


react를 하기 전까지는 front구성에 들어가는 페이지가 몇장이 나오는지 그려본 적은 있었으나, 페이지를 수직적 구조로 그려본적은 없었다.




* 잘못 된 내용이 있다면 댓글로 남겨주세요.


 

 



'프론트엔드 > react.js' 카테고리의 다른 글

componentDidCatch() 함수 확인  (2) 2018.08.30
Redux란?  (1) 2017.07.08
react-router v3 -> v4 마이그레이션 작업 삽질기  (0) 2017.07.01
react.js 공부를 위한 초기 환경설정  (0) 2017.01.22
react 알게된 점  (0) 2016.11.01
react 입문  (0) 2016.10.15
0 Comments
댓글쓰기 폼