1. Welcome to React! 본 포스팅은 리액트를 처음으로 공부하기 시작하는 사람들을 위해 제작되었다. 구글에 영어로 react라고만 쳐봐도 기본적인 개념을 배울만한 블로그는 아주 많지만 막상 처음부터 하나하나 따라할 수 있는 튜토리얼과 같은 게시글이 없는 것 같아 이 부분에 초점을 맞춰 포스팅을 써보려 한다. 자바스크립트의 라이브러리 우선 리액트는 페이스북이 직접 개발한 자바스크립트의 라이브러리이다. 즉, 문법과 기능에 확장이나 변화가 있을 수는 있지만 그 뼈대는 자바스크립트에 있다는 것이다. 따라서 리액트를 공부하기 전에 자바스크립트의 기본적인 변수선언(const, let, var 등) 같은 문법을 알아둔 후 공부하는 것이 좋다. 참고하면 좋을만한 사이트 : https://opentutorials.org/course/743 Virtual Dom 필자가 리액트를 공부하며 처음으로 느낀 장벽은 바로 virtual DOM이라는 개념이다. 이 개념에 대해 구글에 검색해본 결과 다음과 같이 요약할 수 있다. 변한 부분만 다시 그린다. 이는 다시 말하면 리액트가 출시되기 전까지 모든 프레임워크는 변하지 않은 부분도 불필요하게 다시 그리고 렌더링 했다는 것이다. 아래에서 Angular라는 구글의 웹 개발 프레임워크와 React의 차이를 예시를 들어 비교해보자. 출처 - 블로그 : http://blog.naver.com/PostList.nhn?blogId=songc7 위의 두 그림을 차례로 그린다고 가정하자. 우선 누가 어떤 방법으로 그리던 모두 처음 그림은 캔버스에 백지상태부터 그려야 한다. 하지만 두번째 그림을 이어서 그려야 할때 Angular는 새로운 캔버스에 전체 그림을 다시 그려서 우리에게 보여주는 반면 리액트는 처음과 두번째 그림을 비교해서 달라진 부분만 찾아서 그린 후 원래 그림에 덮어서 보여준다. 여기서 "속도"의 차이가 명확하게 발생한다. Angular을 포함한 기존의 프레임워크들은 전체 그림(
댓글
댓글 쓰기