useRef ❓ JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다. 특정 엘리먼트의 크기를 가져오거나 스크롤바 위치를 가져오거나 설정 또는 포커스에 대하여 등 그리고 컴포넌트 별로 특정 데이터를 가지게 하고, 이러한 데이터들을 리렌더링 없이 관리 할 때 react에서 이러한 것들을 가능하게 해주는 것이 useRef라고 생각하시면 됩니다. 4번은 무슨 의미인가요 ❓ react로 프로젝트를 진행하다보면 컴포넌트 별로, 요소 별로 특정 값(데이터)를 갖게 ..
useCallback 은 지난번 공부한 useMemo 와 비슷한 최적화에 사용되는 훅 입니다. useCallback ❓ 함수를 Memozation하기 위해서 사용됩니다. useMemo 🆚 useCallback useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. ✅ 다시 한번! 함수형 컴포넌트의 특징은 함수형 컴포넌트는 컴포넌트 함수 호출 모든 내부 변수 초기화 ➡️ 위와 같은 순서를 거칩니다. ( 상단의 useMemo 연결을 통해 자세하게 확인 할 수 있습니다. ) useCallback 구조 첫 번째 인자는 Memozation 할 콜백 함수 두 번째 인자는 의존성 배열 ( [] ) 위의 코드처럼 함수를 use..
최적화에 사용되는 리액트의 hook 중 하나인 useMemo 에 대하여 알아보겠습니다. 😀 useMemo 란 ❓ 컴포넌트의 성능을 최적화 시킬 수 있는 대표적인 hook 중 하나로, useMemo 에서 Memo 는 'Memoization' 을 말합니다. Memoization .. ❓ 기존의 수행한 연산의 결과 값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 입니다. ✅ 잠깐 함수형 컴포넌트의 특징 하나만 함수형 컴포넌트는 컴포넌트 함수 호출 모든 내부 변수 초기화 ➡️ 위와 같은 순서를 거칩니다. 예시를 통해 살펴보면 컴포넌트가 렌더링 될 때마다 value라는 변수가 초기화 됩니다. 즉, 렌더링 될 때마다 calculate 함수가 불필요하게 재호출된다는 것인데 만약 calcu..
리액트의 대표적인 상태 관리 라이브러리인 redux 와 조금 더 redux 를 편하게 이용하기 위한 redux-toolkit 에 대하여 알아보겠습니다😀 ( 미들웨어로 사용되는 리덕스 청크, 사가 등은 제외하고 기본적인 redux 에 대한 공부 입니다! ) 먼저 Redux 란 ❓ 사실 redux 는 리액트를 위해 만들어진 것이 아닙니다! 즉, redux 는 react 와 전혀 상관없는 라이브러리 입니다. redux 는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 출처 : https://ko.redux.js.org/ 따라서 react 에서 redux 를 사용하려면 redux 를 설치하고 react-redux 를 따로 설치해야 합니다. ( 처음에 이 부분 때문에 왜 설치 해도 안될까..? 라고 생각 하실..
리액트 공식 문서에 따르면 useReducer 시작하기 앞서 아래와 같이 문구가 있습니다! https://ko.reactjs.org/docs/hooks-reference.html#usereducer 다음의 Hook는 이전 섹션에서의 기본 Hook의 변경이거나 특정한 경우에만 필요한 것입니다. 익히는 것에 너무 압박받지는 마세요. 부담 가지지 말고 가벼운 마음으로 정리 해보겠습니다. 😀 useReducer 란 ❓ state 를 관리하고 업데이트 하는 hook 인 useState 를 대체 할 수 있는 hook 입니다. 즉, useReducer 는 useState 처럼 state 를 관리하고 업데이트 할 수 있는 hook 입니다. 그렇다면 useState 가 있으니 굳이 필요한가요 ..❓ 음.. 사실 꼭 필요..
React 에서 컴포넌트가 데이터를 다루는 방법으로는 props, state 그리고 context 가 있습니다. 이번에는 흔히 다루는 props, state 말고, context의 개념과 사용 방법 그리고 연관되어 있는 hook 인 useContext 에 대하여 공부해보도록 하겠습니다. 우선 리액트 공식 문서에 있는 useContext 의 설명을 보면 context 객체(React.createContext에서 반환된 값) 을 받아 해당 context 의 현재 값을 반환 합니다. 위 개념을 이해하기 쉽게 props 와 state , react 에서 데이터가 어떠한 방식으로 전달되는지 알아 봅시다. 먼저 props 와 state 의 용도 ❓ 부모 컴포넌트와 자식 컴포넌트 또는 하나의 컴포넌트 안에서 데이터를..
useState 와 더불어 가장 많이 사용되는 hook 인 useEffect 에 대해서 정리 하겠습니다 😀 먼저 useEffect 란 ❓ 컴포넌트가 렌더링 될 때 마다 Side Effect 로직을 다루는 hook 입니다. 네..❓ Side Effect 가 뭔가요..❓ 함수형 프로그래밍의 특징 이라고도 볼 수 있습니다. 사전적인 정의는 Side Effect 란, 원래의 목적과 다르게 다른 효과 즉, 부작용을 말합니다. 여기서 끝나면 좋겠지만, 위와 연관지어 나오는 개념이 순수함수라고 있습니다. 순수 함수❓ 함수형 프로그래밍에서는 어떤 외부 상태에 의존하지도 않고 변경시키지도 않는 즉, 부수 효과(Side Effect)가 없는 함수를 순수함수(Pure function)이라고 한다. 반대로 부수 효과가 있는 ..
useState 와 useEffect 발표 중 먼저 리액트의 대표적인 hook 중 하나인 useState 에 대해 알아보겠습니다! 😀 먼저 State 란❓ State는 한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용되며, 컴포넌트 안에서 데이터를 변경할 수 있습니다. 즉, State는 한 컴포넌트의 상태(State)를 나타냅니다. State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용 합니다. React Hooks 가 나오기 이전에는 상태값을 관리하기 위해 class 기반의 클래스 컴포넌트 를 작성해야했습니다. class 안에서 this.state 를 써주는 코드를 길게 작성해야 했습니다. 이렇듯, 클래스 컴포넌트는 간단한 상태 관리 조차도 함수형 컴포넌트에 비해 복잡하여 유..
