React (35) 썸네일형 리스트형 Redux 정리 Redux 란? Redux는 Cross-Component-State 또는 앱 와이드 상태를 위한 상태 관리 시스템으로 애플리케이션을 변경하며 브라우저에 표시하는 데이터를 다수의 컴포넌트나 심지어는 앱 전체에서 관리하도록 도와줍니다. 보통 React를 사용하다 보면 많은 상태 관리 hook(useState, useReducer)를 사용하게 되며 실제로 이러한 hook들은 변화하는 데이터를 관리할 수 있게 해 줍니다. 예를 들어 사용자가 버튼을 클릭하면 관리하고자 하는 데이터가 변경되고 흔히 UI가 업데이트됩니다. (useState와 같은 React 상태 관리 hook을 사용하여 어떠한 데이터가 변경되었다고 React에 알립니다.) 보통 React의 State는 아래의 세 가지로 구분할 수 있습니다. Loc.. 사용자 입력값 유효성 검사 개발자의 다양한 시각에 따라 form 안의 사용자 입력값을 관리하는데 굉장히 복잡해질 수 있습니다. 하나 이상의 사용자 입력 값이 모두 유효하지 않을 수도 있으며, 모두 유효할 수도 있고 심지어 서버로 요청을 보낸 뒤에 특정 값이 사용 가능한지 확인해야 하는 비동기 유효성 검사를 이용해야 해서 상태를 알 수 없을 수도 있습니다. 예를 들면 이메일 주소가 유효한지 확인해보는 경우가 있습니다. 실제로 하나의 form이 유효한지 확인하는 것이 아니라 form 안에 있는 모든 사용자 입력값에 대해 유효성 검사를 진행하게 되며, 이러한 각각의 사용자 입력값의 유효성이 모여 전체 form의 상태를 결정하게 됩니다. form과 form 안에 있는 사용자 입력값이 유효하지 않을 때 특정한 입력값에 대해서 에러 메시지를.. Custom Hooks Custom Hooks 사용법을 살펴보기 전 Custom Hooks이 무엇인지 살펴보겠습니다. Custom Hooks 이란 기본적으로 정규 함수이며 내부적으로 상태를 설정할 수 있는 로직을 포함한 함수이고 Custom Hooks을 만들어서 재사용 가능한 함수에 상태를 설정하는 로직을 아웃 소싱할 수 있습니다. 다만 Custom Hooks은 정규 함수와는 다르게 다른 Custom Hooks을 포함한 다른 React Hooks를 사용할 수 있습니다. 따라서, useState나 useReducer를 통해 관리하는 React State를 활용할 수 있으며 useEffect 등에도 접근할 수 있습니다. Custom Hooks을 통해 다른 컴포넌트에서 사용할 수 있는 로직을 Custom Hooks으로 아웃 소싱할 .. React Routing 웹서비스가 하나의 페이지로만 구성되어 있으면 여러 가지 서비스를 제공하기 어려운 부분이 존재할 수 있기 때문에 필요시 여러 페이지로 구성해야 할 수 도 있습니다. 이때 여러 페이지로 구성된 웹 서비스가 브라우저의 페이지 전환에 대한 지식도 중요하기 때문에 Page Routing에 대해 간략하게 살펴보겠습니다. 우선 Routing 이란 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정을 의미합니다. 친구와 카카오톡으로 대화를 주고 받는 상황을 예를 들어보겠습니다. 사용자가 친구에게 톡을 전송했을 때 해당 톡(데이터)은 친구에게 직통으로 전송되지 않고 네트워크 장치를 거쳐서 친구에게 도착하게 됩니다. 이때 네트워크 장치는 해당 톡(데이터)이 어디로 이동해야 되는 지를 안내해주게 되며, 이.. useEffect 우선 LifeCycle에 대해 살펴보고 useEffect에 대해 정리해보겠습니다. 사람에게 LifeCycle이란 시간이 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정입니다. 이때 사람은 LifeCycle 주기 별로 각각 다른 욕구, 즉 무언가를 하고자 하는 욕구가 다르게 나타납니다. 이런 LifeCycle은 software에서도 많이 사용됩니다. 사람이 태어나서 죽음에 이르는 순간과 같이 어떤 프로그램이 실행되고 종료되는 순간을 나타내기 위해 LifeCycle이란 단어를 자주 사용하게 됩니다. 물론 React의 컴포넌트 또한 탄생 ＞ 변화 ＞ 죽음과 같은 LifeCycle을 가지게 됩니다. 컴포넌트가 화면에 Mount 되었을 때를 탄생이라고 생각하시면 되며, 컴포넌트가 업데이트되었을 때.. Memoization(React.memo, useMemo, useCallback) Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 본 게시글은 React 공식 문서와 한입 크기로 떠먹는 리액트 강의를 기반으로 작성된 게시글입니다. useMemo, useCallback는 React에서 최적화 기능을 하는 Hooks입니다. 정리 전 React 공식 문서에 나와있는 useMemo, useCallback에 대한 문서를 확인해보도록 하겠습니다. React 공식 문서에서 공통적으로 Memoization 이라는 내용을 확인할 수 있는 내용이 있습니다. Memoization 이란 이미 계산해 본 연산 결과를 기억해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억해두었던 데이.. useContext useContext 사용법을 코드와 함께 정리해보도록 하겠습니다. 해당 로직은 장바구니를 클릭했을 때 modal이 나타났다 사라지는 기능을 담은 로직입니다. app.js 모달 State의 기본값을 false로 설정하고 장바구닌 버튼을 클릭하면 true로 변경됨과 동시에 모달이 나타나게 설정하기 위해 Cart 컴포넌트에 props로 State 업데이트 함수를 전달해주었습니다. Cart 컴포넌트에서는 전달받은 props로 닫기 버튼을 누르면 State를 false로 변경하여 모달이 사라기게 할 것입니다. Header 컴포넌트에서는 전달 받은 props로 장바구니 버튼을 클릭하면 State를 true로 업데이트시켜 모달이 나타나게 됩니다. Header.js Header 컴포넌트는 전달 받은 props(모달 S.. Hook 사용 규칙 hook 사용에는 중요한 규칙이 있으며 이 규칙은 React에서 hook을 사용할 때 지켜야 하는 규칙입니다. 첫 번째는 React hook은 React 컴포넌트 함수나 사용자 정의 hook에서 호출해야 합니다. 두 번째는 React hook은 React 컴포넌트 함수나 사용자 정의 hook 함수의 최상위 수준에서만 호출해야 합니다. 이는 중첩 함수에서 hook을 호출하면 안 된다는 뜻으로 예를 들어 useEffect의 인자로 주어지는 함수 안에서 hook을 사용하는 것은 불가능합니다. (if문 안에서 사용하는 것도 불가능합니다.) 세 번째는 useEffect의 경우 참조하는 의존성 배열을 useEffect 내부에 추가해야 합니다. useEffect(() => { const identifer = setT.. 이전 1 2 3 4 5 다음
