하이고니의 개발 스토리

아래 사진과 같은 구조의 React 애플리케이션이 있다고 하자. 이 애플리케이션에는 컴포넌트 3, 컴포넌트 6에서만 사용되는 상태가 있다. 그렇다면 이 상태는 어느 컴포넌트에 위치시켜야 할까? React 데이터 흐름에 따르면, 상태를 최상위 컴포넌트에 위치시키는 것이 가장 적절할 것이다. 하지만 이런 상태 배치는 다음과 같은 이유로 다소 비효율적으로 느껴질 수 있다. 1. 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트 1, 컴포넌트 2도 상태 데이터를 가짐 2. 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함 3. 애플리케이션이 복잡해질수록 데이터의 흐름도 복잡해짐 4. 컴포넌트 구조가 바뀌면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음 Redux는 전역 상태를 관리할 수 ..

리액트가 상태 변경을 감지하기 위해 만족되어야 하는 조건 const [count, setCount] = useState(0); 1) 상태 변경 함수가 호출되어야 한다. count = 2; 이런 식의 재할당은 X 2) 상태 변경 함수에 전달된 인자와 기존의 상태가 달라야 한다. setCount(0) // => X : 0 === 0 true setCount(1) // => O : 0 === 1 false 상태가 참조형 데이터라면? => 참조형 데이터는 자신의 값으로 주소를 담고 있음. 주소가 달라져야 상태 변경을 인지한다. 아래는 코드스테이츠에서 제공 받은 'CMarket' 이라는 싱글 페이지 어플리케이션이다. path="/" 상품리스트 페이지 path="/shoppingcart" 장바구니 페이지 더미 데이..

Modal 모달은 기존에 이용하던 화면 위에 오버레이되는 창을 말한다. 닫기 버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이며, 모달을 닫기 전에는 기존 화면과 상호작용할 수 없다. 1. ModalBtn을 클릭하면 ModalBackdrop + ModalView가 보여야 한다. 1-1. isOpen으로 열리고 닫히는 상태를 관리한다. 1-2. openModalHandler라는 함수로 isOpen 의 boolean 값을 관리한다. 2. ModalView는 ModalBackdrop에 포함된 요소다. 3. ModalView의 x버튼을 누르거나, ModalBackdrop을 누르면 모달창이 꺼진다. import { useState } from "react"; import styled from "s..

데이터베이스는 없음. 서버에 데이터 두고 axios로 GET, POST, PUT, DELETE 요리조리 해봤다. 서버부터 복기해봅시다. 서버 app.js const express = require('express'); const app = express(); const cors = require('cors'); const morgan = require('morgan'); app.use(morgan('tiny')); app.use(cors()); app.use(express.json()); const port = 4000; const discussionsRouter = require('./router/discussions'); const { addHook } = require('dompurify'); ap..

Redux: state를 여러 Component에서 사용해야 하는 경우, props 없이 state를 공유하면서, 작업의 편의성을 높여주는 라이브러리. redux store.js 파일 내에 state들을 저장하고 여러 Component에서 꺼내 쓴다. 세팅: 1. 터미널에서 redux 설치 npm install @reduxjs/toolkit react-redux 2. store.js 파일 생성 3. store.js 파일 내에 코드 복붙 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) 4. index.js 에 코드 추가 import store from './store.js' sto..