1. Memoization
공식문서: https://ko.reactjs.org/docs/react-api.html
컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.
동일한 props로 렌더링을 한다면, React.memo를 사용해 성능 향상을 누릴 수 있다. memo를 사용하면 리액트는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다.
useMemo: 계산을 통해 만들어진 특정한 값을 메모이제이션 할 때useCallback: 특정한 함수를 메모이제이션 할 때
예제
1초마다 리스트에 하나씩 추가
커멘트 리스트가 포함되면서 중간에 있는 커멘츠라는 프롭스가 바뀌면서 그 자녀들도 다시 모두 리렌더링 되고 있었다.
- 컴포넌트 메모이제이션
하지만 자식 하나하나의 프롭스는 바뀌지 않았으므로 이미 그려진 커멘트 아이템1은 메모이제이션으로 쓰자! -> 아이템을 HOC(메모)로 감싸서 만들었다. - 주입되거나 전달될 때 onClick이라는 것을 주니 아이템을 메모해놨음에도 불구하고 계속 바뀌었다. 받은 프롭스가 바뀌었기 때문에.
전달되는 함수를 부모쪽에서 메모이제이션을 해서 해결!
정리
React.memo: 이 자체가 HOC. 메모리제이션 기능을 탑재한 컴포넌트를 리턴해준다.Profiler: 성능을 파악하기 위해 사용한 API. 측정하고 싶은 컴포넌트를 Profiler로 감싸고, 특정할 id를 준 후, onRender라는 함수에 프로파일에 필요한 요소들을 주입해주었다.callback: 함수형 컴포넌트에서 함수를 메모이제이션 하고 싶을 때 사용한다.
2. Context
공식문서: https://ko.reactjs.org/docs/context.html#gatsby-focus-wrapper
컴포넌트 트리를 넘어 데이터를 공유할 수 있는 방법이다. 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.
현재 로그인한 유저, 테마, 언어 등을 바꿀 때 사용한다. 앱 전체에서 관장하고 알아야 하는, 광범위하게 사용되는 데이터를 관리할 때 사용하는 것이 좋다.
예제
<ThemeContext.Provider value={this.state.theme}>
<ThemedButton changeTheme={this.toggleTheme} />
</ThemeContext.Provider>
<ThemedButton />Provide 밖에 있으면 디폴트 값을 갖는다.
export const ThemeContext = React.createContext(themes.dark);Provide 안에 있다면 Provide의 값을 갖는다.
<ThemeContext.Provider value={this.state.theme}>constructor(props) {
super(props);
this.state = {
theme: themes.light,
}
}👉 결과
정리
많은 depth로 이루어진 컴포넌트 안에서 props를 계속 전달해주어야 상태를 알 수 있는데, 이때 중간 자식들은 알 필요가 없을 수도 있다. 이를 방지하기 위해 Context라는 개념을 따로 두고, 자식이 바로 Context를 캐치해서 변경점이 있는지 확인하고 부모와의 상태를 공유할 수 있게 된다.
3. Portals
공식문서: https://ko.reactjs.org/docs/portals.html#gatsby-focus-wrapper
DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법이다.
일반적으로 컴포넌트를 그린다고 하면 부모 컴포넌트 안에 자식 컴포넌트로 그린다. 하지만 이 레이아웃에서 완전히 벗어나서 일을 하고 싶을 때 Portal을 사용할 수 있다. 예를 들어, overflow: hidden이나 z-index가 있는 경우, 시각적으로 자식을 튀어나오도록 보여야 하는 경우가 있다.
정리
- 부모 컴포넌트 DOM 트리에서 벗어나 전혀 다른, 부모(root)랑 동급인 새로운 레이어를 두고 그곳에서 children을 그릴 수 있게 한다.
- 하지만! Portal에 그리더라도 이벤트는 트리(원래의 트리, root 트리)로 전파된다.
4. Render Props
공식문서: https://ko.reactjs.org/docs/render-props.html#gatsby-focus-wrapper
컴포넌트를 재사용하기 위한 방법 중 하나로, 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용한다.
render라는 props를 함수로 전달한다.
정리
render라는props를 꼭 고정적으로 사용하지는 않아도 된다.- PureComponent는
props와state를 비교하여 성능을 최적화한다. 이때 함수로props를 전달해주면 PureComponent가 계속 비교를 할 것이고, 계속 새로 그려야 한다. 이렇게 되면 PureComponent의 이점을 누리지 못하니 PureComponent와 Render Props는 서로 잘 맞지 않는다.
5. PropsType
공식문서: https://ko.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper
다음처럼 props의 타입을 검사할 수 있다.
PropComponent.propTypes = {
name: PropTypes.string,
age: PropTypes.number.isRequired,
}정리
6. Reconciliation
공식문서: https://ko.reactjs.org/docs/reconciliation.html#gatsby-focus-wrapper
UI 갱신에 대한 리액트의 접근법이다.
Virtual DOM
가상의 표현을 메모리에 저장하고 실제 DOM과 동기화하는 과정을 재조정이라고 한다.
정리
7. React Dev Tool
