솔미는 성장중

Recoil - RecoilRoot를 선언해 하나의 스토어를 만들고, atom이라는 상태단위를 스토어에 등록한다. - RecoilRoot: Recoil에서 생성되는 상태값을 저장하기 위한 스토어를 생성 + 변경된 상태를 하위 컴포넌트로 전파해 컴포넌트에 리렌더링을 일으킴 - atom: 상태를 나타내는 recoil의 최소 상태 단위. 각 값은 고유한 key 값을 바탕으로 구별된다. 컴포넌트는 recoil에서 제공하는 훅(useRecoilValue, useRecoilState..)을 통해 상태 변화를 구독하고, 값이 변경되면 forceUpdate 같은 기법을 통해 리렌더링을 실행해 최신 atom을 가져오게 된다. Jotai - recoil의 atom 모델에 영감 받아 만들어진 상태관리 라이브러리 - 상향식..

1. JSX 페이스북에서 만든 내장형 구문 트랜스파일러를 필수적으로 거쳐야 자바스크립트 런타임이 이해할 수 있는 JS코드로 변환됨 설계 목적 : 다양한 트랜스파일러에서 다양한 속성을 가지 ㄴ트리 구조를 토큰화해 ECMAScript로 변환하는 데 초점 = JSX 내부에 트리 구조로 표현하고 싶은 것을 작성해두고, 트랜스파일 과정을 거쳐 JS(ECMAScript)로 변경하는 것이 목표 JSX 컴포넌트 JSXElement - 가장 기본 요소 - 역할 : HTML element와 유사 - JSXElement의 요소 이름으로 쓸 수 있는 것 (JSXElementName) - 도 가능 (JSXIdentifier) - : 를 이용해 서로 다른 식별자를 이어준 것 ex) (JSXNamespacedName) , (JSX..

Reducer 함수를 사용하는 이유 컴포넌트가 복잡해지면 컴포넌트의 state가 업데이트되는 상황을 한눈에 파악하기 어려울 수 있다. 따라서 Reducer를 이용해 state를 관리하면 state 로직의 양을 줄이고, 복잡성을 줄일 수 있다. (접근하기 쉽게 한 곳으로 모아주는 역할) useState에서 useReducer로 마이그레이션 하는 방법 1. state 설정을 action들의 전달로 바꾸기 2. reducer 함수 작성하기 3. 컴포넌트에서 reducer 사용하기 1. state 설정을 action들의 전달로 바꾸기 dispatch 함수에 넣어준 객체를 “action”이라고 한다. 일반적으로 무슨 일이 일어났는지 에 대한 최소한의 정보를 포함한다. (type에 string으로 작성) 예시) f..

보호되어 있는 글입니다.

UI를 요청하고 제공하는 3단계 1. 렌더링 촉발 - 렌더링이 일어나는 이유 : 1. 컴포넌트의 첫 렌더링일 때 : 2. 컴포넌트의 state가 업데이트된 경우 2. 컴포넌트 렌더링 - React에서 컴포넌트를 호출한다 : 1. 컴포넌트의 첫 렌더링일 때 ▶ 루트 컴포넌트 호출 : 2. 컴포넌트의 state가 업데이트된 경우 ▶ state 업데이트에 의해 렌더링이 발동된 함수 컴포넌트 호출 ▶ 함수가 새로운 JSX스냅샷 반환 ▶ 반환된 스냅샷과 일치하도록 화면을 업데이트 - 중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 때까지 재귀적으로 과정 반복 - 렌더링 시 주의사항 : 동일한 입력에는 동일한 출력이! : 이전 state를 변경하면 안된다! 3. DOM에 커밋 ..