자곰

useState를 깊게 알아보자 State Hook을 자체적으로 다시 구현하여 내부적으로 어떻게 작동하는지 배우는 것으로 시작하겠습니다. 다음으로 Hook의 몇 가지 제한 사항과 Hook이 존재하는 이유에 대해 알아봅니다. 마지막으로 Hooks의 한계로 인해 발생하는 일반적인 문제를 해결하는 방법을 배웁니다. 최종적으로 React에서 stateful 함수 컴포넌트를 구현하기 위해 State Hook을 사용하는 방법을 알게 될 수 있도록 하겠습니다. useState 구현 Hooks가 내부적으로 어떻게 작동하는지 더 잘 이해하기 위해 Hooks를 다시 구현해보겠습니다. 지금부터 작성하는 코드는 실제 useState를 구현하는게 아니라 개념과 아이디어를 파악하는데 이해를 위한 코드라는 것을 기억해주세요. im..

Introduce 먼저 React와 React Hooks의 기본 원리에 대해 배울 것입니다. React의 기본 원리 React Hooks의 필요 동기 overview of various Hooks React의 원칙 React는 세 가지 원칙을 기반하고 있습니다. 1. Declarative React에게 일을 하는 방법을 알려주는 대신 우리가 하고 싶은 일을 알려줍니다. 결과적으로 애플리케이션을 쉽게 설계할 수 있고 React는 데이터가 변경될 때 올바른 구성 요소를 효율적으로 업데이트하고 렌더링 할 수 있다. 예) 선언적 코드 예시 const input = ['a', 'b', 'c'] let result = input.map(str => str + str) console.log(result) // pri..

React는 여러 방법으로 생성하고 프로젝트를 설정한다. ( ex : CRA, Next, gastby etc ) 이에 대한 여러 글들은 많지만, 내가 프로젝트를 초기 단계부터 시작한다면 어떻게 시작하면 좋을지는 정리되어서는 나오지는 않았던 것 같다. 그래서 여러 자료들을 읽으면서 공부를 했고 어느정도 윤곽이 보여 글을 써보고 싶었다. 만약에 React 프로젝트 새로 생성하는데 어떤 프레임워크로 시작할지, 설정을 어떻게 할지 고민 되는 사람들한테 도움이 될 것이다. React의 한계 먼저 이야기에 앞서 프로젝트를 생성할 때 어떤 이슈를 때문에 생성하고 설정하는데 고민이 필요한지 알아보겠다. 리액트는 UI라는 영역만 담당하기 때문에 여러 라이브러리 설치가 필수적으로 이에 대한 구성이 매우 중요하다. SSR(..

Rendering optimization 렌더링은 React가 DOM을 변경해야 하는지 확인하는 프로세스이지만, 렌더 단계에서 수행한 작업과 계산이 의미 없는 경우에는 (결국 구성 요소의 렌더 출력이 동일하면 ) DOM 업데이트가 없으므로 작업이 필요하지 않습니다. 렌더의 아웃풋은 항상 "props"와 "state"의 현재 값에 기반해야 하며, 따라서 구성요소의 랜더 결과가 "props"와 "state"가 변경되지 않으면 같다입니다. 따라서 이 개념을 머리에 두고 기반으로 React 렌더링을 최적화하는 것의 기초가 되는 중요한 포인트!! 최적화 방법들 React는 렌더링 프로세스를 최적화할 수 있는 몇 가지 API를 제공하고 있습니다. 1. shouldComponentUpdate 렌더링 전에 호출되는 수..

랜더링 소개 리액트의 랜더링은 리액트가 root에서 시작하는 컴포넌트 트리 아래로 이동하여 업데이트를 위해 플래그가 지정된 모든 컴포넌트를 찾고 props 와 state 의 현재 값을 기반하여 원하는 UI 구조를 요청하는 프로세스이다. flagged 컴포넌트들에 대해, React는 class 방식의 render() 또는 FunctionComponent() 를 호출하고, React.createElement()를 사용하여 JSX 결과를 일반 JS 개체로 변환한 후 생성된 출력을 저장한다. 전체 구성 요소 트리에서 랜더 아웃풋을 수집한후, 리액트는 새로운트리(Vitual DOM) 과 현재 DOM 트리를 비교하여 변경 사항을 체크하고, reconciliation 후, 계산된 변화들을 적용시킨다. 참고 ) htt..