어쩌다 블로그

Redux Middleware and Redux Thunk 리덕스의 미들웨어는 액션이 디스패치되어서 리듀서에서 이를 처리하기 전에 사용할 수 있는 것들을 사전에 설정해서 사용할 수 있게 해줍니다. applyMiddleware 를 이용해 등록하여 사용할 수 있습니다. 리덕스 미들웨어의 기본 템플릿 const middleware = (store) => (next) => (action) => { //do something }; 위의 템플릿은 하단의 예제와 같습니다 . 함수를 연달아 리턴해주는 함수를 화살표 함수로 나타낸 것입니다. function middleware(store) { return function (next) { return function (action) { // 하고 싶은 작업... }; };..

Constate Context를 사용하고 싶은데 다루어야 하는 상태가 많아진 상황에서 성능도 챙기고 개발도 편리하게 하고 싶을 때 Context는 리덕스보다 쓰기 쉽다는 장점이 있지만 Context 상태 중 의존하지 않는 다른 값이 바뀌게 될 때에도 컴포넌트가 렌더링 된다는 단점이 있었음 그렇기 떄문에 ContextAPI를 이용할 때 Context 를 구독하는 값마다 적절히 쪼개줘야하는 작업이 필요했다. constate 함수에 넣는 selector들을 기반으로 Context들이 자동으로 만들어지고 Context를 사용하는 Hook도 자동으로 만들어진다. useState, useReducer를 그냥 사용하면 되기 때문에 추가적으로 배울 것이 없다. 사용법 npm install constate constat..

01. API Fetching & Context API 데이터 패칭시 Reducer 와 Context를 함께 써보자 데이터 패칭 시 Reducer와 Context를 함께 쓰면 더 좋을 때가 있다. 외부 데이터들 같은 경우는 그 때 그 때 외부 API를 요청하면 되지만, 사이트 전역적으로 쓰일 데이터 ( 예를 들면 유저 데이터) 와 같은 것들은 Context와 함께 연동해서 쓰면 더욱 좋다. Context 코드를 따로 분리하여 Provider, State, dispatch를 가져다 쓸 수 있는 함수와 Reducer함수, state등을 따로 분리한다. UsersContext.js → getUsers, getUser ( data fetching ) → reducer, initial state, loading ..

CSS Module CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]__[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술 CSS Module을 사용하면 클래스 이름을 지을 때 고유성에 대해 고민하지 안하도 되게 합니다. 기본적으로 css파일을 만들 때 [컴포넌트 이름].module.css 라는 네이밍 컨벤션을 갖습니다. 사용하기 위해선 webpack에서 사용하는 css-loader 가 필요합니다. CRA로 만든 프로젝트에서는 자동으로 세팅이 되어있어서 자유롭게 가져다 쓸 수 있습니다. 사용법 먼저 [컴포넌트 이름].module.css 라는 이름의 css 를 만들어 줍니다. 컴포넌트 상단에 해당 css를 import ..

Context API 란? React 애플리케이션에서 명시적인 부모-자식간의 Props 전달 과정 없이 어떤 트리의 컴포넌트 에서든 이 값을 공유해서 쓸 수 있도록 해주는 API 언제, 왜 쓰는 걸까 값을 Root ⇒ A ⇒ B ⇒ F 이렇게 내려주는 과정이 실제 프로젝트에서는 상당히 많이 필요한 과정. ( 전역적으로 다루는 css테마, 유저 정보, 언어정보 등...) 실제 프로젝트에서는 컴포넌트의 깊이가 굉장히 깊을 수도 있고, 다루게 되는 데이터들도 훨씬 많아질 수도 있어 유지보수성을 고려하여 전역으로 사용할 수 있는 값들을 저장하기 위해 만들어진 API입니다. 원래는 Redux, MobX와 같은 라이브러리를 사용하게 됬었는데 현재는 ContextAPI를 이용하여 글로벌 상태 관리를 쉽게 가능하게 합..

useCallback useCallback 이란? useCallback이란 리렌더링이 될 시에 콜백함수도 불필요하게 다시 만들어지는 상황을 방지하여 성능 최적화를 하기 위해서 생긴 hook입니다. useMemo 와 같이 이전에 만들어진 값을 재사용하기 위해 메모이제이션을 하여 이전에 만들어 놓은 콜백함수를 그대로 재사용합니다. (정확히는 값이 아닌 함수를 재사용한다.) useCallback을 사용하게 될 경우에 함수 재생성을 방지할 수는 있지만 이용하고 있는 state값이나 props값이 있을 경우 그 값이 변경되었을 시에 함수를 재생성하기 위해 의존성 배열 (deps) 내부에 값을 넣어 줘야 합니다. useCallback의 기본적인 형태는 이렇습니다. const memoizedCallback = use..

List and Key React의 List 렌더링은 어떻게 이루어질까? (map 메서드) React에서의 List의 렌더링은 Javascript의 map 메서드를 이용하여 이루어집니다. map 함수는 배열의 각 요소를 하나씩 일대일 연산을 통해 새로운 배열로 리턴하게 되는 함수인데요. 이를 이용해서 React는 배열값을 순회하며 React Element 리스트로 리턴하게 됩니다. 리스트를 view 로 렌더링 한다는 것은 결국 반복되는 데이터를 프로그래밍적으로 하나씩 가져와 데이터 만큼의 UI를 생성(리턴)하기에 리액트에서 map 함수를 쓰는 것이 의미가 잘 맞는다고 할 수 있겠습니다. Array.prototype.map() - JavaScript | MDN 여러 개의 컴포넌트 렌더링 하기 예시로 리액트..

Props? 자식 컴포넌트가 부모 컴포넌트로 받아오는 값 , 언제, 왜 쓰게 되는 걸까? (데이터의 전달) 자료 출처 : Components and Props - React \ 특정한 상황에서 부모 컴포넌트에서 자식 컴포넌트로 특정한 값을 전달해서 렌더링해야할 시점이 있습니다. 이럴때 우리는 Props 를 사용하게 됩니다. 또한 리액트 애플리케이션내에서는 state값의 변경으로 리렌더링하는 로직을 호출하게 됩니다. 이로인해 전반적인 로직이 돌아가고 애플리케이션이 동작하게 됩니다. state값을 서로 전달할 때에 유용하게 props를 사용하게 됩니다. Props 전달과정 (React의 공식문서를 참고하였습니다.) function Hello(props) { // -----> props = {name : "r..