bkdragon's log

React Sever Component (이하 RSC)는 React 18부터 도입된 개념이다. 서버에서 동작하는 컴포넌트를 말한다. Next 13의 app directory에서 작성하는 Component는 기본적으로 Server Component이다. RSC의 동작 방식 이제 React tree에는 RSC, RCC 가 적절하게 분배되어 사용될 것이다. (출처 : https://www.plasmic.app/blog/how-react-server-components-work#what-are-react-server-components ) 브라우저에서 해당 페이지에 대한 요청을 하면 React Tree의 root부터 실행하며 직렬화된 JSON 형태로 재구성한다. 모든 Component에 대해서 이 작업이 이뤄지..

순수성과 Side Effect 순수성과 Side Effect는 대비된다. React의 컴포넌트는 순수성을 가진다. 동일한 Props를 받으면 늘 동일한 Jsx를 반환한다. 즉, React 렌더링 과정에서 Side Effect는 발생 되어서는 안된다. useEffect 그래서 Side Effect와 React의 렌더링을 분리하기 위해 useEffect가 등장했다. useEffect는 렌더링 과정에서 커밋(재조정 결과를 dom에 반영) 후에 작동함으로 Side Effect와 렌더링을 분리한다. 그리고 useEffect는 컴포넌트의 생명주기 (mount, update, unmount)에 간섭할 수도 있다. 기본 사용법 function MyComponent () { useEffect(() => { return ..

할 일 목록을 지닌 todoContainer와 할 일 아이템을 개별적으로 보여주는 todoItem, 두 개의 컴포넌트가 있을 때 할 일 아이템을 추가하거나 삭제해서 todoContainer 가 리렌더링 되면 모든 todoItem이 리렌더링이 되는데 이걸 최적화 하고 싶었다. 최적화에 필요한 도구들은 이전 글 중에 정리해둔 부분이 있다. 헌데 그 글은 단순 이론이고 이번에 실전에 적용하면서 조금 더 디테일하게 다뤄보려고 한다. React 리렌더링 과정 리렌더링 과정을 세 단계로 구분 할 수 있다. 트리거 렌더링이 트리거되는 단계 state 값이 불변을 지켜 대체되었는지만 확인한다. 좀 더 자세히 이야기하면 기본형 변수일 땐 값이 변경되었는지만 확인, 참조형 변수일 땐 메모리 주소만 변경되었는지 얕은 비교를..

클로저의 의미 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이다. 이 말을 이해하려면 실행 컨텍스트에 대해 알아야 한다. 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아둔 객체로 선언된 변수와 함수 this 등의 정보가 담겨있다. 렉시컬 환경은 함수 내의 변수 상태를 관리하는 역할을 한다. 렉시컬 환경은 두부분으로 나뉘여 있는데 로컬 변수를 저장하는 부분과 외부 렉시컬 환경에 대한 참조 부분이다. 우리가 함수 내부에서 전역 변수를 사용할 수 있었던 것도 그 함수의 렉시컬 환경이 외부 렉시컬 환경을 참조하고 있기 때문에 변수 정보를 알고 있어서 그런 것이였다. 다시 클로저의 개념으로 돌아가면 함수가 선언됐을 때의 렉시컬 환경, 즉 함수 내부의 지역 변수를 활용한 개념이라고 생각할 ..

단위테스트는 하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트를 말한다. 프론트엔드에선 하나의 컴포넌트를 테스트 하는 것으로 봐도 된다. 컴포넌트의 원하는 요소가 렌더링 되었는지 사용자 상호작용에 알맞게 반응하는 지 등을 테스트 하면 된다. 단위 테스트에서 실제 기능까지 테스트할 필요는 없다. BDD는 프론트의 단위 테스트(및 통합 테스트)에 사용하기 좋은 패턴이다. Behavior Driven Development, 행동(시나리오) 주도 개발을 뜻한다. TDD를 기반으로 두며, 시나리오 기반으로 테스트 코드를 작성하며 함수 단위 테스트를 권장하지 않는다. 시나리오는 개발자가 아닌 사람이 봐도 이해할 수 있을 정도의 레벨을 권장한다. BDD는 Describe - Context - It ..