React 개념정리

React란?

UI를 구축 하기위한 자바스크립트 프론트엔드 라이브러리입니다. 주로SPA를 구현할때 사용합니다.

React 장점은?

• VirtualDOM을 사용해서 실제 DOM에 직접접근해서 제어하는 것을 최소화해서 어플리케이션 최적화에 도움이됩니다.
• SPA기반 으로 구현되기때문에 사용자경험이 많은 어플리케이션이면 효과빠른 화면전환을 경험할 수 있다.
• React는 현재 엄청난 커뮤니티 및 시장에서 제일많이쓰는 라이브러리중 하나이다, 즉 많은 서드파티 라이브러리들이 재공이됩니다. 그리고 에러문제가 생겨도 해당 에러에대한 정보도 굉장히 많기때문에 해결하기도 쉽다.
• component 기반으로 구축하기때문에 재사용성, 유지보수, 에러핸들링에 유용하다.
• 많은 외부 라이브러리랑 호환성이 뛰어나다.

VirtualDOM이란?

실제 DOM에 접근해서 제어하는것이 아닌 DOM형태에 객체를 메모리에 할당하여 애플리케이션에 상태가 바뀔때 그전에 저장한 VirtualDom과 현재 바뀐 VirtualDOM과 비교해서 변경된값만 종합해서 바뀐값만 다시 실제DOM에 접근해서 변경해준다.이 과정을 재조정(Reconciliation) 이라고 한다.
virtual DOM을 갱신하는 방법은

virtual DOM을 갱신하는 방법은

• useState를 호출하여 state를 바꿀때
• redux의 경우 store 안에 값이 바뀌면 최상위에 컴포넌트의 render()함수를 호출해서 virtualDOM 을 갱신한다.
• props가 바뀔때

Props Drilling이란?

Props Drilling라는 것은 부모컴포넌트에 있는 state값을 자식컴포넌트에 props로 데이터를 전달하는 것을(내려꽂기)를 말한다. 어필리케이션의 컴포넌트간에 깊이가 깊어질수록 props Drilling 단점이 확연하게 보인다.

위 사진을 보면 최하위컴포넌트가 최상컴포넌트에 state를 받아오고싶으면 중간에 속해진 컴포넌트를 통해서 계속계속 props전달을 해야합니다. 정말 비효율적이겠죠? 애플리케이션 규모가 커지면 커질수록 단점은 드러나고. 에러핸들링 데이터 추적도 굉장히 힘들어집니다 중간 컴포넌트는 필요없는 props를 위해서 굳이 코드작성도 해줘야하고 여러므로 안좋습니다. 그래서 사용하게되는것이 상태관리 라이브러리입니다 대표적으로 Redux, ContextAPI, Mobx가 있습니다.

state와 props의 차이는?

state는 현재 컴포넌트의 생명주기 동안에 변경될 수 있는 정보를 담고 있는 상태이고, props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.

제어컴포넌트,비제어컴포넌트

제어 컴포넌트의 경우 리액트 state에 의해서 값이 관리 및 변경이 되고, 비제어 컴포넌트의 경우 ref를 통해 DOM 자체에서 form 데이터가 다뤄집니다. 가장 큰 차이점은 동기화인데, 제어 컴포넌트의 경우 사용자가 입력할 때마다 input의 state가 동기화되지만 state가 변경될 때마다 리렌더링이 발생하여 불필요한 자원의 낭비로 이어질 수 있습니다. 반면 비제어 컴포넌트의 경우 입력을 하고 버튼을 누르는 최종적인 상황에서만 input의 value에 접근을 하므로 리렌더링이 계속해서 발생하지는 않지만 입력의 최신 값에 접근하기 힘든 특성이 존재합니다.

JSX란?

자바스크립트에서 HTML문법을 사용할 수 있게 해주는 자바스크립트 확장문법이다. HTML파일 JS파일 따로 나눠서 작성안해도되서 편하고 가독성에 좋다.

함수형 컴포넌트의 장점은?

• 클래스형 컴포넌트보다 선언이 간편
• 클래스형 컴포넌트보다 메모리 자원을 절약
• this 키워드 안사용해도 된다
• 많은 라이프사이클 메소드 사용 생략

리액트 라이프사이클?

react LifeCiycle 는 리액트 컴포넌트가 DOM에 생성,업데이트,삭제될때 호출되는 API를 말한다.

• constructor : 컴포넌트의 생성자 메서드. 컴포넌트 생성 시 가장 먼저 실행되는 메서드. 초기 state를 설정
• getDerivedStateFromProps : props로 받아온 것을 state에 넣어주고 싶을 때 사용
• render : 컴포넌트를 렌더링 하는 메서드
• componentDidMount : 컴포넌트의 첫 번째 렌더링을 마치고 호출되는 메서드. 주로 여기서 비동기 요청 작업 처리
• shouldComponentUpdate : 컴포넌트를 리렌더링 할지 말지를 결정하는 메서드
• getSnapshotBeforeUpdate : Virtual DOM이 실제 DOM에 반영되기 직전에 실행. 이 메서드에서는 이전과 현재의 props와 state에 접근이 가능하고 return으로 넘겨진 값은 componentDidUpdate의 3번째 인자로 전달됨
• componentDidUpdate : 리렌더링을 마치고 화면에 변화가 모두 반영되고 난 뒤 호출되는 메서드
• componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출되는 메서드

React Hooks란?

React Hook은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다. Hook을 통해서 함수형 컴포넌트에서도 컴포넌트의 상태 값을 관리할 수 있고 생명주기 메서드 또한 사용이 가능합니다.

useCallback, useMemo 란?

useMemo는 메모이제이션 된 값을 반환한다. 컴포넌트는 상태값이 변경될 때마다 재 렌더링이 됩니다.
값이 변경이 되지 않는 상태값도 다른 상태값이 바뀌었다는 이유로 굳이, 값을 재 설정할 필요가없기때문에 그럴 경우데 useMemo를 써서 최적화를 효과를볼 수 있다.
useCallback는 메오이제이션 된 콜백을 반환한다. 콜백함수를 메모리에 올려놓고 사용한다는 뜻입니다. 의존배열에 있는 state값이 안바뀌었는데 굳이 다시 함수를 다시 실행시켜서 같은결과를 return 할 필요가 없기때문에 그럴때 사용하면됩니다.
하지만 React 공식문서에서는 아주 큰 계산(useCallback인 경우), 처리량이 크지않은이상(useMemo인 경우) 굳이 안써도 된다고 기재되어있다.

useEffect, useLayoutEffect 차이

useEffect는 react hooks중 일종으로 LifeCiycle 메소드중 componentDidMount, componentDidUpdate, componentWillUnmount 와 비슷한 기능을 제공합니다.
useEffect와 useLayoutEffect의 차이를 알기전에 먼저 render와 paint에대해서 알고 넘어가는것이 좋다.

• render : DOM tree를 만들기위해서 HTML파일을 파싱하는 style 속성을 계산하는과정.
• Paint : 실제 화면에 그려주기위해 Layout을 표시하고 업데이트하는 과정.

useEffect

useEffect 는 컴포넌트들이 render 와 paint 된 후 실행됩니다. 비동기적(asynchronous) 으로 실행됩니다. paint 된 후 실행되기 때문에, useEffect 내부에 dom 에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됩니다.

useLayoutEffect

useLayoutEffect 는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가 됩니다. 이 작업은 동기적(synchronous) 으로 실행됩니다. paint 가 되기전에 실행되기 때문에 dom 을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않습니다.

결론

useLayoutEffect 는 동기적으로 실행되고 내부의 코드가 모두 실행된 후 painting 작업을 거칩니다. 따라서 로직이 복잡할 경우 사용자가 레이아웃을 보는데까지 시간이 오래걸린다는 단점이 있어, 기본적으로는 항상 useEffect 만을 사용하는 것을 권장드립니다. 구체적인 예시로는