[🚨응급실 알리미] Recoil과 React-query를 선택한 이유 🚨응급실 알라미, 상태 관리 라이브러리는 무엇을 선택할까❓ 필자는 FE 2명으로 구성되어 응급실 알라미 서비스를 개발하였습니다. 응급실 알라미는 경증 질환의 일반인을 대상으로 한 플랫폼으로, 공공데이터 API를 활용하여 필요한 데이터를 가져옵니다. 우리 팀의 고려사항은 다음과 같습니다. 공공데이터 API를 활용 상태 관리 라이브러리 미사용 경험 - 필자는 이 프로젝트를 통해 Redux나 다른 상태 관리 라이브러리를 처음 사용해보려고 합니다. 반면 다른 팀원은 이미 Redux를 경험한 상태입니다. 제한된 개발 기간(2주) 따라서 이러한 고려사항을 가지고 상태 관리 라이브러리 선택에 고민한 과정을 담은 글입니다. 1. Redux Redux는 상태 관리 라이브러리 중 가장 오래되고, 가장 많이 사용되는 라이브.. Virtual DOM이 뭔가요? virtual DOM에 공부한 내용을 정리한 글입니다. 먼저, virtual DOM에 앞서서 DOM이 무엇이고, 가상 DOM이 나온 배경을 공부하기 위해 브라우저 로드 과정에 대해 짚고 넘어가겠습니다. 브라우저 렌더링 과정 브라우저는 아래의 단계로 로딩합니다. HTML을 파싱하여 DOM 객체 트리를 구성하고, 외/내부 css를 파싱하여 CSSOM 트리를 구성합니다. DOM 트리와 CSSOM트리가 생성되면 스타일을 매칭시켜주는 과정을 거쳐 렌더트리를 구성합니다. - 페이지를 렌더링 하는데 필요한 노드만을 가집니다. - 예를 들어 display:none인 속성을 가진 노드는 렌더트리에서 제외됩니다. 렌더트리를 기준으로 레이아웃을 배치하고 렌더트리를 화면의 픽셀로 변환(페인트)합니다. - 레이아웃 단계에서는 .. useState를 바닐라JS로 구현하기 이전 글에서는 React의 공식 문서를 참조하여 useState의 개념을 정리했습니다. 하지만 공부하는 과정에서 useState가 어떻게 동작하는지 내부적으로 구성되어 있는지 궁금했습니다. 그래서 JavaScript로 useState를 직접 구현해보면서 동작 원리를 이해하는 것을 목표로 했습니다. HTML 구조 설정 는 나중에 컴포넌트가 렌더링될 위치를 나타낸다. useState 함수 state 관리 state는 외부에서 관리를 한다. 내부에서 관리하게 되면 useState 실행할때마다 state를 초기값으로 변경되기 때문에! state는 state값이 있으면 state 값이고 없다면 초기값으로 저장된다. setState함수는 새로운 상태값을 받아 state 변수를 업데이트 하고, render 함수를 호.. [공식문서 톺아보기] useState() useState는 React에서 상태를 관리하는데 매우 중요한 hook이다. useState를 사용하면 컴포넌트의 상태를 추척, 관리할 수 있으며, 컴포넌트의 렌더링을 최적화하고 재사용성을 높일 수 있다. 아래의 내용은 공식문서 useState에 관한 내용을 정리한 글이다. useState() const [state, setState] = useState(initialState); 규칙 컴포넌트의 최상위 레벨에서 useState를 호출해야 한다. 주의! 반복문이나 조건문 안으로 호출 할 수 없음. 배열 구조 분해를 사용해 [someting, setSomething]과 같은 state 변수의 이름을 지정하는 것이 관계이다. 첫 번째 요소는 상태를 의미함. 첫 번째 렌더링 중에는 전달한 initialStat.. 이전 1 다음
