자바스크립트에서는 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택하고 특정 이벤트가 발생하면 변화를 주도록 설정을 해야 한다. 만약 사용자와의 상호작용이 잦아지고 이를 동적으로 화면에 표현을 하려면 규칙이 다양해지고 복잡해질 것이다. 그렇게 된다면 유지보수도 어려워질 것이고 애플리케이션의 규모가 크다면 DOM을 직접 건드리면서 작업을 하면 코드가 난잡해질 수 있다. 처리해야 할 이벤트, 관리해야할 상태값, DOM 도 다양해진다면 업데이트를 하는 규칙도 많이 복잡해지기 때문에 그래서 생겨난 프레임워크들은 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해주어서, 업데이트하는 작업을 간소화해 주는 방식으로 웹개발의 어려움을 해결했다. 하지만 리액트는 어떠한 상태가..
Redux과제를 끝내고 Redux toolkit을 사용하면 더 쉽게 코드를 작성할 수 있다하여 공부해 보았다. Udemy 강의를 보면서 그대로 따라친 코드이지만 앞으로 만들어볼 프로젝트에서 참고할 일이 있기를 바라며 블로그를 작성해본다. 이 어플리케이션은 사용자가 로그인 여부에 따라 보여지는 화면을 리덕스를 이용해 다르게 구현하였다. 사용자의 로그인 여부는 어플리케이션 전체에서 공유되는 전역 상태이기 때문에, 이를 컴포넌트 간에 porps로 전달하거나 컴포넌트 상태로 관리하는 것은 비효율적이다. 이를 리덕스로 관리하면 전역 상태에서 일관된 방식으로 사용할 수 있으며, 로그인 여부와 관련된 로직이 변경될 경우에도 코드 수정이 간편해진다. 🔗설치방법과 포함된 API들(공식문서) Getting Started ..
들어가기에 앞서 리덕스란? 리덕스는 자바스크립트 어플리케이션 상태관리 라이브러리 이다. 특히 React와 함께 사용될때 유용하지만 다른 라이브러리와 프레임워크와도 사용이 가능하다. 리덕스는 하나의 상태를 하나의 저장소로 관리하며 이 저장소에 저장된 상태는 직접 수정이 불가능하고 오직 액션을 통해서만 변경될 수 있다. 액션은 상태 변경을 위한 명령어이며 어플리케이션에서 발생하는 모든 상태 변경은 이러한 액션을 통해 이루어진다. 액션을 처리하기 위해서는 리듀서를 이용해 이전 상태와 액션을 받아 새로운 상태를 반환하는 순수함수이다. 리덕스는 단방향 데이터 흐름을 따르기 때문에 상태 변화를 예측하기 쉽고, 디버깅도 용이하다. 또한 여러 컴포넌트 간의 상태를 공유하거나 상태 변경 로직을 중앙 집중화하여 관리하기 ..
props를 이용해 끌어올리기로 자식의자식의자식의자식이 부모컴포넌트의 상태를 관리하기위해 그 중간 자식컴포넌트들은 단순히 데이터를 전달하는 현상을 Props Drilling이라고 한다. 전역 상태 관리 라이브러리인 Redux를 본격적으로 사용해보기 전에 Props Drilling으로 인해 불필요한 랜더링이 일어나고 코드의 가독성, 유지보수가 어려운 점을 직접 경험해보는 과제를 진행했다 :) 끌어올리기는 비효율적인게 아니라 비효율적인 상황에 있다! by냠냠맨 일단 컴포넌트의 구조는 이렇다. 메인 컴포넌트인 App.js에는 2가지 상태가 있다. 1. 상품목록 2. 장바구니에 당긴 상품 목록 상품목록을 변경할 일은 아직 없으므로 상품목록 변경함수를 제외한 나머지 상태들은 상품리스트와 장바구니에서 모두 필요하다..
자동완성 import { useState, useEffect } from 'react'; import styled from 'styled-components'; const deselectedOptions = [ 'rustic', 'antique', 'vinyl', 'vintage', 'refurbished', '신품', '빈티지', '중고A급', '중고B급', '골동품' ]; /* TODO : 아래 CSS를 자유롭게 수정하세요. */ const boxShadow = '0 4px 6px rgb(32 33 36 / 28%)'; const activeBorderRadius = '1rem 1rem 0 0'; const inactiveBorderRadius = '1rem 1rem 1rem 1rem'; export..
모달 export const Modal = () => { const [isOpen, setIsOpen] = useState(false); const openModalHandler = () => { // TODO : isOpen의 상태를 변경하는 메소드를 구현합니다. setIsOpen(!isOpen) }; return ( {isOpen ? "Opened!" :"Open Modal"} {/* TODO : 조건부 렌더링을 활용해서 Modal이 열린 상태(isOpen이 true인 상태)일 때는 ModalBtn의 내부 텍스트가 'Opened!' 로 Modal이 닫힌 상태(isOpen이 false인 상태)일 때는 ModalBtn 의 내부 텍스트가 'Open Modal'이 되도록 구현해야 합니다. */} {/* TO..
✅ 검색 조건이 바뀔 때마다, FlightDataApi의 getFlight를 검색 조건과 함께 요청해야 합니다 ✅ getFlight의 결과를 받아, flightList 상태를 업데이트해야 합니다 ✅ 더이상, 컴포넌트 내 필터 함수 `filterByCondition`를 사용하지 않습니다 우선 FlightDataApi에 담긴 getFlight 함수를 사용하는것은 react 컴포넌트와 관련이 없는 동작이므로 Side Effect라고 볼 수 있다. useEffect 훅을 사용하여 Side Effect를 관리를 해준다. useEffect는 함수와 배열을 인자로 받는데 함수에는 side effect를 배열에는 종속성 배열 즉 변화를 감지할 상태값을 넣어주면된다. 여기서 condition은 항공권을 조회할때 출발지..
Side effect가 어떤 의미인지 알 수 있다. React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. Side effect의 예를 들 수 있다. Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다. Effect Hook에서의 dependency array 사용법을 이해할 수 있다. 컴포넌트 내에서 네트워크 요청 시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다. side effect란? 부수효과 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고한다. 리액트에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나..
React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다. 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다. State 끌어올리기의 개념을 이해할 수 있다. 상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다. 단방향 데이터 흐름 리액트는 컴포넌트 단위로 개발을하는것이 가장 큰 특징이다. 먼저 컴포넌트를 어떤 계층구조로 사용할 것인지 나누고 페이지를 조립해 나가기 때문에 상향식으로 앱을 만든다고 할 수 있다. 컴포넌트를 나눌때 한 컴포넌트는 한가지 일만 한다는 단일책임원칙에 따른다. 컴포넌트는 부모 컴포넌트에서 props를 이용해 데이터를 전달인자처럼 받을 수 있다. =>하향식 데이터 흐름, 단방향 데이터 흐름(one-way-data flow..
각 글의 타이틀을 클릭하면 모달창이 뜨고 다시 클릭하면 모달창이 사라지는 것을 구현해 보았다. 별로 어려운 로직은 아닌데 리액트로 하려니 괜~히 더 헷갈렸다. 각각의 글들은 ListItem이라는 컴포넌트에 구현되어 있다. 1. modal의 상태초기값은 false로 설정을 한다. 2. 모달이 생길 위치에서 태그로 감싸고 1에서 주었던 값에 따라 컴포넌트 표시 여부를 결정한다. 3. 글 제목이 들어있는 태그에 onClick 이벤트 발생 시 modal의 상태값이 false라면 true를 아니라면 false를 반환시켜서 클릭 시 modal의 상태 값에 따라 2번에서 모달창을 동작시킨다.
