React

1. 커스텀 훅 개념 & 폴더와 파일 이름 설정하기 커스텀 훅은 단어 뜻 그대로 그냥 내가 커스텀한 hook을 의미한다. 별 다른 뜻은 없다. 이 훅을 정리할 때 따라야 하는 방식이 있다. 무조건 아래 방식을 따라야 한다는 것은 아니다. 회사마다 다를 수 있기 때문. 1. 파일명 앞에 use 를 써줄 것. 2. customhooks는 hooks라는 폴더에 모아서 관리할 것 2. 커스텀 훅의 기능 & 만드는 이유 1. 같은 훅을 여러 곳에서 사용하게 되므로 유지보수 측면에서 훨씬 좋다. 에러 찾기가 편하다. 2. 프로젝트 단위의 작업에서는 어떻게 하면 중복되는 행위[코드]를 줄일 수 있을 지 계속 고민해야 한다. 그래야 cost를 줄일 수 있기 때문이다. 3. 코드의 양은 줄어들지만 기능은 똑같게 구현할 ..

💡 지난 주에 Virtual Dom과 함께 렌더링, Props, State에 대해 알아봤었다. => 🔗링크 이번에는 리엑트의 재렌더링 조건 & 렌더링 성능 최적화에 대해서 다루고자 한다. 재렌더링 조건을 알아야 DOM에서 가장 비싼 작업인 Painting 과정을 줄이는, 즉, 렌더링 최적화에 신경을 쓸 수 있기 때문에 짧지만 알고 있어야 하는 중요한 개념이라고 볼 수 있다. 1. 리액트 재렌더링 조건 State (상태) 변경이 있을 때 새로운 props가 들어올 때 기존 props가 업데이트 됐을 때 부모 컴포넌트에서 받은 props의 참조값이 변경되면 그 props 를 받고 있던 자식 컴포넌트도 재렌더링 된다. 부모 컴포넌트가 재렌더링 될 때 부모 컴포넌트가 재렌더링 되면 부모 컴포넌트에 속해있는 자식..

Redux 를 사용하게 되면서 Redux가 Flux 패턴을 사용하고 있다는 것을 알게되었습니다. 프로덕트의 쉽고 깔끔한 개발과 유지보수를 위해 Flux 패턴과 같은 '디자인 패턴'이라는 것이 존재한다는 것을 알게 되었습니다. 알아가는 과정 속에서 MVC 패턴과 Flux 패턴에 대해서 알게 되었습니다. 생소한 개념이라서 흐름을 이해하려면 알 필요성을 느꼈기 때문에 정리해두고자 합니다. 1. MVC 패턴 MVC는 Model, View Controller 의 약자 입니다. 하나의 어플리케이션, 프로젝트를 구성할 때 그 구성 요소를 세 가지 역할로 구분한 패턴입니다. 사용자가 controller를 조작하면 controller는 model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 v..

💬 에러 메시지 겸 참고한 stackoverflow 링크 Immer An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft 리덕스 툴킷을 사용한다면, 다음과 같은 메시지를 보게 되는 경우가 있다. 스택 오버 플로우에서 그 해답을 찾았다. ✔ 에러 원인 힌트: redux toolkit을 사용하면 내장된 기능 중에 immer라는 것이 있다. ⭐ immer redux-toolkit 사용 시 사용자가 원본 state를 건드려도 내부에서 원본 state를 변경하지 않도록 알아서 관리해주는 라이브러리이다. 즉 redux-toolkit 내장 라이브러리(?)라고 생각하면 된..

1. Redux 흐름 `reducer`: state에 변화를 일으키는 함수 `action`: state를 어떻게 할 것인지 들어있음. UI 컴포넌트에서 action 객체를 만듦. action객체 내부요소로 type와 payload가 있음. action 객체의 payload 에 대해서 ⭐️ 꼭 payload라는 이름을 통해서 보내야하나요? 리덕스는 유연한 라이브러리이기 때문에 많은 것들이 표준화되어 있지 않음. => 유연성 확보 리덕스 공식 문서를 확인해보면 액션은 객체이며 해당 액션이 어떤 기능을 수행해야 하는지 명시하는✔ type이라는 프로퍼티를 반드시 가져야 한다고 나와 있습니다. 아래와 같이 액션 객체에 type 프로퍼티를 추가해 어떤 기능을 수행해야 할지 명시해줍니다. {type: "ADD_NUM..

setId(event......) 바로 밑에서 id를 콘솔로 찍으면 어떻게 나올까? 입력값보다 한 타임 뒤처지는 것을 볼 수 있다.(업데이트 된 값이 찍힐 거라고 기대했었다.) 왜 이런 현상이 발생하는 걸까? ⭐ 바로 리액트에서의 배치 업데이트 방식 때문이다. ⭐ 과정을 자세하게 나열해보자면 다음과 같다. id와 id를 변경할 수 있는 state가 있음 state사용해서 id값 변경 요청 이전이후 상태 비교 후 배치 업데이트 id값 변경 반영 렌더링 이런 과정을 거치게 된다. 하지만 위 코드에서의 방식은 배치 업데이트 전에 콘솔을 찍어버리는 것이기 때문에 id값이 변경된 것을 반영하지 않게 된다. 그래서 한 타임씩 뒤처진 것을 콘솔로 찍게 된다. 해결방법은? ⭐ 의존성 배열값과 함께 useEffect 안..

1. styled components 설치 - vscode extention으로 설치를 먼저 한다. - vscode-styled-components 라는 익스텐션 설치한다. 터미널에 아래 명령 입력해서 패키지 설치 yarn add styled-components 그러면 npm market에서 이 패키지를 가져오는 것이다. 2. styled components 기본 사용 방식 미리 보기 ✔ CSS-in-JS 방식으로 작성할 수 있게 된다. 자바스크립트로 CSS 코드를 작성하는 방식! import React from "react"; import styled from "styled-components"; const StBox = styled.div` width: 100px; height: 100px; bord..

💡 이전에는 그냥 '그렇구나.' 하면서 넘어갔던 DOM과 Virtual DOM의 개념적인 측면에서 접근하며 알아보면서 왜 Virtual DOM이 등장했는지 좀 더 깊게 알아볼 수 있는 시간이었습니다. 💡 불변성에 대해 이해하기 위해 기본형 데이터와 참조형 데이터를 다시 한 번 곱씹어 볼 수 있는 시간을 가졌습니다. 1. DOM 과 Virtual DOM(가상 DOM) DOM 에 대한 간단한 설명 후 Virtual Dom 이 왜 필요한지, 그리고 props와 state에 대해 얘기하고자 한다. 1.1 DOM ⚪ 먼저, 렌더링에 대해서 말하고자 한다. 렌더링이라는 것은 브라우저가 클라이언트가 시각적으로 볼 수 있도록 화면에 출력하는 단계를 의미한다. 이 렌더링이 가능하도록 브라우저는 기본적으로 렌더링 엔진이라..

1. Component 컴포넌트는 리액트의 핵심 빌딩 블록 중 하나입니다. 즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성되죠. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줍니다. 그렇지만 우리 모두, 리액트 이전에 프론트엔드 개발 환경을 경험하시지 못했다면 무엇이 불편했고 리액트와 같은 컴포넌트 기반의 UI 라이브러리가 무엇을 편하게 해주는지 모르실 거에요. 시작하면서 얘기드렸듯, 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다. JSX 를 통해서 미리 선언해 놓은 화면 요소들을 React 가 그려줍니다. 선언하면? => 그려준다. 그래서 React 컴포넌트가 선언체인 것입니다. 리액트의 ..

1. props와 props drilling props 란 리액트에서 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터를 말한다. 개념자체는 그냥 정말 간단하다! 눈여겨 보아야 할 점은 props를 전달하는 방식이다. 밑의 내용이 모두 그 방식에 관한 내용이다. 1. prop drilling React 컴포넌트는 무조건 부모에서 자식 컴포넌트로, 즉, 위에서 아래로 데이터가 흘러가는 방식이다.[단방향] 이 과정에서 props로 데이터를 컴포넌트 간에 전달할 수 있는데, 컴포넌트가 무수히 많다는 가정 하에 최상위 컴포넌트에서 최하위 컴포넌트까지 데이터를 전달하려면 중간에 있는 컴포넌트들이 그 데이터를 사용하지 않음에도 불구하고 상위컴포넌트로부터 어쩔 수 없이 props를 전달받아 하위 컴포넌트로 넘기는 역할..