공부하자

현재 개발중인 프로젝트에서 상태관리로 zustand를 사용하기로 했다.recoil충이었던 내가 zustand를?!!익숙해지기 위해 이론과 간단한 todo list를 만들어서 직접 사용해보자!왜 이렇게까지 하냐면,,, 코드 잠깐 봤는데 한 번에 이해가 안돼서 직접 써봐야겠어서,,, 핳머리가 나쁘면 몸이 고생한다는 걸 하 머래 난 말이 너무 많아그냥 빨리 해보자Zustand 관련 내용 정리Zustand란?- React의 상태 관리 라이브러리이다. Zustand는 독일어로 "상태"를 의미해서 이런 이름이 붙었다고 한다 주요 특징1. API 설정이 간단하다.2. 경량 라이브러리이다.3.  Redux 미들웨어와 유사하게 미들웨어를 사용할 수 있다. 이왕 정리하는 김에 정리해본...주요 상태관리 도구들 특징 비교z..

유어슈 pr 리뷰 중에 좋은 걸 배워서 기록해봄 쭌 감사링 나중에 보여줘야징 ㅎㅎ 이전 상태에 기반하여 상태를 업데이트 해야할 때 update function 사용이 더 낫다는 의견이 있었다! 그의 리뷰,,지금은 코드가 문제없이 동작하지만 추후에 비동기 로직등이 handleCheckAgree() 함수에 추가되면 상태 업데이트가 예상치 못하게 이루어질 수 있을 것 같아요!handleCheckAgree()와 같이 이전 상태에 기반하여 상태를 업데이트 해야할 때는 update function을 쓰는게 좋은 습관인 것 같습니다.   기존 코드const [agreed, setAgreed] = useState(false);...const handleCheckAgree = () => { setAgreed(!ag..

면접 질문들 같다 ㅎ 일단 적어둠 Q1. DOM과 Virtual DOM을 설명해주세요 - DOM (Document Object Model): HTML이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고, 이벤트에 반응하며 값을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태를 의미한다. (DOM은 HTML, XML 또는 XHTML로 작성된 문서의 객체 지향 표현이라는 뜻) 웹 브라우저가 HTML 문서를 로드할 때, 각 요소(element)는 객체가 되고, 스크립트를 통해 이 객체들을 조작할 수 있다. + DOM 조작의 비효율성 예를 들어 유저가 어떤 포스트에 좋아요를 누르거나 담아둔 장바구니 목록에서 상품을 하나 삭제하면 전체 노드들이 처음부터 다시 그려지게 된다! -> 불필요한 반복이 반복..

wanted 프론트엔드 프리온보딩 과정을 위한 사전과제 Redux를 사용해 todo list 만들기 과제 내용 : Add와 Delete 기능 2 가지를 만듭니다. input 창에 list1을 입력 후 Add 버튼을 누르면 input 창 하단에 list1 컴포넌트가 뜹니다. 각 list의 delete 버튼을 누르면 해당 list 컴포넌트가 삭제됩니다. 디자인은 자유롭게 해도 됩니다. 위의 2가지 버튼과 그에 따른 기능이 있으면 됩니다. 가능하면 컴포넌트를 만듭니다. (작은 단위라도 좋습니다.) 전역상태를 관리해주세요.(가능한 Redux나 Redux-toolkit을 이용해주세요.) 폴더 구조 /src /components /List /store App.tsx index.tsx 할 일 1. 컴포넌트 구조 미리..

이어지는글 https://5ffthewall.tistory.com/73 [React] 리액트 recoil 예제 만들어 사용해보기 이어지는 글 https://5ffthewall.tistory.com/72 [React] recoil로 전역 상태 관리하기 https://5ffthewall.tistory.com/71 [React] 리액트 context API의 리렌더링 방지를 통한 성능 최적화 하기 / useMemo 사용하기 https://5ffthewa 5ffthewall.tistory.com recoil 예제까지 만들면서 recoil에 대한 공부를 했다. 이젠 context API로 상태 관리를 했던 내 코드를 recoil로 변경해 볼 것이다. recoil을 선택한 이유 recoil은 클라이언트의 상태를 관..

이어지는 글 https://5ffthewall.tistory.com/72 [React] recoil로 전역 상태 관리하기 https://5ffthewall.tistory.com/71 [React] 리액트 context API의 리렌더링 방지를 통한 성능 최적화 하기 / useMemo 사용하기 https://5ffthewall.tistory.com/67 [React] 리액트 context API로 상태 관리 하기 Context API란? Context 5ffthewall.tistory.com recoil의 개념을 담은 글이다! 개념에서 더 나아가 간단한 예제를 만들어 사용법에 익숙해지고자 한다. Recoil을 사용하여 간단한 할 일 목록 애플리케이션 만들기 0. 예제 파일 생성 npm create-reac..

https://5ffthewall.tistory.com/71 [React] 리액트 context API의 리렌더링 방지를 통한 성능 최적화 하기 / useMemo 사용하기 https://5ffthewall.tistory.com/67 [React] 리액트 context API로 상태 관리 하기 Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통 5ffthewall.tistory.com 전 글에서 말했다 싶이 context API로 상태 관리를 했을 때 문제점에 대한 해결 방안으로 1. useMemo 사용하기 2. Dispatch provider와 Dispatch consumer 분리 가 있었다. 하지만 내부..

https://5ffthewall.tistory.com/67 [React] 리액트 context API로 상태 관리 하기 Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통해 props 전달이 깊은 컴포넌트 트리를 통해 이루어지는 것을 피할 수 5ffthewall.tistory.com 위 글과 같이 context API로 전역 상태를 관리하는 코드를 작성한 적이 있다. 하지만 이 코드에는 문제점이 있는데 바로 Provider의 상태가 변했을때 이를 구독하고 있는 컴포넌트의 경우 일제히 리렌더링이 일어난다는 문제이다. 하위 컴포넌트의 개수가 많아지거나 프로젝트의 규모가 커지면 불필요한 리렌더링이 많아지면서 ..

Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통해 props 전달이 깊은 컴포넌트 트리를 통해 이루어지는 것을 피할 수 있다. Props Drilling Problem을 해결하기 위해 생김! 컴포넌트 트리에서 Context라는 거대한 공통 조상을 만들고 그 Context로 부터 데이터를 제공을 받는 방식이다. 별도의 Store을 가지고 있는 FLUX와 비슷한 느낌이 있어서 최근에는 복잡한 문법을 가지고 만들어야 하는 Redux보다는 React의 기본 기능인 Context API를 쓰겠다는 움직임이 생기고 있다고 한다. Context API의 핵심 개념 Context: Context는 React 컴포넌트..