[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 15회차 미션

패스트캠퍼스 프론트엔드 인강 15일차 hoisting을 배우고 리액트의 필요성에대해 공부하였다.

 

hoisting

hoisting이란 자바스크립트에서 아직 선언되지않은 변수또는 함수를 끌어올릴수있는 자바스크립트 작동방식

function myFunction(){
	console.log('hello')
}
myFunction()

위의 myFunction함수를 맨위로 끌어올리면 어떨게될까?

선언되기전에 호출했는데 잘 작동하는데 자바스크립트 엔진이 이코드를 해석하는과정에서 선언을 먼저했다고 생각하기때문이다.

변수또한 호이스팅이 가능하다

에러가떠야하는데 맨위에 var number;가 있다고 생각하기때문에 undefined가 뜬다. 단 let과 const는 호이스팅 불가

 

호이스팅은 코드가 많아질경우 이해하기힘들게하고 유지보수를 힘들게하기때문에 왠만하면 피하도록하자

 

리액트

리액트는 어쩌다 만들어졌을까?
dom이란 각 html엘리먼트에 대한 정보를 지니고있는 자바스크립트 객체이다 
돔을 변형하려면 브라우저에 돔 셀렉터 api를 이용해 특정이벤트가 발생하면 변화가 생기는 작업을해줘야한다.

규모가 커질경우에도 dom을 직접 제어하게되면 코드가 난잡해진다 처리해야할 이벤트가 다양해지고 규칙도다양해지기때문이다. 
그래서 Ember,Backbone,AngularJs등과 같은 프레임워크들이 만들어지게되었는데 쉽게말해 자바스크립트의 특정 값이 바뀌면 특정 Dom의 속성도 바뀌도록하여 업데이트 간소화하게하도록하는 프레임워크이다.

 

리엑트는 DOM을 아예 다 날려버려 새로보여주는것을 원했다. 
업데이트고민을 안해도되기때문에 개발은 쉬워질것이지만 동적ui를 보여주기위해 속도가 굉장히 느릴것인데 이를해결하기위해 가상 돔인 Virtual Dom을 사용해 성능을 지켜가면서 속도는 빨라지도록하였다. 가상돔은 브라우저에서 실제 보여지는 돔이아니라 메모리에 존재하는 가상돔으로써 자바스크립트객체이다. 

리엑트에서는 상태가 업데이트되면 업데이트가 필요한 UI를 메모리에있는 가상돔에 렌더링을한다
그러고나서 리액트 개발팀이만든 효율적인 비교알고리즘을 사용해 실제 브라우저와 메모리에잇는 돔을 비교해 차이점을 감지하여
실제 돔에 패치를 해준다(패치를한다는것은 차이를 확인해 필요한것을 반영시켜준다)
이를통해 리엑트에서는 정말 필요한 변화만 빠른성능을 지킬수있다.

컴포넌트의 예

리엑트는 UI를 컴포넌트를 통해 선언을하게되는데 컴포넌트는 ui조각이라고생각하면된다.

우리는 리엑트를 통해

업데이트의 고민을 덜고 UI를 어떻게보여줄지에대한것에 고민을 더 쏟을수있게되었다.

 

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스