react-daum-postcode 사용 방법 설치 npm install react-daum-postcode import import DaumPostcode from "react-daum-postcode"; 주소 검색 완료 함수 생성 onComplete 함수에 주소 검색 완료 시 실행시킬 로직을 바인딩한다. Address 타입의 주소(data)를 인자로 받을 수 있다. (Address 타입은 react-daum-postcode에서 import 한다.) 완료 함수 실행 시 주소창은 자동으로 사라진다. data 예시 사용 예시 (with Antd 모달) import DaumPostcode from "react-daum-postcode"; import { Modal, Button } from "antd"; /..

전역 상태 관리는 왜 해야 할까? 일반적으로 React에서는 데이터는 부모로부터 props를 통해 전달된다. 그러나 컴포넌트를 나누다보면 하나의 어플리케이션 안에 여러 컴포넌트에 전달해줘야 하는 경우가 발생한다. 이러한 현상을 Props drilling 현상이라고 한다. Props Driling : props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정 Props Drilling 현상을 막기 위해서는 전역 상태 관리 라이브러리를 사용해야 한다. 전역 상태 관리 도구에는 어떤 것들이 있을까? Redux 현재 리액트를 사용하는 사람들에게 가장 익숙한 상태관리 라이브러리라고 생각한다. 나 또한 Re..

Recoil 선택 배경 상태관리 라이브러리에 대한 고민 너도 나도 쓰는 Redux "귀찮고 번거로워요... Recoil의 핵심 컨셉 오직 React만을 위해 React처럼 React 내부 상태만 이용 작은 Atom 단위로 관리 순수함수 Selector Re-Render 최소화 데이터 흐름을 따라서 곧 새로운 React 기능과 호환성 기본 활용법 예시로 상품 리스트 화면을 살펴보자. 데이터 흐름은 아래와 같다. Modal 팝업은 간단한 기능이지만 실제 열고 닫는 이벤트가 각각 다른 컴포넌트에서 이루어져야 하기 때문에 상태관리를 해야 하는 대표적인 예이다. List 역시 여러 곳에서 사용될 수 있기 때문에 상태 관리를 해보도록 하겠다. 해당 atom을 호출하는 방법은 React Hook와 유사하다. Reco..

비동기 통신과 전역 상태 관리의 최신 흐름 우리는 지금까지 아래의 행동들을 배웠다. API 호출하기 전역 상태 관리하기 API 호출하고 전역 상태에 Update 하기 🤷‍♀️ 그런데 API 호출하고 전역 상태를 update 해주는 게 어렵고 복잡하지 않는가? redux-toolkit의 createAsyncThunk 예시 하나의 API에 대한 코드가 위의 코드이다. 이 때, 여러 API를 호출하고 전역 상태 관리를 한다면....? 프로젝트의 크기가 커질 수록 API 호출 후 전역 상태를 업데이트 해줘야 하는 상황마다 작성해야 하는 코드가 많다. store의 크기도 비대해진다. 😭 전역 상태를 이렇게 관리하는 게 맞을까...? API 호출 후 응답 데이터 ➡ Se..

노마드코더 영화 웹 서비스를 만들다가 리액트 렌더링이 두 번씩 발생하는 것을 발견하였다. 렌더링이 두 번 발생하는 이유는 React.StrictMode 때문입니다. npx create-react-app 으로 생성하면 자동 설정이 되있습니다. 따라서 index.js 에서 이 Wrapper를 제거해주면 컴포넌트가 두번씩 호출되지 않습니다. ReactDOM.render( ); StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다. Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. 리액트 공식문서 StrictMode는 아래와 같은 부분에..

첫번째, React JS로 만들어진 웹사이트가 많다. 신기술을 배울 때 중요한 것은 누가 이 기술을 사용하는지, 그들의 규모가 얼마나 큰지, 이 기술이 그들에게 얼마나 중요한 지 꼭 살펴봐야 한다. 상위 1만 개의 웹 사이트 중 44.76%는 React.js 사용한다. 에어비앤비, 인스타그램, 페이스북, 넷플릭스와 같은 큰 회사들이 React를 사용한다. 그럼 React JS가 그들에게 얼마나 중요할까? 넷플릭스 웹사이트가 넷플릭스에게 얼마나 중요할까? 페이스북 웹사이트가 페이스북에게 얼마나 중요할까? 당연히 매우 중요하다. 그러므로 그들에게 React JS는 매우 중요하다!! 위를 토대로, 이런 거대한 회사에서는 안정적이고, 작동하는 것을 선택해야 한다. 만약 이런 사람들이 사용하는 library나 f..

문제 You are given a nested list of integers nestedList. Each element is either an integer or a list whose elements may also be integers or other lists. Implement an iterator to flatten it. Implement the NestedIterator class: NestedIterator(List nestedList) Initializes the iterator with the nested list nestedList. int next() Returns the next integer in the nested list. boolean hasNext() Returns tr..

Context API ✨ 전역 상태 관리 전역적으로 관리되고 있는 상태 값에 접근하여 사용할 수 있는 것 🤔 전역 상태 관리는 언제 필요할까? 로그인한 유저 정보 Theme style 이 밖에도 웹 어플리케이션을 개발하다보면 전역 상태로 관리해야 하는 값들이 꽤 많이 생긴다. 이제 전역 상태 관리는 잠시 잊고 props에 대해 생각해보자. App이라는 최상위 컴포넌트가 있고 그 아래로 A, B, C, D 컴포넌트(children)가 있다. D가 그려야 하는 정보를 A 컴포넌트가 가지고 있다고 가정해보자. props는 어떤 데이터를 하위 요소에 전달할 수 있는 좋은 방법 중 하나이다. 그러나 props의 한계는 바로 위 요소인 C 요소에게 props를 전달 받을 수 밖에 없다. A 컴포넌트가 가지고 있는 ..