React.js 의 기본

Jun·2021년 6월 29일

개념과 장점, 그리고 컴포넌트

리엑트는 웹 프레임워크이고 웹 또는 앱의 view를 개발 할 수 있도록 도와주는 자바스크립트 라이브라리이다. 리액트는 컴포넌트 단위로 묶어서 관리할 수 있어서 재사용성과 유지보수에 많은 도움이된다. 컴포넌트란? 각 독립적인 기능을 가진 부품(모듈) 이라고 할 수 있다. 독립적인 기능을 가진 부품(모듈)들이 조립이 되면 하나의 제품이 만들어진다. 각 부품은 독립적인 기능을 갖고있으므로 제품에 문제가 생겼을경우 부품만 수정하면 되기때문에 유지보수에 많은 도움이 된다고 볼 수 있다. 리액트에서의 컴포넌트란 자바스크립트의 함수와 같은데 헤더, 바디, 푸터 처럼 각 기능을 단위별로 캡슐화가 된다.

리액트의 내부 작동 원리

(추가 내용이 필요하다....)
React.createElement()는 엘레멘터에 대한 정보를 가지는 Object를 생성하고 ReactDOM.render() 할수를 통해 실제 웹 브라우저에 렌더링된다. JSX를 사용하면 React.createElement()를 호출하고 Javascript 컴파일러인 Babel을 통해 파싱된

virtual DOM 이란?

React 노드들은 실제 DOM이 만들어지는 것이아니고 가상 DOM를 만들어낸다.

리액트에 있는 라이프사이클과 각 라이프사이클의 역할

라이프사이클 메서드란 리액트 컴포넌트가 브라우저 에 나타나고, 업데이트되고, 사라지게 될때 호출되는 메서드 이다. 리액트 라이프 사이클 메서드 종류는 크게 Mounting, Updating,Unmounting 이있다

Mounting

constructor( 컴포넌트가 처음 만들어질때 생성)

componentWillMount ( 컴포넌트가 DOM 위에 만들어지기 전에 생성)

render (컴포넌트 렌더링)

ComponentDidMout (처음 렌더링이 마친 후에 실행)

Updating

componentWillReceiveProps(컴포넌트가 새로운 props를 받았을때 실행)

shouldComponentUpdate(정보들을 비교하고 렌더링을 할지말지 결정)

componentwillUpdate(렌더링 되기전에 업데이트)

render (렌더링)

componentDidUpdate (리렌더링이 되고나서 실행)

Unmounting

componentWillUnmount ( 컴포넌트가 DOM 에서 사라지고 난 후에 실행)

리액트 라우터, Client side routing

Routing이란 데이터의 목적지가 어딘지 확인하여 정확한 길을 찾아주는 것. 페이지가 넘어갈때 경로를 결정하기위해서 네비게이션 기능을 의미한다.

Client-side-routing 이란 Client 내부에서 Routing하는 것. 페이지를 호출할때 Client 내부에서 주소창의 엔드포인트를 바꾸는 방식.

Server-side-routing 이란 서버측에서 직접 엔드 포인트를 바꿔서 페이지에 접근하는방식.

state를 직접 변경하지 않고 setState를 사용하는 이유?

setState를 사용하여 필요한 부분만 변경하고 업데이트해주기때문에 리렌더링이 될때 모든 state를 확인하지 않아도 필요한 state만 찾아서 변경할 수 있다.

props drilling 이란?

전역 상태를 관리하는 것이 없다면 props를 전달해줘야한다. A의 Props를 D까지 전달해야한다면 A-B-C-D 를 통하여 전달해야할 것이다. props를 A부터 D까지 드릴처럼 뚫어서 전달한다 라고해서 props drilling 이라고 한다.

리액트 hooks 의 장점은?

이 전에는 상태관리 Props 를 사용하기 위해서 class 바탕으로 코드가 작성이 되었다. Hooks가 나오면서 복잡한 class 를 사용하지않고 함수를 사용해서 state를 사용할 수 있다. 함수를 사용함으로써 복잡함이 사라져 가독성이 높아졌고, 재사용하기 편한 코드를 작성할 수 있다.

JSX이란?

JSX 는 Javascript XML 의 줄임말이다. XML은 데이터를 전달을 목적을 갖고 디자인 된 도구(문서) 이다. JSX는 XML/HTML 과 비슷한 syntax 이며 리엑트에서 자바스크립트와 HTML을 함께 사용하게 한다.

const jsx = <h1> this is JSX code</h1>

리액트에서 XML/HTML형식으로 작성하면 babel(자바스크립트 컴파일러)이 JSX를 JavaScript로 변환을 해준다.

lazy loading 이란?

lazy loading은 페이지 전체 에서 필요로한 데이터만 로딩하고 당장 필요하지 않은 데이터의 로딩시간을 미루는 것이다.
예시) 무한스크롤에서 모든 데이터들을 한번에 받아오지않고 스크롤을 사용할때 받아온다.
lazy loading을 사용하는 이유 - 필요로한 데이터를 먼저 로딩하고 안보이는 데이터들은 나중으로 미룸으로써 로딩시간과 성능 관리에 도움이될 뿐더러 네트워크 비용 또한 줄일 수 있다.

이벤트 위임 이란?

EventListener를 상위 요소에 추가하여 하위 요소의 이벤트들을 컨트롤 할 수 있는 방식이다. 노드를 동적으로 생성하고 삭제할때 각 노드마다 이벤트를 추가하지 않아도 상위 노드 이벤트 리스너로 하위 이벤트를 제어할 수 있다.

이벤트 버블링이란 무엇이며 막을 수 있는 방법은?

이벤트 버블링이란 하위 요소의 이벤트가 발생했을때 연결되어 있는 상위 요소의 이벤트로 전달되어가는 특성을 의미한다.

<body>
	<div class="firstEvent">
		<div class="secondEvent">
			<div class="thirdEvent">
			</div>
		</div>
	</div>
</body>

let allDivs = document.querySelectorAll('div');
divs.forEach((div)=> div.addEventListener('click', logEvent););

function logEvent(event) {
	console.log(event.currentTarget.className);
}

모든 div 에 이벤트리스너를 추가해줬고 thirdEvent의 이벤트가 발생했을때 결과물이다.

thirdEvent
secondEvent
firstEvent

하위 이벤트부터 상위이벤트까지 모든 이벤트가 연달아서 발생한다. 이런 방식을 이벤트 버블링 이라고한다. 이벤트 버블링은 앞서 설명한 이벤트위임으로 해결할수 있다.

Reflow 와 Repaint

렌터링을 최적화, 즉 웹 성능을 최적화를 하기 위해서는 relofw와 repaint에 대해서 알아야한다.
reflow 는 어떠한 액션이나 이벤트가 발생했을때 html 의 요소들의 크기나 위치등 레이아웃에 영향을 주는 것들이 변경이 되면 그에 영향을 받는 노드들의 위치를 다시 계산해서 배치가 된다. 이러한 과정을 reflow 라고 한다.
reflow 가 발생하는 대표적인 경우는 페이지 초기 렌더링할때, 노드가 추가 삭제될때, 요소의 위치,크기가 변경될때, 폰트 또는 이미지가 변경될때 등 이있다.
모든 계산이 끝나고나면 Render Tree 를 다시 구성해야하는데 이를 Repaint 라고한다.