React 란?
React는 프론트를 만들기 위한 자바스크립트 라이브러리로 SPA를 전제로 하고있다.
React는 스스로 State를 관리하는 캡슐화된 컴포넌트를 조합해 복잡한 화면을 만들 수 있도록 하며, 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고
렌더링합니다.
React의 특징
React는 상태 변화에 따른 화면 변경점을 결정하기 위해 Reconciliation이라는 알고리즘을 사용하며, 이를 구현하기 위해 Virtual DOM이라는 패턴을 사용하였습니다.
React의 큰 특징으로는 Virtual DOM 개념과, 단방향 데이터 바인딩이 있습니다.
Virtual DOM은 Real DOM의 인메모리 표현으로 메모리에 저장되며, Real DOM과 동기화됩니다.단방향 데이터 바인딩은 간단히 설명하면, HTML에 바인딩한 데이터를 JS에서 수정할 경우 화면에 반영되지만, 화면에서 직접 해당 엘리먼트의 값을 바꿨을 때, JS의 데이터가 수정되도록 바인딩하는 방법은 제공하지 않는 방법입니다.
Virtual DOM 작동 원리
Virtual DOM의 뒤에는 재조정 알고리즘이 있습니다.
React는 재조정과 렌더링이 별개의 단계가 되도록 설계되었습니다.
Reconciler는 트리의 어떤 부분이 변경되었는지 계산하고, 이후 Renderer는 계산된 정보를 앱을 실제로 업데이트하는 데 사용
JSX 란?
JSX는 JavaScript를 확장한 문법으로, 공식문서에서 React와 함께 사용할 것을 권장하고 있는 문법입니다.
JSX는 JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위해 사용됩니다.
클래스형 vs 함수형 컴포넌트
클래스형 컴포넌트는 라이프사이클 API를 제공하나, 함수형 컴포넌트는 기본적으로는 제공되지 않습니다.
(함수형의 경우 Hook을 사용하면 사용할 수 있음.)
리액트 라이프사이클
리액트 컴포넌트에는 라이프 사이클이 있으며, 컴포넌트는 마운트 -> 업데이트 -> 언마운트의 라이프사이클 존재
마운트는 컴포넌트가 생성되는 시점를 의미하며, 아래의 순서로 호출됩니다.
getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate순서로 호출됩니다.
라이프 사이클 메소드 상세설명
getDerivedStateFromProps:props로 받아온 것을 state로 넣어주고 싶을 때 사용합니다.
componentDidMount:컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드로, 이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타난 상태입니다.
shouldComponentUpdate:컴포넌트가 리렌더링 할지 말지를 결정하는 메서드로 주로 최적화를 할 때 사용하는 메서드입니다.
getSnapshotBeforeUpdate:컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면, 그 다음 발생하게 되는 componentDidUpdate에서 받아와 사용할 수 있습니다.
componentDidUpdate:리렌더링을 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드입니다. 3번째 파라미터로 getSnapshotBeforeUpdate에서 반환한 값을 조회할 수 있습니다.
componentWillUnmount:컴포넌트가 화면에서 사라지기 직전에 호출되는 메서드입니다.
React Hooks 이란?
클래스 기반의 리액트 로직을 함수 기반으로 대체하기 위해 만들어졌으며, 바닐라 자바스크립트 함수와 동일한 모양이므로, 여러 훅을 이용해 커스텀 훅으로 조립하여 사용할 수 있습니다. 각각의 커스텀 훅은 독립적인 상태를 관리하며 다른 컴포넌트에 주입되어 캡슐화를 제공합니다.
즉, 훅은 코드 재사용성을 위해 만들어졌습니다.
HTML과 React의 이벤트 처리 차이점
HTML은 전달할 함수를 문자열의 형태로 전달하지만, React는 함수 그 자체로 핸들러를 전달합니다.
State 변수란?
State는 컴포넌트가 정보를 기억할 수 있도록 하는 기능입니다.
State 변수의 값이 변경되면 화면이 리랜더링 됩니다.
React에서 State 관리방법?
배열을 사용하여 관리하고, 해당 배열의 인덱스와 state 값을 클로저 내에 관리하여 useState() 함수가 반환되고 나서도, 별도의 메모리 공간에 값들을 저장합니다.
Context API 란?
Context API는 React의 의존성 주입 도구입니다.
Context는 React 컴포넌트 트리 안에서 전역적이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법
에러 바운더리란 ?
에러 바운더리는 하위 컴포넌트에서 발생하는 에러를 잡아서 선언적으로 처리할 수 있는 컴포넌트입니다. 이는 try-catch와 비슷한 형식
메모이제이션이란?
메모이제이션이란 계산된 값을 자료구조에 저장하고 이 후 같은 계산을 반복하지 않고 자료구조에서 꺼내 재사용하는 것
리액트에서 메모이제이션 활용법
리액트는 값을 메모이제이션하기 위한 useMemo와 함수를 메모이제이션하기 위한 useCallback을 사용하여 메모이제이션을 사용할 수 있습니다.
Props란?
props는 컴포넌트에 전달해주는 값으로, 매개변수와 같은 역할을 합니다.
props는 부모 컴포넌트와 자식 컴포넌트를 독립적으로 생각할 수 있도록 도와줍니다.
Prop Drilling이란?
props를 깊숙이 전달해야 하거나 여러 컴포넌트에 동일한 props가 필요한 경우, props 전달이 굉장히 불편해 집니다.
props를 계속 이어서 전달하는 상황을 prop drilling이라고 부릅니다.
Prop Drilling 해결방법
prop drilling을 해결하는 대표적인 방법은 Context API를 사용하는 것입니다.
Context는 컴포넌트가 해당 컴포넌트 하위의 트리 전체에 정보를 제공할 수 있도록 하는 기능
리액트의 렌더링 성능 향상방법
state와 props의 변경을 최소화
map을 통해 매핑할 때, key값으로 index 미사용
React.Memo, useMemo, useCallback 등을 사용
HOC (Higher-Order Components) 란?
고차 컴포넌트는 컴포넌트를 인자로 받아 새로운 컴포넌트를 다시 return해주는 함수
저도 개발자인데 같이 교류 많이 해봐요 ㅎㅎ! 서로 화이팅합시다!