React18 [React] 오픈소스 살펴보기_Hook의 구현체를 찾아서 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 1-1. Hook의 구현체를 찾아서 함수형 컴포넌트에서 useState나 useEffect등의 hook을 불러오는 import문은 일상속의 물처럼 코드에 자연스럽게 스며들어 있다. Hook은 마치 물 속에 있는 수소2 + 산소1의 물 분자처럼 컴포넌트를 구성한다. 그런데 이 hook들은 react 내부에 어떻게 구성되어 있을까? 오늘 react 패키지 내부 구조를 탐험하며 내부에 어떤 일들이 일어나고 있는지 알아보자. 개발자가 hook을 불러오면 react는 다음 순서로 구현체를 찾아간다. 하나씩 차근히 알아보자. 1. 개발자 개발자가 컴포넌트에서 react 객체가 제공하는 hoo.. 2023. 12. 1. [Next.js] Redux 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 Redux 리액트 앱은 컴포넌트로 구성되고, 컴포넌트 내부에 저장되는 데이터인 상태(State)를 통해 동적인 UI를 만들 수 있다. 상태가 변경되면 해당 컴포넌트가 다시 렌더링되고, 변경된 값이 UI에 반영되는 것이다. 컴포넌트 구성이 복잡하지 않을 경우 컴포넌트 내부에서 상태를 관리하는 것이 효율적일 수 있다. 그러나 위 그림처럼 복잡할 경우, 컴포넌트 간의 데이터 흐름을 읽는 것이 쉽지 않다. 이럴 때 리덕스 사용을 고려해 볼 수 있다. 리덕스는 자바스크립트 앱의 상태를 관리하는 오픈 소스 라이브러리인데, 하나의 중앙 저장소에서 상태를 관리해 앱의 상태를 예측 가능하고 일관성.. 2023. 8. 6. React에서의 상태관리 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 프론트앤드 개발을 하며 만나는 상태 우리가 관리하는 상태는 서버와 교류가 필요한지 여부에 따라 client, server 2가지로 나뉜다. 모달, 토스트, 다크모드 설정 등 데이터를 브라우저 내에서만 관리한다면 client 상태이고, 서버에서 받아온 데이터이거나 인스타처럼 내가 사이트에서 상호 작용한 내용이 다른 사용자 화면에도 똑같이 반영되어야 한다면 server 상태에 해당한다. 개발하던 서비스는 주로 서버에서 데이터를 받아와 처리하는 일이 많았기 때문에 client 상태는 코드 설정이 가벼운 recoil, server 상태는 react-query로 관리하게 되었다. Clien.. 2023. 2. 13. React의 useMemo와 useCallback 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 useMemo const cachedValue = useMemo(calculateValue, dependencies) 함수를 실행하면 그 함수가 이용할 수 있는 실행 환경이 만들어진다. 외부적으로는 자신이 선언된 위치의 환경을 참조하고, 내부적으로는 함수 내부에 선언되어 있던 변수, 함수 등의 식별자를 등록하고 관리한다. 함수형 컴포넌트는 jsx를 반환하는 함수다. 컴포넌트의 렌더링은 함수의 실행을 의미한다. 렌더링이 된다는 것은 내부 식별자를 선언하고 관리하는 작업 또한 이루어진다는 것을 말한다. useMemo는 메모제이션된 함수의 실행 결과값을 반환한다. 함수 내부가 복잡하고 .. 2023. 2. 9. React Component와 Hooks의 Lifecycle 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 Component의 생명주기 모든 React component는 동일한 생명 주기를 가진다. mount : component가 화면에 추가될 때 update : 새로운 props, state를 받을 때 unmounts : component가 화면에서 제거될 때 constructor - component가 생성될 때 가장 먼저 실행되는 함수로, component 만드는 과정에서 미리 해야 할 작업을 한다 - method를 바인딩하거나 state를 초기화한다. 해당 작업이 없다면 constructor를 구현하지 않아도 된다 render - class component에서 반드시 구현돼.. 2023. 2. 9. 이전 1 2 3 4 다음
