react.js 공부

[eyabc]

https://velopert.com/3260

[eyabc]

리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가?

브라우저의 Workflow

DOM Tree 생성 브라우저가 HTML 을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM 노드(Node) 로 이뤄진 트리를 만들어요. 각 노드는 각 HTML 엘리먼트들과 연관되어있죠.

Render Tree 생성 그리고, 외부 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱해요. 스타일 정보를 사용하여 DOM 트리에 따라 새로운 트리, 렌더트리를 만들어요.

Render Tree 생성 – 그 뒤에선 무슨일이 일어나고 있는가..? Webkit 에서는 노드의 스타일을 처리하는 과정을 ‘attachment’ 라고 불러요. DOM 트리의 모든 노드들은 ‘attach’ 라는 메소드가 있어요. 이 메소드는 스타일 정보를 계산해서 객체형태로 반환합니다.

이 과정은 동기적(synchronous) 작업이구요, DOM 트리에 새로운 노드가 추가되면 그 노드의 attach 메소드가 실행됩니다.

렌더 트리를 만드는 과정에선, 각 요소들의 스타일이 계산되구요, 또 이 계산되는 과정에서 다른 요소들의 스타일 속성들을 참조합니다.

Layout (reflow 라고도 불립니다) 렌더 트리가 다 만들어지고 나면, 레이아웃 과정을 거쳐요. 각 노드들은 스크린의 좌표가 주어지고, 정확히 어디에 나타나야 할 지 위치가 주어집니다.

Painting 그 다음 작업은 렌더링 된 요소들에 색을 입히는 과정입니다. 트리의 각 노드들을 거쳐가면서 paint() 메소드를 호출해요. 그러고나면, 스크린에 원하는 정보가 나타나는거죠.

[eyabc]

Virtual DOM 을 만나보세요

DOM 을 조작했을 때 어떤 작업이 이뤄지는지 알겠죠? DOM에 변화생기면, 렌더트리를 재생성하고 (그러면 모든 요소들의 스타일이 다시 계산됩니다) 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복되는거죠.

복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생해요. 그 뜻은 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만듭니다.

자, 이 이부분에서 Virtual DOM 이 빛을 발합니다! 만약에 뷰에 변화가 있다면, 그 변화는 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달해줍니다. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것 이지요.

~~ DOM 조작의 실제 문제는 각 조작이 레이아웃 변화, 트리 변화와 렌더링을 일으킨다는겁니다. 그래서, 예를 들어 여러분이 30개의 노드를 하나 하나 수정하면, 그 뜻은 30번의 (잠재적인) 레이아웃 재계산과 30번의 (잠재적인) 리렌더링을 초래한다는 것이죠.

Virtual DOM 은 그냥 뭐 엄청 새로운것도 아니고, 그냥 DOM 차원에서의 더블 버퍼링이랑 다름이 없는거에요. 변화가 일어나면 그걸 오프라인 DOM 트리에 적용시키죠. 이 DOM 트리는 렌더링도 되지 않기때문에 연산 비용이 적어요. 연산이 끝나고나면 그 최종적인 변화를 실제 DOM 에 던져주는거에요. 딱 한번만 한는거에요. 모든 변화를 하나로 묶어서. 그러면, 레이아웃 계산과 리렌더링의 규모는 커지겠지만, 다시 한번 강조하자면 딱 한번만 하는거에요. 바로 이렇게, 하나로 묶어서 적용시키는것이, 연산의 횟수를 줄이는거구요.

사실, 이 과정은 Virtual DOM 이 없이도 이뤄질수 있어요. 그냥, 변화가 있을 때, 그 변화를 묶어서 DOM fragment 에 적용한 다음에 기존 DOM 에 던져주면 돼요.

그러면, Virtual DOM 이 해결 하려고 하는건 무엇이냐? 그 DOM fragment를 관리하는 과정을 수동으로 하나하나 작업 할 필요 없이, 자동화하고 추상화하는거에요. 그 뿐만 아니라, 만약에 이 작업을 여러분들이 직접 한다면, 기존 값 중 어떤게 바뀌었고 어떤게 바뀌지 않았는지 계속 파악하고 있어야하는데 (그렇지 않으면 수정 할 필요가 없는 DOM 트리도 업데이트를 하게 될 수도 있으니까요), 이것도 Virtual DOM 이 이걸 자동으로 해주는거에요. 어떤게 바뀌었는지 , 어떤게 바뀌지 않았는지 알아내주죠.

마지막으로, DOM 관리를 Virtual DOM 이 하도록 함으로써, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용을 하지 않아도 되고, 특정 DOM 을 조작할 것 이라던지, 이미 조작했다던지에 대한 정보를 공유 할 필요가 없습니다. 즉, 각 변화들의 동기화 작업을 거치지 않으면서도 모든 작업을 하나로 묶어줄 수 있다는거죠. ~~

[eyabc]

리액트하다가 막혔을 때 생각해볼 4가지 질문

, Anti-pattern 은 있어도 Best Practice 는 존재하지 않아야 한다 개발자 개개인마다 문제를 해결하는 방법이 다르고, 코딩하는 스타일도 다르기 때문이에요. 저는 리액트는 개발자로 하여금 매우 높은 자유도를 주는 라이브러리라고 생각해요. 한가지 문제라고 하더라도 그걸 해결하는 방법이 여러개고, 그 중 자신이 가장 마음에 드는 방식으로 해결하면 되니까요.

리액트를 하다보면 자주 생각하게 되는 질문이, 내가 과연 지금 제대로 하고 있는건가..? 입니다. 거기에 대한 답변은, 일단 자신이 생각하기에 가장 최적의 방법으로 진행해보세요. 계속해서 꾸준히 개발을 진행하면 서서히 개선해야 할 부분도 보이고 그렇게 고쳐나가다보면 여러분 자신에게 딱 맞춰진 편안한 구조, 스타일, 틀이 만들어질것입니다. 각 문제들마다 여러가지의 해결 방법이 존재합니다.

어떤 해결방법을 골라야할까요? 이상적으로는.. 그 중 하나만 골라야 하겠죠, 하지만 여러분에게는 정말 많은 선택권이 주어져있고 어떤상황에서 뭘 쓰는게 좋을지 모릅니다.

그래서 여러분은 헷갈리기 시작하고.. 결국엔 막히죠.

가끔씩은 여러분이 겪고 있는 문제가 흔한 문제임에도 불구하고 딱 정해진 방법이 없을때도있어요.

“파일 구조는 어떻게 해야할까?” 여러분 마음대로 하세요

“내가 필요한 최소한의 도구는 어떤것들이 있을까?” 케바케입니다.

음.. 딱히 도움되는 답변은 아니지요?

우리가 원하는건, 간단하고 명료한, 원칙적인 해결방법인데, 리액트 생태계에선.. 그런게 없습니다. 그러면.. 어떡할까요?

포기해요?

[eyabc]

여러분 자신에게 질문을 하는것이 중요해요

4. “지금 결정을 내리고, 나중에 다시 봐도 될까?” 가끔씩은 문제를 어느정도 해결할 수 있을 정도로만 코드를 짜놓고, 나중에 더 개선하는것이 가장 좋을 때도 있습니다.

만약에 여러분들이 작업을 하는데 모든걸 처음부터 완벽하게 해결하려고 노력한다면, 오버엔지니어링을 하게 될 가능성이 있고, 코드가 보다 더 복잡해질 위험이 있습니다.

여러분은 그 코드가 앞으로 어떻게 사용 될 지 예상하기 힘듭니다. 여러분이 생각했던것보다 규모가 커지지 않을수도 있고, 해당기능이 여러분들의 서비스에서 한달 안에 사라져버릴수도 있습니다. (나는 이런걸 많이 겪었어요)

하지만, 이 생각은 적당한 선에서만 하세요! 그렇다고해서 모든걸 대충하고 넘기면 나중에 quick fix 를 하는데 시간이 너무 많이 소비될지도 모릅니다. 적당한 밸런스를 맞추세요.

개발을 하다보면 내가 하는 방식이 과연 최선의 방식인가? 남들은 이렇게 안하고 있는 것 같은데… 라는 생각이 들 때가 있습니다. 만약에 그 시점에서 자신이 이게 최선의 방식이라고 생각된다면, 그게 여러분에겐 바로 올바른 해결방안입니다. 하지만 물론 시간이 지나고나면, 가끔씩은 아! 이 때 했던걸 더 제대로 할 수도 있었구나! 라고 깨닫게 될 때도 많습니다. 그렇다고 그전에 만든 해결방안이 틀린건 아닙니다. 그 부분은, 개선하면 됩니다. 여기서 중요한점은, 그렇게 계속해서 발전해나가면서, 개발자로서 더더욱 성장하는것입니다.

[eyabc]

누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기

[eyabc]

• jQuery -> cdn
• react project를 제대로 작업하려면 Node, yarn, Webpack, Babel 등의 도구를 설치하여 프로젝트를 설정해주어야 한다. 페이스북은 create-react-app를 통하여 이 작업을 간단하게 준비해줄 수 있답니다

webpack, babel 의 용도 component를 JSX라는 문법으로 작성함. Webpack은 JSX파일을 결합. Babel : JSX를 비롯한 새로운 자바스크립트 문법들을 사용하기 위함

준비사항

1. Node.js : Webpack과 Babel 과 같은 도구들이 자바스크립트 런타임인 Node.js를 기반으로 만들어져있다.
2. Yarn : npm의 개선된 버전. 속도, 캐싱이 더 나은 시스템 npm - node.js와 같이 설치되는 패키지 매니저 도구 프로젝트에서 사용되는 라이브러리를 설치&라이브러리들의 버전 관리

create-react-app 설치 npm install -g create-react-app or yarn global add create-react-app

create-react-app [name]

cd [name] yarn start