도화지 위의 퍼즐, React [1]

지난 포스트에 html, css, javascript를 하나의 도화지속 그림들로 묘사했다. 웹상에서 사람들이 도화지에 그려진 아름다운 그림 혹은 재밌는 그림책을 보는데 굳이 왜 react가 필요한 것일까?? 그 이유를 알기 위해서는 우리는 어떤 웹들이 존재하는지 알필요가 있다.

우리가 알고있는 웹은 수없이 다양하다. 은행페이지, 학교공지사항페이지, 페이스북페이지, 트위터페이지, 네이버페이지, 유투브페이지 등등 우리가 보는 웹이라는 도화지는 생각보다 많은 기능을 가지고 있고 많은 정보를 제공해준다. 혹시 해리포터속에서 예언자일보(신문), 마루더즈 맵(비밀지도) 그리고 책등을 보게되면 우리는 움직이는 그림, 글들을 볼 수 있다. 현재 웹페이지의 역할을 주로 이런것들이 이룬다. 움직이는 화면 다시말해 동적인 화면들이 나오게 된다. 모든 화면들이 매순간 하나하나 모든 부분들이 같이 바뀌게 된다면 얼마나 번거로운 일일까? 이런 부분들을 해결해 주기위해서 나오게 된것이 react라고 생각한다. 즉 react는 도화지를 여러갈래로 찢어서 퍼즐조각으로 나누어 다시 결합하는 것이다.

Airbnb의 React도화지

여기서 줄무니로 표시된 곳이 바로 퍼즐조각들이다. 물론 퍼즐 속 퍼즐이 존재할 수 있다.

그렇다면 react를 사용해서 웹페이지를 만들때, 위의 예시대로라면 우리가 알아야할 것은 간단하지 않을까?

1. 어떻게 도화지를 만드는가?
2. 어떻게 퍼즐조각을 만드는가?
3. 퍼즐조각의 어떤 기능을 가지는가?
4. 퍼즐조각을 모아서 하나의 퍼즐조각을 만들 수 있는가?

앞으로 위의 6가지 기준대로 React에 대해서 포스팅할 예정이다. 필자는 현재 배우는 도중이며 내식대로 이해한 부분을 적는 것이기에 잘못 이해한 부분이나 올바르지 못한 적용사례가 다분할 수 있다. 이런 부분에 지적 및 비판은 언제나 환영이며, 글을 남겨주는 것 만으로도 감사하게 생각하게 생각할 것입니다.