🍞 Front-End/React

애플리케이션의 전역 상태를 효과적으로 공유하고 관리하기 위해 redux가 등장했다. redux는 상태를 변화시키는 방법과 상태의 변이를 구독하는 방법을 제공한다. Context를 사용할 경우에 Context가 가지고 있는 전역 데이터를 효과적으로 관리할 것에 대한 라이브러리가 Redux이다. Redux는 기본적으로 Flux 패턴을 따르고 있다. 어떤 Action이 발생하면, Dispatcher에서 이를 받아와 해석한 후 Store에서 저장된 정보에 변경을 가하고, 그 결과가 View로 다시 전달되도록 한다. 그런데 모바일에서 터치를 하는 것처럼, 웹에서도 사용자가 View를 통해서 클릭 같은 액션을 발생시킬 수 있다. 그런 경우도 고려하면 아래와 같은 흐름이 만들어진다. 이러면 뭐가 단방향이냐… 라고 볼..

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법을 제공한다. 한마디로, 부모 컴포넌트 DOM 트리로부터 벗어난다는 말이다. Portals – React A JavaScript library for building user interfaces ko.reactjs.org 보통 컴포넌트 렌더링 메서드에서 엘리먼트를 반환할 때 그 엘리먼트는 부모 노드에서 가장 가까운 자식으로 DOM에 마운트 된다. 그런데 가끔 DOM의 다른 위치에 자식을 삽입하는 것이 유용할 수 있다. portal의 전형적인 사용 예시는 부모 컴포넌트에 overflow: hidden이나 z-index가 있는 경우이지만, 시각적으로 자식을 튀어나오도록 보여야 하는 경우다. ex) 다이얼..

📌 Memoization 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. Memo.jsx import React, { useState } from "react"; import Comments from "./Comments.jsx"; const commentList = [ { title: "comment1", content: "message1", likes: 1 }, { title: "comment2", content: "message2", likes: 1 }, { title: "comment3", content: "message3", likes: 1 }, ]; expo..

👇 일단 이벤트 버블링과 이벤트 캡처링에 대해서 미리 알아야한다! 간단히 정리하자면, 이벤트 버블링이라는 것은 자식에서 부모 요소로 이벤트가 전파되는 방식을 말하고 이벤트 캡처링이라는 것은 부모에서 자식 요소로 이벤트가 전파되는 방식을 말한다. [JavaScript] 이벤트 버블링, 이벤트 캡쳐 📌 이벤트 버블링 - Event Bubbling 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. 아래 콘솔 창은 three className uiop5809.tistory.com 📌 합성 이벤트(SyntheticEvent) JS에서 이벤트 버블링과 캡처링에 대해서 이해가 끝났다면, 이제 리액트의 합성 이벤트에 대해서 알아보겠다! 원래..

📌 Fetch API Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다. XMLHttpRequest와 같은 비슷한 API가 존재하지만, 새로운 Fetch API는 좀 더 강력하고 유연한 조작이 가능하다. Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있다. Fetch API - Web API | MDN Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새..

JavaScript의 try catch문처럼 에러로 React가 컴포넌트를 그릴 수 없는 상황을 만들어줄 것이다. 먼저, 아래의 사진처럼 Child 컴포넌트에 throw new Error로 에러를 생성해줬다. ErrorBonudary 자식 안에서 에러가 났으면 Catch Error 해서특정한 화면을 보여주겠다는 영역이다. 아까와 같이 콘솔 창에서는 똑같은 에러가 뜨지만, 화면상에서는 특정 화면을 보여주는 것을 볼 수 있다. 이것을 함수형 컴포넌트로 만들 수 없는 이유는 에러가 났을 때 상태 값을 어떻게 처리하는 함수 자체(getDerivedStateFromError)를 클래스 컴포넌트에서만 제공을 하기 때문이다. 여기서 Fallback이라는 것은 Error가 났을 때 보여줄 컴포넌트를 의미한다.

📌 useRef()로 DOM 다루기 Input Element가 있고 화면이 뜨자마자 focus를 주고 싶다면 useRef() hook을 사용하면 된다. 왜 document.querySelector 류를 사용하지 않고 useRef라는 별도의 방법을 제공할까? Vanilla JS 같은 경우는 document.get ~ / document.query ~ React 같은 경우는 useRef / ref을 사용한다. 태그에 ref props로 넘겨주고 current로 접근하여 사용할 수 있다. 📌 Form 다루기 preventDefault로 submit을 하면 새로고침되는 기본 동작을 없애준다. 그리고 console의 dir을 사용해 target의 elements 모든 속성을 확인해봄으로써 form에 접근할 수 있..

state는 컴포넌트 렌더링에 영향을 주는 데이터를 갖고 있는 객체인데, 이것을 업데이트하기 위해서는 setState, useState가 필요하다. 컴포넌트는 현재의 this.state와 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데, state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있다. 📌 state state는 일반 변수와 다르게 값이 변하면 렌더링이 일어난다. 즉, 값이 변하게 되면 연관있는 컴포넌트들이 다시 렌더링이 되어 화면이 바뀌게 된다. state는 props와 같이 컴포넌트 렌더링에 영향을 주는 데이터를 갖고 있는 객체이고, 컴포넌트 안에서 관리된다. setState(updat..

CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 장단점이 서로 엇갈려 있다. 따라서 서로의 장단을 정확하게 알고, 필요한 방식으로 구현하는 것이 중요하다. 📌 CSR(Client Side Rendering) 말 그대로 렌더링이 클라이언트 쪽에서 일어난다. 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다. - js가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는 화면이 보이지 않음 - js가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 화면이 보이면서 유저가 인터렉션 가능 웹 서비스에 접속을 하게 되면 웹 서비스에서 html을 먼저 다운로드하게 된다. html이..

순수 자바스크립트의 경우 변경되면 Element 전체를 다시 그린다. 그러나 React의 경우 변경된 부분만 다시 그리기 때문에 더 효율적으로 리랜더링 하는 것을 볼 수 있다! 📌 Virtaul DOM UI의 가상적인 표현을 메모리에 저장하고 ReactDOM 라이브러리에 의해 실제 DOM과 동기화하는 것이다. 가상의 돔 트리를 사용해서, 이전 상태와 이후 상태를 비교하여, 바뀐 부분을 찾아내 자동으로 바꿔준다! 개발은 항상 모든 것이 trade-off다. 즉, 하나가 좋으면 하나를 잃게 된다. 위의 결과를 보면 React가 무조건 정답같고 JavaScript는 쓰면 안 될 것 같지만, 정답이 아니다. React 엘리먼트는 불변객체이다. 불변 객체? 변하지 않는 객체(immutable) 우리는 그저 Rea..