앞서 Context API에 대한 글을 몇개 작성했다. 하지만 결국 Context API를 언제 사용해야 하는지 이런 부분에 대해서는 결론에 도달하지 못했다. Redux vs Context 는 정말 많은 이야기가 있지만 정작 어떤 경우에 어떤 것을 사용해야 좋을지 모른 상태에서 그저 " 사용 " 하고 있었다. 이번에는 근복적인 내용으로 Context와 Redux가 무엇이고 어떻게 사용해야하고, 어떻게 다른지, 언제 사용해야하는지 결론을 정리하려고 한다. React Context란? 일반적인 React 애플리케이션의 데이터는 위에서 아래로 Props를 통해서 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 경우 번거로울 수 있다. context를 사용하면 트리 단계마다 명시적으로 props를..

시스템 설계가 중요한 이유 우리가 프로젝트를 진행할 때 초기에는 기능을 구현하는 것이 수월하게 진행된다. 하지만 6개월이 지나고, 초기 계획 했던 기능 외에도 추가적인 많은 기능을 구현해야 합니다. 이때, 기존 프로젝트에 새로운 기능 또는 변경할 기능을 적용하는 것이 점점 더 어려워집니다. 그리고 어느 시점에서는 구현에 시간이 너무 오래 걸려서 일부 새로운 기능과 변경 사항은 거부하기 시작했다. 이처럼 최초에 설계를 잘해서 구성 요소를 쉽게 변경할 수 있도록 하지 않으면 점차 유지보수에는 어려움이 따라오게 되어있다. 독립 구성 요소 A 와 B가 서로 독립 ( Orthogonal )이면 A를 변경해도 B는 변경되지 않는다. 이는 반대의 경우에도 마찬가지로 이것은 독립성의 개념이다. 무선 장치에서 볼륨과 방..

React 18 버전이 정식 릴리스가 되면서 추가된 Suspense에 대해서 알아보자 Suspense? Suspense는 React에서 컴포넌트의 렌더링을 특정 작업이 끝날 때까지 중단시키고 다른 컴포넌트를 먼저 렌더링 하는 기능이다. 일반적으로 REST API나 GraphQL을 호출하여 네트워크를 통해 비동기로 데이터를 가져오는 경우에 사용하면 유용할 것 같다. 유저의 리스트를 출력하는 UserList 컴포넌트가 있다고 생각해보자. 당연히 컴포넌트를 호출하면 화면에 UserList 컴포넌트가 나타날 것이다. 하지만 아직 비동기 데이터인 유저 정보를 가지고 오지 않았다면 로딩 화면이 출력돼야 할 것이다. import { useState, useEffect } from "react"; function Us..

웹 애플리케이션을 만들 때 어려운 것 중 하나가 상태관리이다. 이번에 Derived State ( 파생 상태 )라고 불리는 것에 대해서 공부할 계획이다. Derived State ? 파생 상태라는 것은 최소한의 데이터를 저장하게 끔 상태를 관리하는 방식이다. 즉, 상태를 최소화 한다는 것이다. 계산할 수 있는 상태에 대해서는 저장하지 않고 계산을 통해 변경 사항이 발생하면 동기화 하는 방식으로 관리한다. 실제 예 각 노래에 대해서 체크박스로 구성된 노래 선택기가 있다고 생각해보자. 이러한 노래는 장르별로 그룹화가 되어있다. 그 이유는 개별 노래를 선택할 수 있고 장르를 선택하면 모든 노래가 선택되길 희망한다. 이런 형식의 페이지를 우리가 개발하다보면 쉽게 접할 수 있다. 이것을 만들기 위해서 가장 첫번째..

우리는 많은 유형을 홈페이지 헤더를 만듭니다. const Header = () => { return ( ) } 헤더에는 Logo, MenuItem, UserProfile 등 요소를 포함해서 개발합니다. 이때, 헤더에서 로그인 기능을 제공한다고 생각해보면 UserProfile 부분은 SignIn과 UserProfile로 나뉘어서 제공됩니다. const Header = (props: { showSignup: boolean }) => { return ( {!props.showSignup && } {!props.showSignup && } {props.showSignup && } ) } 다음과 같이 보여집니다. 아직까진 훌륭한 헤더이다. 필터링된 헤더 현재 헤더에서 보여주고 있는 기능이 너무 많아서 특정 화면에..

웹사이트 개발을 하다보면 브라우저마다 기본적으로 설치되어 있는 스타일이 달라서 거슬리는 경우가 많다. 이런 경우 브라우저에서 기본적으로 제공하는 스타일을 초기화시켜 호환성을 맞춰주는 작업이 필요하다. 이때 사용하는 것이 바로 styled-reset이다. 사용하는 방법 Yarn yarn add styled-reset 코드 적용하기 import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; const GlobalStyle = createGlobalStyle` ${reset} * { // ... } body { margin: 0 } a { text-decoration: none; outline: none; } ..

프로그래머스 문제를 풀다보면 " 이 문제를 따로 기록해두고 다음에도 풀어야지 " 라는 생각을 한 적이 있다. 그런데 막상 어딘가에 저장을 하면 잊고 있거나, 문제의 중요도 또는 무슨 용도인지 까먹게 된다. 그래서 이런 코딩 문제를 풀고 저장할 수 있는 서비스를 만들면 어떨까 생각하였다. 그리고 한번 만들어 보려고 한다. 따로 백엔드 서버는 사용할 계획이 없고, json 파일을 통해서 import & export 방식으로 데이터를 관리하려고 한다. 또한 한번 다양한 언어를 실행 사이트 내에서 돌리는 기능도 추가하려고 한다. 본격적으로 시작해보자!

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 비동기적으로 바뀌는 컴포넌트 UI 테스트 const { useState, useEffect } = require("react"); const DelayedToggle = () => { const [toggle, setToggle] = useState(false); useEffect(() => { setInterval(() => { setToggle((prev) => !prev); }, 1000); }, []); return ( 상태 : {toggle ? "On" : "Off"} {toggle && 토글이 켜졌다!} ); }; export default DelayedToggle; 다음과 같이 1초마다 상태 값이 바뀌는 컴포넌트가 있습..